/* =========================================================
   Clínica Médica AsPontes — hoja de estilos de toda la web
   Para cambiar un color en TODA la web, cámbialo aquí abajo.
   ========================================================= */

:root {
  --fondo: #ebebeb;          /* gris de fondo de la página */
  --rojo: #941100;           /* menú, nombres de los médicos */
  --rojo-hover: #ff40ff;     /* color del menú al pasar el ratón (como en iWeb) */
  --verde: #32783f;          /* dirección y teléfono */
  --verde-cv: #009051;       /* textos de los currículums y títulos */
  --gris-texto: #584d4d;     /* textos normales */
  --azul: #021eab;           /* enlaces de la columna derecha en la portada */
  --panel: #d0d0cd;          /* color de fondo bajo la orquídea */

  --letra-menu: "Bodoni 72 Smallcaps", "Bodoni SvtyTwo SC ITC TT", "Bodoni 72", Didot, "Times New Roman", serif;
  --letra-texto: Helvetica, Arial, sans-serif;
  --letra-cv: Optima, "Trebuchet MS", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--gris-texto);
  font-family: var(--letra-texto);
  font-size: 15px;
  line-height: 1.45;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

a:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* ---------- Cabecera con el logotipo ---------- */

.cabecera {
  text-align: center;
  padding: 45px 16px 10px;
}
.cabecera img { width: 546px; }
.cabecera.logo-grande img { width: 346px; }

/* ---------- Estructura en tres columnas ---------- */

.pagina {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px 80px;
  display: grid;
  grid-template-columns: 220px minmax(0, 652px) 290px;
  gap: 0 40px;
  justify-content: center;
  align-items: start;
}

/* ---------- Menú de la izquierda ---------- */

.menu {
  font-family: var(--letra-menu);
  font-size: 18px;
  padding-top: 8px;
}
.menu ul { list-style: none; margin: 0 0 40px; padding: 0; }
.menu li { margin: 0 0 9px; }
.menu a { color: var(--rojo); text-decoration: none; }
.menu a:hover { color: var(--rojo-hover); }
.menu .titulo-menu { font-size: 25px; display: inline-block; margin-bottom: 18px; }
.menu .volver { display: inline-block; margin-top: 100px; }

/* ---------- Panel central con la orquídea ---------- */

.panel {
  position: relative;
  min-height: 533px;
  background: var(--panel);
  padding: 40px 50px 50px;
  isolation: isolate;
}
.panel::before {
  /* la orquídea de fondo, que se difumina hacia abajo */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 652 / 533;
  background: url("img/orquidea.jpg") top center / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(#000 85%, transparent);
          mask-image: linear-gradient(#000 85%, transparent);
  z-index: -1;
}
.panel::after {
  /* el "reflejo" bajo el panel, como en iWeb */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 90px;
  background: linear-gradient(var(--panel), transparent);
  opacity: .7;
  pointer-events: none;
}

.centrado { text-align: center; }

/* ---------- Columna derecha (contacto) ---------- */

.lateral {
  text-align: center;
  padding-top: 270px;
  color: var(--verde);
}
.lateral.con-foto { padding-top: 8px; }
.lateral .foto-sala { width: 260px; display: block; margin: 0 auto 14px; }
.lateral .fotos-videos { font-family: var(--letra-menu); font-size: 15px; color: var(--azul); margin: 0 0 70px; }
.lateral .fotos-videos a { text-decoration: none; color: var(--azul); }
.lateral .fotos-videos a:hover { color: var(--rojo-hover); }
.lateral p { margin: 0; }
.lateral .telefono { font-size: 18px; margin: 14px 0; }
.lateral .telefono a { text-decoration: none; }
.lateral .webs { font-style: italic; margin-bottom: 14px; }
.lateral .webs a { color: var(--gris-texto); display: block; }
.lateral.portada .webs a { color: var(--azul); text-decoration: none; }
.lateral .registro { color: #212121; font-weight: bold; font-size: 13px; }
.lateral .facebook { display: inline-block; margin-top: 18px; }

/* ---------- Portada ---------- */

.novedad {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: center;
  gap: 4px;
  margin: 30px 0 0 -20px;
  text-decoration: none;
}
.novedad img { width: 104px; }
.online {
  text-align: center;
  color: #1a2ee0;
  font-family: Palatino, "Book Antiqua", Georgia, serif;
}
.online strong.titulo { display: block; font-weight: normal; font-size: 26px; padding-top: 50px; }
.online span { font-size: 15px; }
.novedad:hover .titulo { text-decoration: underline; }
.lema { display: block; margin: 130px auto 0; width: 578px; }

/* ---------- Páginas de cada especialidad ---------- */

.especialista {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 70px;
}
.especialista img { width: 130px; }
.area { font-family: var(--letra-menu); font-size: 20px; color: #5a5050; text-transform: uppercase; margin: 0 0 22px; text-align: center; }
.nombre { font-family: var(--letra-menu); font-size: 28px; color: var(--rojo); margin: 0; text-align: center; font-weight: normal; }
.hospital { font-family: var(--letra-menu); font-size: 20px; color: #5a5050; text-transform: uppercase; text-align: center; margin: 40px 0 0; line-height: 1.5; }
.mas-info { display: block; text-align: center; margin-top: 50px; color: #333; text-decoration: none; }
.mas-info:hover { text-decoration: underline; }

/* ---------- Currículums ---------- */

.foto-cv { display: block; margin: 0 auto 14px; width: 172px; }
.cv-nombre { font-family: var(--letra-menu); font-size: 26px; color: var(--rojo); text-align: center; font-weight: normal; margin: 0 0 28px; }
.cv { list-style: none; padding: 0; margin: 0; font-family: var(--letra-cv); font-size: 15px; color: var(--verde-cv); }
.cv li { margin-bottom: 1em; }

/* ---------- Páginas de texto (quiénes somos, enfermería…) ---------- */

.titulo-verde { font-family: var(--letra-menu); color: var(--verde-cv); font-size: 26px; font-weight: normal; text-align: center; margin: 0 0 22px; }
.texto p { margin: 0 0 1em; }
.nota { font-size: 11px; font-style: italic; color: #333; margin-top: 30px; }
.lista-guiones { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.lista-guiones li { margin: 0 0 2px; }
.subtitulo-verde { font-family: var(--letra-menu); color: var(--verde-cv); font-size: 22px; font-weight: normal; margin: 40px 0 14px; }

/* listado de especialidades */
.especialidades { list-style: none; padding: 0; margin: 50px 0 0; text-align: center; font-family: var(--letra-menu); font-size: 22px; }
.especialidades li { margin-bottom: 14px; }
.especialidades a { color: var(--rojo); text-decoration: none; }
.especialidades a:hover { color: var(--rojo-hover); }

/* ---------- Seguros ---------- */

.logos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 24px; }
.logos img { height: 64px; width: auto; background: #fff; }

/* ---------- Fotos ---------- */

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.galeria a { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Vídeo, mapa y formulario ---------- */

.video { width: 100%; display: block; background: #000; }
.mapa, .formulario { width: 100%; border: 0; display: block; }
.mapa { aspect-ratio: 4 / 3; }
.formulario { height: 560px; background: #fff; }
.gps { display: inline-block; margin-top: 18px; padding: 6px 14px; border: 2px solid #999; background: #f4f4f4; color: var(--verde-cv); font-weight: bold; font-size: 13px; text-align: center; }

/* ---------- Blog ---------- */

.blog-intro { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: start; font-size: 13px; margin-bottom: 30px; }
.entradas { list-style: none; padding: 0; margin: 0; }
.entradas li { padding: 16px 0; border-top: 1px solid #b9b9b9; }
.entradas h2 { font-family: var(--letra-menu); font-weight: normal; font-size: 21px; margin: 0 0 2px; }
.entradas h2 a { color: var(--rojo); text-decoration: none; }
.entradas h2 a:hover { color: var(--rojo-hover); }
.entradas .fecha, .articulo .fecha { font-size: 12px; color: #777; margin: 0 0 6px; }
.entradas p { margin: 0; font-size: 13px; }
.articulo h1 { font-family: var(--letra-menu); font-weight: normal; font-size: 28px; color: var(--rojo); margin: 0 0 4px; }
.articulo .seccion { font-size: 13px; color: var(--verde-cv); margin: 0 0 24px; }
.articulo .cuerpo { font-size: 14px; }
.articulo .cuerpo p { margin: 0 0 1em; }
.articulo .cuerpo img { display: block; margin: 0 auto 1.2em; }
.anterior-siguiente { display: flex; justify-content: space-between; margin-top: 40px; font-size: 13px; }
.anterior-siguiente a { color: #333; }

/* =========================================================
   Móviles y tabletas: todo en una sola columna
   ========================================================= */

@media (max-width: 1100px) {
  .pagina { grid-template-columns: 200px minmax(0, 1fr); }
  .lateral, .lateral.con-foto { grid-column: 1 / -1; padding-top: 70px; }
}

@media (max-width: 760px) {
  .cabecera { padding-top: 24px; }
  .pagina { grid-template-columns: minmax(0, 1fr); padding: 0 12px 50px; }
  .menu { text-align: center; padding-bottom: 10px; }
  .menu ul { margin-bottom: 20px; }
  .menu .volver { margin-top: 10px; }
  .panel { padding: 26px 18px 34px; min-height: 0; }
  .novedad { margin: 0; grid-template-columns: 70px 1fr; }
  .novedad img { width: 70px; }
  .online strong.titulo { font-size: 21px; padding-top: 0; }
  .lema { margin-top: 50px; }
  .especialista { grid-template-columns: 1fr; justify-items: center; margin-top: 10px; }
  .hospital { font-size: 16px; }
  .blog-intro { grid-template-columns: 1fr; }
  .blog-intro img { display: none; }
  .formulario { height: 640px; }
}