/* ------------------------------------------------------------------
   TIPOGRAFIAS, servidas desde este mismo dominio
   ------------------------------------------------------------------
   Antes venian de fonts.googleapis.com, y eso tiene dos problemas en
   una web sanitaria: la IP de cada visitante llegaba a Google antes de
   que nadie aceptara nada, y la pagina no podia pintar texto hasta
   terminar de hablar con dos dominios ajenos.

   Son las mismas dos familias y los mismos archivos que servia Google
   —los dos son de licencia libre (OFL)—, solo que alojados aqui. Son
   variables: un archivo cubre todos los pesos del rango, que es lo que
   necesita esta web, donde hay pesos sueltos como 250, 370 y 470.

   El rango de caracteres va declarado: el navegador solo se descarga
   latin-ext si la pagina usa alguna letra que no este en latin.
   ------------------------------------------------------------------ */
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/assets/fuentes/instrument-sans-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/assets/fuentes/instrument-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:300 500;
  font-display:swap;
  src:url('/assets/fuentes/newsreader-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:300 500;
  font-display:swap;
  src:url('/assets/fuentes/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:200 400;
  font-display:swap;
  src:url('/assets/fuentes/newsreader-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:200 400;
  font-display:swap;
  src:url('/assets/fuentes/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ================================================================
   PALETA
   Negro y blanco de protagonistas, que es lo que es el logotipo, y
   beige como tercer tono: hace de fondo cálido en las bandas, igual
   que el crema en la web de Martha.
   Lo único a decidir es si además hay un color que resalte. Las tres
   variantes de abajo son eso, y solo cambian dos variables.
   Todas comprobadas: la pareja más justa da 5.85.
   ================================================================ */

:root{
  --papel:        #FFFFFF;   /* blanco protagonista */
  --blanco:       #FFFFFF;
  --hueso:        #F1EEE7;   /* lino: cálido, pero sin el amarillo del beige */
  --grafito:      #111111;   /* negro protagonista */
  --grafito-hondo:#050505;
  --texto:        #2E2C29;   /* 13.92 sobre blanco · 11.43 sobre beige */
  --texto-tenue:  #5C574F;   /*  7.16 sobre blanco ·  5.88 sobre beige */
  --borde:        #E4DFD5;

  /* El beige que resalta. Va SIEMPRE de relleno, nunca de tinta:
     como tinta sobre blanco da 1.43 de contraste y es ilegible.
     De relleno con texto negro encima da 13.20, de sobra. */
  --resalta:       #E6D6B8;   /* marcas pequeñas: resaltado, pastillas, círculos */
  --resalta-texto: #8F6810;   /* el beige de marca llevado a dorado y
                                 oscurecido, para LETRA: 5.05 sobre
                                 blanco. --resalta en una letra da 1.43
                                 y no se lee: ese tono solo vale detrás.
                                 Por encima de #9A7010 se baja de 4.5 y
                                 deja de cumplir. */
  --resalta-suave: #F0E6D2;   /* fondos al pasar por encima */
  --resalta-panel: #E6DED2;   /* superficies grandes. Mismo tono, 29% de
                                 saturación en vez de 48%: el beige del
                                 resaltado, estirado a un bloque de 420px
                                 de alto, se vuelve amarillo. */
}

/* A · Sin color que resalte. Solo negro, blanco y beige. Lo que
   resalta lo hace el negro, y en las bandas oscuras, el beige.
   Es literalmente la paleta del logotipo. */
:root{
  --titanio:       #111111;
  --titanio-claro: #E5DBC9;
  --borde-tenue:   rgba(17,17,17,.18);
}

/* B · Con verde quirúrgico. El color del campo de cirugía: viene del
   quirófano, no de una idea abstracta de elegancia. */

/* C · Con petróleo. Azul, pero tan oscuro y desaturado que no se
   confunde con el corporativo de las cadenas. */


/* Selector de pruebas. QUITAR ANTES DE PUBLICAR. */

/* ------------------------------------------------------------------
   Dr Correa Implantología Avanzada
   Sistema de diseño. No se edita ningún HTML a mano: todo sale de
   _fuente/generar.py. Este archivo sí se edita a mano.
   ------------------------------------------------------------------ */

:root{
  /* --- tipografía ---
     Newsreader en peso 300 para los titulares: el trazo fino y la
     transición alta son lo que da el aire elegante, y a tamaño grande
     aguanta. Instrument Sans para todo lo demás.
     Ninguna de las dos imita la geométrica del logotipo, a propósito:
     una parecida pero no igual haría que la web pareciese una
     imitación de su propia marca. */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Escala de tamaños. Todo tira de aquí: antes había cuarenta valores
     sueltos y seis de ellos caían dentro de 2px unos de otros, que es lo
     que se nota como falta de consistencia.
     Sans para datos y texto; serif para titulares y cifras de display. */
  /* El reparto, que es lo que de verdad hay que respetar:
       --t-rotulo  versalitas espaciadas
       --t-xs      micro: etiquetas de formulario, firmas, botones, menú
       --t-sm      superficies secundarias enteras: pie y chat. NUNCA
                   texto corrido de la página
       --t-md      TODO el texto corrido, esté suelto o dentro de un
                   cuadro. Antes las fichas iban a 15 y la página a 18,
                   y por eso cada bloque con caja parecía de otra web
       --t-lg      entradillas y teléfonos
     Lo que rompe la uniformidad no es tener muchos tamaños: es tener
     dos que se diferencian en 2px y nadie sabe cuándo va cada uno. */
  --t-rotulo: .8125rem;   /* 13px · versalitas espaciadas. Mismo cuerpo
                             que --t-xs a propósito: lo que las separa es
                             el tratamiento (caja alta y .2em de
                             espaciado), no el tamaño. */
  --t-xs:     .875rem;    /* 14px · micro */
  /* 17px. Era 15 y se quedaba corto en todo lo que no es texto corrido:
     fichas, chips, tablas, pies de dato. Como esos bloques son la mayor
     parte de las paginas de tecnica, se sube aqui y no bloque a bloque. */
  --t-sm:     1.0625rem;
  /* Interlineas: 1.7 para toda la prosa (es la del cuerpo y la que
     heredan los cuadros), 1.5 solo para bloques de datos —direcciones,
     horarios, listas de definicion—, 1.2 para titulares de ficha y 1.15
     para los de bloque. Habia ocho valores distintos para el mismo texto
     de 18px: 1.5, 1.55, 1.6, 1.62, 1.65, 1.7 y 1.75. */
  --t-md:     1.1875rem;  /* 19px · texto corrido. Baja a 16 en movil:
                             en el ordenador se lee a medio metro y el
                             cuerpo puede permitirse mas; en la mano, a
                             un palmo y en columna estrecha, 18px pide
                             demasiados saltos de linea. */
  /* 20 y 21 eran el mismo escalón con dos nombres: uno para la sans y
     otro para la serif. Un píxel de diferencia no se lee como jerarquía,
     se lee como descuido. Ahora valen lo mismo y cada nombre dice para
     qué familia es. */
  --t-lg:     1.3125rem;  /* 21px · entradillas y teléfonos */
  /* Mismo valor que --t-lg en ordenador, pero con vida propia: en movil
     --t-lg baja a 18 para que la entradilla no se despegue del parrafo,
     y los h3 y los numeritos no tienen por que bajar con ella. */
  --s-sm:     1.3125rem;  /* 21px · citas, numeritos y h3 en sans */
  --s-md:     1.5rem;     /* 24px · titulares de tarjeta */
  /* El suelo del clamp cae justo en --s-md: en movil los titulares de
     bloque y los de ficha miden lo mismo, y solo se separan cuando hay
     sitio. Con 1.7rem se quedaban a 3px del otro. */
  --s-lg:     clamp(1.5rem, 2.6vw, 2.3rem);  /* titulares de bloque */

  /* Medida del titular grande. La comparten todas las páginas de
     tratamiento para que las siete se vean iguales.
     Los tres titulares son los de martha-sitio, valor por valor: allí
     la escala ya está rodada en diez páginas y la nuestra tenía el h1
     7px por encima y el h2 5px por debajo, que es justo el error que
     hace que un titular de sección no se distinga de uno de bloque. */
  /* Los suelos estan puestos para que en movil coincidan con lo que ya
     hay: 40px es el titular de la portada, y 31,2 el h2. Antes el h1 de
     servicio caia en 39,52 y el h2 de la banda de cifras en 28, medio
     pixel y tres pixeles por debajo de su pareja. */
  --tam-hero:  clamp(2.5rem, 5.2vw, 4.15rem);    /*   40 – 66,4px */
  /* El suelo sube a 34: con el h3 en 24, un h2 de 31,2 se le quedaba a
     siete pixeles y los dos niveles se confundian en movil. Cuesta un
     renglon en cinco titulares de la portada; es lo que vale que se
     entienda donde empieza cada seccion. */
  --tam-h2:    clamp(1.875rem, 3.5vw, 2.5rem);   /*   30 – 40px */
  --tam-h3:    var(--s-md);                      /* alias de compatibilidad */
  --tam-lead:  clamp(1.1rem, 1.55vw, 1.38rem);

  /* --- forma --- */
  --radio: 3px;
  --radio-md: 6px;
  --medida: min(100% - 2.5rem, 1180px);
  --medida-angosta: min(100% - 2.5rem, 720px);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--papel); color:var(--texto);
  font-family:var(--sans); font-size:var(--t-md); line-height:1.7;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--titanio) }

.medida{ width:var(--medida); margin-inline:auto }
.angosta{ width:var(--medida-angosta); margin-inline:auto }

/* El rótulo en versales muy espaciadas es el device que hereda del
   logotipo: es el mismo tratamiento de "IMPLANTOLOGÍA AVANZADA". */
.rotulo{
  font-size:var(--t-rotulo); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--titanio); margin:0 0 1.1rem;
}
.rotulo-claro{ color:var(--titanio-claro) }

h1,h2{ font-family:var(--serif); font-weight:300; letter-spacing:-.012em;
       text-wrap:balance; margin:0 }
/* Un unico h3 para toda la web: serif, peso 300, --s-md. Antes el h3 por
   defecto iba en sans 600 y las fichas en serif 300, asi que dos titulos
   del mismo nivel se veian completamente distintos. El cuerpo es el mismo
   que el de las fichas y la familia la misma que la del h2, de modo que
   la jerarquia la marca el tamano y nada mas. */
h3{ font-family:var(--serif); font-weight:300; font-size:var(--s-md);
    letter-spacing:-.012em; color:var(--grafito); margin:0 0 .5rem;
    line-height:1.2 }
h2{ font-size:var(--tam-h2); line-height:1.16; color:var(--grafito) }
p{ margin:0 0 1.1rem }
p:last-child{ margin-bottom:0 }

/* ---------------------------------------------------------- barra
   Una sola cosa: las urgencias. Centrada y con peso, porque quien
   llega con un dolor a las tres de la mañana no busca, mira arriba. */
.barra{ background:var(--grafito); color:var(--papel) }
/* Tres columnas para que las urgencias queden centradas de verdad
   aunque las ciudades ocupen una esquina. Las ciudades van en la
   tercera, a la derecha; la primera queda vacia haciendo contrapeso. */
.barra .medida{ display:grid; grid-template-columns:1fr auto 1fr;
                align-items:center; min-height:52px; gap:1rem }
.barra-ciudades{ display:inline-flex; align-items:center; gap:.85rem;
                 justify-content:flex-end; justify-self:end;
                 font-size:var(--t-sm) }
.barra-ciudades a{ color:rgba(255,255,255,.88); text-decoration:none; font-weight:500 }
.barra-ciudades a:hover{ color:#fff }
.barra-sep{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.35) }
.barra-urgencias{ display:flex; align-items:center; justify-content:center;
                  gap:.7rem; padding:.4rem 0;
                  text-decoration:none; color:var(--papel);
                  font-size:var(--t-sm); letter-spacing:.01em; text-align:center }
.barra-urgencias svg{ width:17px; height:17px; fill:var(--resalta); flex:none }
.barra-urgencias b{ font-weight:600 }
.barra-urgencias strong{ font-weight:600; color:var(--resalta);
                         letter-spacing:.02em;
                         white-space:nowrap }
.barra-urgencias:hover strong{ color:var(--papel) }

/* ------------------------------------------------------- cabecera */
.cabecera{
  position:sticky; top:0; z-index:50; background:var(--papel);
  border-bottom:1px solid var(--borde);
}
/* El hueco entre el logotipo y el menú. Es lo único que separa la marca
   del primer enlace, así que va holgado: pegados, el menú parece parte
   del logotipo. */
.cabecera .medida{ display:flex; align-items:center; gap:4rem; min-height:96px }

/* Marca provisional puesta en texto. Se sustituye por el SVG en
   cuanto esté; el hueco que ocupa ya es el correcto. */
/* El logotipo de verdad, en PNG con el fondo quitado. La bajada
   —IMPLANTOLOGIA AVANZADA— va dentro de la imagen, centrada bajo la
   palabra entera, que es donde la puso quien lo diseno. Antes estaba
   escrita en texto y colgaba de la izquierda, que no es su sitio. */
.marca{ display:block; flex-shrink:0; line-height:0 }
.marca img{ display:block; width:150px; height:auto }

/* Hueco holgado entre entradas: el menu va pegado a la derecha, asi que
   cuanto mas separadas van las entradas mas hacia la izquierda arranca y
   menos desequilibrada queda la cabecera. El techo son 4.2rem: por
   encima, el menu toca el logotipo a 1421px. */
.nav{ margin-left:auto; display:flex; align-items:center; gap:3rem }
/* El hueco va holgado en todo el tramo de escritorio. Hubo una franja
   apretada para que cupieran seis rotulos mas el boton; al quitar
   «Casos» sobran 132 px y ya no hace falta: comprobado a 1221, 1360 y
   1420 px. */
.nav a{ color:var(--texto); text-decoration:none; font-size:.9375rem;
        font-weight:500; letter-spacing:.005em; white-space:nowrap;
        padding:.35rem 0; border-bottom:1.5px solid transparent }
.nav a:hover{ color:var(--grafito); border-bottom-color:var(--titanio) }

/* Desplegable de «Clínicas». El padre es un botón y no un enlace: no
   lleva a ninguna página, solo abre la lista. */
.nav-grupo{ position:relative }
/* line-height heredado: un <button> no la hereda por defecto y el
   rótulo quedaba dos píxeles más arriba que los enlaces de al lado. */
.nav-padre{ display:inline-flex; align-items:center; gap:.3rem;
            background:none; border:0; cursor:pointer; padding:.35rem 0;
            border-bottom:1.5px solid transparent;
            font-family:var(--sans); font-size:.9375rem; font-weight:500;
            line-height:inherit;
            letter-spacing:.005em; color:var(--texto); white-space:nowrap }
.nav-padre svg{ width:14px; height:14px; fill:none; stroke:currentColor;
                stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
                transition:transform .16s }
.nav-grupo:hover .nav-padre,
.nav-padre[aria-expanded="true"]{ color:var(--grafito);
                                  border-bottom-color:var(--titanio) }
.nav-padre[aria-expanded="true"] svg{ transform:rotate(180deg) }
/* Cuando la página abierta es una de las hijas, el padre queda marcado
   igual que un enlace activo. */
.nav-grupo[data-aqui] .nav-padre{ color:var(--grafito);
                                  border-bottom-color:var(--grafito) }

.nav-hijos{ position:absolute; top:100%; left:-1rem; z-index:70;
            list-style:none; margin:0; padding:.5rem 0;
            min-width:11rem;
            background:var(--papel); border:1px solid var(--borde);
            border-radius:var(--radio); box-shadow:0 10px 28px rgba(17,17,17,.12);
            opacity:0; visibility:hidden; transform:translateY(-4px);
            transition:opacity .14s, transform .14s, visibility .14s }
.nav-grupo:hover .nav-hijos,
.nav-grupo:focus-within .nav-hijos,
.nav-padre[aria-expanded="true"] + .nav-hijos{
  opacity:1; visibility:visible; transform:none }

/* ---------- panel del grupo de implantes ----------
   Cuatro situaciones numeradas a dos columnas, una linea de salida para
   quien no se reconoce en ninguna, y abajo la tecnica de la casa en una
   franja aparte. El subperiostico NO es una quinta situacion: la franja
   es lo que lo dice sin tener que explicarlo. */
.nav-panel{ width:max-content;
            max-width:min(52rem, calc(100vw - 2.5rem));
            padding:1.4rem 1.75rem 1.45rem;
            border-top:2px solid var(--resalta) }
.nav-panel-rotulo{ margin:0 0 .6rem; font-family:var(--sans);
                   font-size:var(--t-rotulo); font-weight:600;
                   letter-spacing:.18em; text-transform:uppercase;
                   color:var(--texto-tenue) }
.nav-panel-lista{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
                  gap:0 2.5rem; list-style:none; margin:0; padding:0 }
.nav-panel-lista li{ border-top:1px solid var(--borde) }
.nav-panel-lista li:nth-child(-n+2){ border-top:0 }
/* Rejilla de tres columnas: el numero, el texto y nada mas. La flecha se
   fue con los numeros: dos senales para lo mismo era ruido. */
.nav-panel-lista a{ display:grid; grid-template-columns:auto 1fr;
                    align-items:start; column-gap:1.1rem;
                    padding:.95rem 0; border-bottom:0; border-radius:0;
                    white-space:normal; color:var(--texto);
                    transition:color .16s ease }
.nav-panel-lista .num{ grid-column:1; grid-row:1 / span 2; align-self:start;
                       font-family:var(--serif); font-weight:300;
                       font-size:1.0625rem; line-height:1.5;
                       color:var(--texto-tenue);
                       font-variant-numeric:lining-nums }
.nav-panel-lista .tit{ display:block; grid-column:2; font-family:var(--sans);
                       font-weight:500; font-size:.9375rem;
                       line-height:1.4; letter-spacing:0;
                       color:var(--grafito) }
.nav-panel-lista .des{ display:block; grid-column:2; margin-top:.2rem;
                       font-size:.875rem; line-height:1.5;
                       color:var(--texto-tenue) }
.nav-tecnica .nav-panel-rotulo{ color:var(--resalta-texto) }
.nav-panel-lista li:nth-child(2) .des{ margin-top:1.35rem }
.nav-panel-lista a:hover .tit{ color:var(--resalta-texto) }
.nav-panel-lista a:hover{ border-bottom:0 }
.nav-panel-lista a[aria-current="page"] .tit{ color:var(--resalta-texto) }


/* La tecnica, colgando de su situacion. Un filete dorado a la izquierda
   y sangrada hasta la columna del texto: se lee como una salida de «no
   tengo hueso», no como una quinta situacion. */
.nav a.nav-tecnica{ display:block; margin:.7rem 0 1rem 2.4rem;
                    padding:.1rem 0 .1rem .9rem;
                    border-left:2px solid var(--resalta);
                    border-bottom:0 }
.nav-tecnica .nav-panel-rotulo{ display:block; margin:0 0 .15rem;
                                font-size:.6875rem; letter-spacing:.14em }
.nav-tecnica .tec-titulo{ display:block; font-family:var(--serif);
                          font-weight:370; font-size:1.25rem; line-height:1.2;
                          letter-spacing:-.012em; color:var(--grafito) }
.nav-tecnica .tec-titulo em{ font-style:italic; color:var(--resalta-texto) }
.nav a.nav-tecnica:hover .tec-titulo{ color:var(--resalta-texto) }
.nav a.nav-tecnica:hover{ border-left-color:var(--resalta-texto) }
.nav-hijos a{ display:block; padding:.5rem 1rem; border-bottom:0 }
.nav-hijos a:hover{ background:var(--hueso); border-bottom:0 }
.nav a[aria-current="page"]{ color:var(--grafito); border-bottom-color:var(--grafito) }
.nav a.boton{ color:var(--papel); border-bottom:1px solid var(--grafito) }
.nav a.boton:hover{ color:var(--grafito); border-bottom-color:var(--grafito) }
/* El botón se sale de la columna y se acerca al borde de la ventana,
   dejando 1.25rem de aire. Se calcula desde el hueco que queda entre
   la columna y el borde, así que se adapta a cualquier ancho y nunca
   desborda, ni con barra de desplazamiento visible. */
.nav a.boton-cita{ font-size:.92rem; letter-spacing:.07em; padding:1.15rem 2.05rem;
                   /* Poco aire aquí a propósito: todo lo que se le quita
                      a este hueco se lo lleva el de la izquierda, que es
                      el que separa el menú del logotipo. */
                   margin-left:.4rem;
                   margin-right:calc(-1 * max(0px,
                     (100vw - min(100vw - 2.5rem, 1180px)) / 4)) }

.boton{
  display:inline-block; background:var(--grafito); color:var(--papel);
  text-decoration:none; font-size:var(--t-xs); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.85rem 1.5rem; border-radius:var(--radio);
  border:1px solid var(--grafito); transition:background .16s, color .16s;
}
.boton:hover{ background:transparent; color:var(--grafito) }
.boton-claro{ background:var(--papel); color:var(--grafito); border-color:var(--papel) }
.boton-claro:hover{ background:transparent; color:var(--papel) }
.boton-linea{ background:transparent; color:var(--grafito) }
.boton-linea:hover{ background:var(--grafito); color:var(--papel) }

.abrir-menu{ display:none; margin-left:auto; background:none; border:0;
             color:var(--grafito); cursor:pointer; padding:.5rem 0; line-height:0 }
.abrir-menu svg{ width:26px; height:26px; fill:none; stroke:currentColor;
                 stroke-width:1.8; stroke-linecap:round }

/* ----------------------------------------------------------- hero
   Una sola columna: el titular arriba y la foto del equipo debajo, a
   todo el ancho. La foto es apaisada y en una columna lateral quedaba
   de 268px de alto. */
/* Arriba poco y abajo mucho: el primer bloque tiene que verse entero y
   limpio antes de que asome nada. La banda de cifras pegada al borde de
   la pantalla, cortada por la mitad, ensucia justo lo primero que ve
   quien llega. */
.hero{ background:var(--papel); padding:clamp(3rem,5.2vw,4.75rem) 0 clamp(3.5rem,9vw,9rem) }
.hero:has(.hero-rejilla){ padding-top:clamp(2.25rem,3.9vw,3.5rem);
                          padding-bottom:clamp(2.5rem,4vw,3.75rem) }
.hero-texto{ max-width:34rem }
/* El titular grande de la portada ya no es el h1: el h1 es el rótulo de
   arriba, que es el que lleva el término por el que compite la página.
   Esta clase conserva exactamente el mismo aspecto que tenía el h1.
   .hero h1 se mantiene para las páginas de servicio, donde el titular
   grande sí es el encabezado. */
.hero h1:not(.rotulo),
.hero-titular{ font-family:var(--serif); font-weight:300; letter-spacing:-0.015em;
               font-size:var(--tam-hero); line-height:1.06; color:var(--grafito);
               margin:0 }
/* El de la portada va un punto por debajo del de las páginas de
   servicio: su columna es más estrecha porque la foto se lleva el resto.
   Va con `.hero h1` delante para ganarle a la regla de arriba, que es
   más específica por el :not(). */
/* El tamaño lo manda la parte resaltada, que no se puede partir en dos
   líneas sin dibujar dos franjas. Con «te ayudamos» (11 caracteres,
   307px) cabe de sobra a tamaño completo; con «nosotros te ayudamos»
   (20 caracteres, 563px) no cabía en los 458 de columna y obligaba a
   bajar el titular a 46px. */
.hero-titular{ font-size:clamp(2.25rem, 4.65vw, 4.25rem) }
/* Cuando el h1 es el rótulo manda la clase .rotulo. Lo único que hay que
   devolverle es la sans: .rotulo no declara familia y la hereda del
   body, pero un h1 la trae serif de la regla de encabezados.
   Mismo tratamiento que el rótulo de las páginas de servicio, versales
   muy espaciadas: es el device que hereda del logotipo. */
.hero h1.rotulo{ font-family:var(--sans); font-style:normal;
                 font-weight:500; font-size:var(--t-rotulo);
                 letter-spacing:.22em; text-transform:uppercase;
                 line-height:1.35; margin-bottom:clamp(1.4rem,4.2vh,2.6rem) }

/* Nombre en cursiva bajo el rótulo, como la firma del titular. */
.hero-firma{ font-family:var(--serif); font-style:italic; font-weight:300;
             font-size:var(--s-sm); color:var(--titanio);
             margin:-.5rem 0 .95rem }
.hero-lema{ font-family:var(--serif); font-style:italic; font-weight:300;
            font-size:var(--tam-lead); line-height:1.4; color:var(--titanio);
            margin:1.1rem 0 0 }
.hero-cuerpo{ margin-top:1.6rem; font-size:var(--t-md); color:var(--texto) }
.hero-acciones{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:2rem }


/* Hero centrado de las páginas de servicio. En la web de Martha el
   inicio lleva foto al lado y las de servicio van centradas; aquí
   igual. */
.hero-centrado{ text-align:center; padding:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,5vw,4.5rem) }
.hero-centrado .rotulo{ margin-bottom:1.5rem }
/* 26ch y no 18: con 18 los titulares de las paginas de servicio se
   partian en tres renglones cortos en medio de una caja de 1180px y
   parecian una columna estrecha. Con 26 caben en dos y las lineas
   llegan a 676px, como las de Martha. */
.hero-centrado h1:not(.rotulo){ max-width:26ch; margin-inline:auto }
.hero-centrado .hero-cuerpo{ max-width:46ch; margin:2rem auto 0 }
.hero-centrado .hero-acciones{ justify-content:center; margin-top:2.25rem }

/* La escena: foto con filete interior y tarjeta superpuesta. */
.escena{ position:relative; margin:0; align-self:end;
         border-radius:var(--radio-md); overflow:hidden; background:var(--hueso) }
.escena img{ display:block; width:100%; height:auto; aspect-ratio:3/2;
             object-fit:cover }
/* Etiqueta flotante que dice quién sale en la foto. Va separada del
   borde, no pegada, para que se lea como una pieza sobre la imagen. */
.escena-sello{ position:absolute; left:1.1rem; bottom:1.1rem; margin:0;
               display:flex; align-items:center; gap:.6rem;
               background:var(--papel); border-radius:10px;
               padding:.7rem 1.05rem;
               box-shadow:0 2px 14px rgba(0,0,0,.16) }
.escena-sello::before{ content:""; width:7px; height:7px; border-radius:50%;
                       background:var(--grafito); flex:none }
.escena-sello p{ margin:0; font-size:var(--t-sm); font-weight:500;
                 line-height:1.2; color:var(--grafito); white-space:nowrap }

/* Ficha de datos del hero, solo en las páginas de servicio. */
/* Como el inicio de la web de Martha: las dos columnas arrancan
   arriba a la vez y la foto se estira hasta donde llegue el texto, en
   vez de imponer su propia proporción. El texto va un punto más ancho
   que la foto. */
/* Las dos columnas miden lo mismo, como en el hero de Torrefiel: la
   foto es apaisada y con 490px se quedaba pequena al lado del texto.
   577px es el tope: a partir de ahi el titular se parte en cuatro
   lineas y el hero deja de caber en la primera pantalla. */
.hero-rejilla{ display:grid;
               grid-template-columns:minmax(0,1fr) minmax(0,1fr);
               gap:clamp(1.25rem,1.9vw,1.75rem); align-items:start }
/* La foto NO se estira a la altura del texto, como sí hace la de
   Martha. La suya es cuadrada y aguanta; esta es apaisada y tiene un
   doctor pegado a cada borde, así que al estirarla se corta al
   segundo. Se queda en su proporción, alineada arriba. Para igualar
   del todo a Martha hace falta una foto vertical. */
/* La foto cierra a la misma altura que los botones y conserva su
   proporción: entera, sin recortar a nadie. Llenar también el alto
   pide un archivo de 1400x1170 con margen a los lados; con el actual,
   1200x800 y los dos doctores tocando los bordes, se comía al de la
   derecha. */
/* Colocada como en el hero de clinicadentaltorrefiel.com, medido en su
   web a 1470px: la foto arranca 63px por debajo del techo del texto y
   mide 599x412, proporción 1.455.
   Ellos llegan a ese 1.455 desde un 16:9, o sea recortando un 18% por
   los lados; nuestro archivo es 3:2 y solo pierde un 3%. */
/* Centrada respecto al bloque de texto: como el texto es más alto que
   ella, queda el mismo aire por arriba y por abajo. */
/* La imagen ocupa la altura entera de la columna de texto, como el
   retrato del inicio de Martha: arranca a la misma linea que el rotulo
   y termina a la de los botones. A 490px de ancho eso son 8:9. */
/* La foto va entera, sin recortar: manda su proporcion (1092x1440) y
   lo que se ajusta es el ancho. Estirada a la altura de la columna de
   texto ocupa unos 420px de ancho en vez de los 490 de la columna, y
   por eso la figura se pega a la derecha. */
/* Igual que el hero de Torrefiel, que usa esta misma foto: el archivo
   es 16:9 y se ensena en 16:11 con object-fit:cover, o sea que el
   navegador se come un 18% por los lados y la foto gana altura. Es lo
   que hace que se vea grande al lado del texto. */
.hero-rejilla .escena img{ aspect-ratio:16/11; object-position:center }
/* La esquina de la foto, como la de Torrefiel: 24px en vez de los 6 del
   resto de la web. Sin sombra: ellos le ponen una, pero aqui la foto se
   apoya en el papel y no hace falta despegarla. Va fuera de las medias
   queries, para que se redondee igual apilada que en dos columnas. */
.hero-rejilla .escena{ border-radius:24px }
/* Apilada en una pantalla ancha (tableta o portatil pequeno) la foto a
   todo el ancho se hacia enorme. Se le pone tope y se centra. */
@media (min-width:601px) and (max-width:1120px){
  .hero-rejilla .escena{ width:min(100%, 40rem); margin-inline:auto }
}
@media (min-width:1121px){
  /* La proporcion del hero de clinicadentaltorrefiel.com, leida en su
     hoja de estilos: `grid-template-columns:48% 52%`, `gap:3rem` y
     `align-items:center`. O sea, la columna de la foto es algo mas
     ancha que la del texto y las dos van centradas en vertical, con el
     mismo aire arriba y abajo. La foto se queda en su 16/11 —la misma
     que usan ellos con esta misma foto— y no se estira: lo que se
     ajusta al alto de la foto es el texto, no al reves. */
  .hero-rejilla{ grid-template-columns:minmax(0,48fr) minmax(0,52fr);
                 gap:3rem; align-items:center }
  /* Sin el margen de 2.5rem de antes: desplazaba la foto hacia abajo y
     dejaba 99px de hueco arriba contra 60 abajo, asi que no casaba ni
     con el rotulo ni con los botones y parecia flotar. Centrada de
     verdad, el hueco es el mismo por los dos lados. */
  .hero-rejilla .escena{ align-self:center; margin-top:2.5rem }
  .hero-rejilla .hueco{ margin-top:0 }
}

/* El texto del inicio no lleva el tope de 34rem de las páginas de
   servicio: ahí la columna es estrecha a propósito, aquí es la mitad
   del hero y con 544px se quedaba corta por mucho reparto que se le
   diera. */
.hero-rejilla .hero-texto{ max-width:42rem; align-self:center }
/* El rótulo de la portada, más presente que el de las páginas de
   servicio: allí acompaña a un hero centrado y aquí abre el bloque.
   El color ya es negro puro, así que lo único que queda es cuerpo y
   peso. */
/* Mismos valores que el «ABOGADA EN CARTAGENA» de la web de Martha:
   0.9rem, peso 700 y 0.18em de espaciado. Ella además lo pone en un
   color de marca; aquí se queda en negro de momento. */
/* En la portada el rótulo lleva filete delante y va en gris: es una
   entradilla, no un titular, y con el negro competía con la frase
   grande que tiene justo debajo. */
/* Sin filete delante: el rotulo arranca a ras con el titular, la bajada,
   las sedes y los botones, y la columna tiene un solo borde izquierdo. */
.hero-rejilla h1.rotulo{ font-size:.8125rem; font-weight:470;
                         letter-spacing:.18em; color:var(--texto-tenue);
                         margin:0 0 28px }
/* Y la bajada usa la columna entera. Su tope de 30ch venía de cuando la
   columna medía 458px; con 600 dejaba un tercio en blanco y el bloque
   seguía pareciendo estrecho. */
.hero-rejilla .hero-sub{ max-width:none }

/* El aire alrededor del titular, también de Martha: el bloque grande
   respira arriba y abajo en vez de ir pegado al rótulo y al cuerpo. */
/* Sin `text-wrap:balance`: iguala el largo de las líneas y con una
   frase de dos oraciones las reparte en tres líneas cortas, dejando
   media columna en blanco. Partiendo normal, cada línea llena el
   ancho disponible. */
/* La frase tiene 53 caracteres y ocupa tres líneas: a 1.04 se
   empastaban unas con otras. */
/* Los tres renglones del titular. 1.04 es el suelo seguro: por debajo,
   la «g» de «Implantologia» empieza a tocar la «d» de «avanzada». */
.hero-rejilla h1.hero-titular{ line-height:1.08 }
/* El titular de la portada va por encima del de las páginas de
   servicio: ahí es el único texto grande del bloque y con el tamaño
   normal se quedaba pequeño al lado de la foto. El tope lo marca
   «implantes», la palabra más larga, que a 83px ocupa 362 de los 458
   de la columna. */
/* La segunda mitad del titular en cursiva: misma familia, solo
   inclinada. No añade ningún recurso nuevo al hero y rima con la
   bajada, que también va en cursiva. */
.hero-titular em{ font-style:italic; font-weight:inherit }

/* Con el titular partido a mano en tres líneas, el tope ya no lo marca
   «Clínica de implantología» entera sino «implantología» sola, que a
   64px mide 351 de los 553 de columna. Hay margen hasta unos 100px. */

/* El cuerpo del titular es lo que decide la relacion entre los dos
   bloques. A 4vw largos ocupaba cuatro renglones y la columna de texto
   media 620px de alto contra los 405 de la foto: la foto se quedaba en
   un 65% y parecia pequena al lado. A 3.4rem el titular vuelve a tres
   renglones, el texto baja a 525 y la foto cubre el 77%, que es
   exactamente la relacion de Torrefiel (411 de foto contra 527 de
   texto). El suelo de 2.9rem empalma con los 46px que usa la version
   apilada, para que no encoja al cruzar los 1121px. */
.hero-rejilla .hero-titular{ font-size:clamp(2.9rem, 4.4vw, 3.75rem);
                             line-height:1.02;
                             font-weight:250; margin:0 }
/* En ordenador el titular arranca mas abajo que el rotulo: la columna
   tiene aire de sobra y asi no va todo pegado al borde de arriba. El
   margen colapsa con los 28px del rotulo, o sea que manda este. */
@media (min-width:1121px){
  .hero-rejilla .hero-titular{ margin-top:48px }
  /* Y los tres huecos de debajo del titular —sello, sedes y botones—
     suben juntos: a 32/28/30 los cuatro bloques se leian como uno solo.
     La columna de texto pasa de 496 a 532 de alto; la foto (405) ya era
     mas baja, asi que quien manda aqui es el texto. */
  .hero-rejilla .sello-lacre{ margin-top:44px }
  .hero-rejilla .hero-sedes{ margin-top:32px }
  /* Doble clase: la regla general de .hero-rejilla .hero-acciones
     (30px) va mas abajo en la hoja y con la misma especificidad
     ganaba a esta. */
  .hero-rejilla .hero-acciones.hero-acciones{ margin-top:30px }
}
/* La bajada del hero va en la sans, para que contraste con el titular
   en serif, y entera resaltada. */
/* Las dos ciudades, justo bajo el titular. En versales espaciadas, el
   mismo device que el rótulo y el logotipo: dice dónde está la clínica
   sin competir con el titular ni con la bajada. */
/* Las dos sedes debajo del titular: pin de línea, el nombre en
   versales y una barra fina en medio. Sin caja, porque el hero ya tiene
   el filete beige y dos recursos gráficos en un bloque tan pequeño se
   estorban. El pin importa: «Valencia» y «Gandía» a secas podrían
   leerse como cualquier cosa; con el pin se entienden como sedes. */
.hero-sedes{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
             font-family:var(--sans); font-size:.8125rem; font-weight:500;
             letter-spacing:.16em; text-transform:uppercase;
             color:var(--grafito); margin:28px 0 0 }
.sede-punto{ display:inline-flex; align-items:center; gap:.5rem }
.sede-punto svg{ width:15px; height:15px; flex:none; fill:none;
                 stroke:var(--resalta-texto); stroke-width:1.6 }
.sede-barra{ width:1px; height:16px; flex:none; background:var(--borde) }

/* Filete beige corto, como la regla dorada del inicio de Martha. Los
   18 y 10 de Torrefiel se quedaban cortos aquí: su bajada es una sans
   de 19px y la nuestra una serif cursiva de 25, que pide más aire. */
.filete{ width:52px; height:2px; border:0; background:var(--resalta);
         margin:26px 0 16px }
/* La bajada va en la sans del cuerpo, no en serif cursiva: el titular
   ya es serif y grande, y dos textos serif seguidos se leían como un
   solo bloque. El nombre del doctor en negrita es lo único que
   destaca. */
.hero-sub{ font-family:var(--sans); font-style:normal; font-weight:400;
           font-size:var(--t-md); line-height:1.7;
           color:var(--texto); margin:34px 0 0 }
.hero-sub strong{ font-weight:600; color:var(--grafito) }
.hero-sub strong{ font-weight:600; color:var(--grafito) }
/* Resaltar por color: la frase entera en cursiva y lo que importa en
   el dorado de marca. Se probaron las alternativas sin color —gris
   contra negro, recta contra cursiva, más peso, más cuerpo— y ninguna
   destacaba lo suficiente a este tamaño. */
/* La parte destacada se distingue solo por el color. */
.hero-sub .destaca{ color:var(--resalta-texto) }
.hero-rejilla .hero-cuerpo{ margin-top:clamp(1.4rem,4.9vh,2.6rem) }
.hero-rejilla .hero-acciones{ margin-top:30px }
.hero-rejilla .hero-acciones .boton{ font-size:var(--t-xs);
                                     padding:.9rem 1.6rem }
.hero-ficha{ background:var(--blanco); border:1px solid var(--borde);
             border-radius:var(--radio-md); padding:1.75rem }
.hero-ficha dl{ margin:0; display:grid; gap:1.1rem }
.hero-ficha dt{ font-size:var(--t-rotulo); font-weight:600; letter-spacing:.16em;
                text-transform:uppercase; color:var(--titanio); margin-bottom:.2rem }
.hero-ficha dd{ margin:0; font-size:var(--t-md); line-height:1.5; color:var(--texto) }

/* -------------------------------------------------------- secciones */
.seccion{ padding:clamp(3.5rem,6vw,5.75rem) 0 }
.seccion-hueso{ background:var(--hueso); border-block:1px solid var(--borde) }
/* Dos secciones lino seguidas juntaban sus filetes y dibujaban una raya
   de 2px en medio de un fondo continuo. */
.seccion-hueso + .seccion-hueso{ border-top:0 }
.seccion-cabeza{ max-width:44rem; margin-bottom:clamp(2rem,3.5vw,3rem) }
/* Un h2 dentro de una columna no tiene margen inferior propio y su
   parrafo le quedaba pegado a cero. Donde el titular ya trae su
   separacion (la seccion holgada) no se toca. */
.dividido > div > h2 + p{ margin-top:1.25rem }
.seccion-holgada .dividido > div > h2 + p{ margin-top:0 }
/* Un h2 suelto —sin la cabecera de seccion que lleva su propio margen—
   no tiene margen inferior propio, asi que el bloque que venia detras se
   le pegaba: 0px entre el titulo y la rejilla de tarjetas, entre el
   titulo y las dos columnas, o entre el titulo y su entradilla. Se
   corrige desde el elemento que sigue, y solo cuando ese elemento no
   trae ya su propia separacion. */
.medida > h2 + .entradilla{ margin-top:1.25rem }
.medida > h2 + .rejilla,
.medida > h2 + .dividido{ margin-top:clamp(2rem,3.5vw,3rem) }
/* Y el parrafo que cierra el bloque de las dos cajas enfrentadas, que
   arrancaba justo en el borde de las cajas. */
.dos-causas + p{ margin-top:2rem }
/* Y la fila de botones que cierra una seccion: hereda los 2rem del hero,
   que dentro de un bloque de contenido se quedan cortos. */
.seccion .medida > .hero-acciones{ margin-top:clamp(2.25rem,3.5vw,3rem) }
.seccion-cabeza p{ margin-top:1rem; font-size:var(--t-md); color:var(--texto) }
/* Un rotulo dentro de una cabecera de seccion sigue siendo un rotulo: la
   regla de arriba es mas especifica que `.rotulo` y le estaba imponiendo
   el cuerpo y el color del texto corrido —18px en vez de 13—. */
.seccion-cabeza p.rotulo{ margin-top:0; font-size:var(--t-rotulo);
                          color:var(--titanio) }

/* Resaltado tipo rotulador, para una palabra dentro de un titular.

   La franja se ancla ABAJO, no arriba. Anclada arriba hay que acertar
   con la distancia hasta la línea de base, y esa distancia depende de
   las métricas de cada letra: el valor que cuadraba en la serif del
   titular caía en mitad de la palabra en la sans del cuerpo y la
   dejaba tachada. Desde abajo el punto de partida es el mismo en las
   dos. */
.resaltado{ background-image:linear-gradient(var(--resalta),var(--resalta));
            background-repeat:no-repeat;
            background-size:100% .22em;
            /* La franja va POR DEBAJO de las descendentes, no a la altura
               de la linea de base: con -.08em cruzaba la «j» de «cirujano»
               y la «p» de «implantologo», y el texto se leia mal. */
            background-position:0 calc(100% + .06em);
            padding:0 .08em }
/* El titular del inicio se queda con la franja donde estaba: ahi el
   cuerpo es mucho mayor y bajarla la separaba demasiado de la palabra.
   La palabra va en el negro del resto del titular —no en oro— porque lo
   que la destaca es la franja que se dibuja debajo al entrar. */
.hero-rejilla .hero-titular .resaltado{ color:inherit }
/* La franja del titular del inicio se dibuja sola al entrar, de
   izquierda a derecha, como si alguien pasara el rotulador.

   Va atada a las clases que pone el JS del hero, no a una animación
   suelta, y ese es el punto: el estado por defecto del CSS es la
   franja ENTERA. Solo se encoge a cero cuando el JS ha marcado el
   elemento, y vuelve a crecer en cuanto lo destapa. Si el JS no corre,
   si falla, o si el navegador congela animaciones, se ve la franja
   completa. Al revés —animando de 0 a 100— un fallo la dejaría
   invisible, que es mucho peor que no tener animación.

   Se mueve `background-size`, que no toca la maquetación: la letra no
   se desplaza ni un píxel mientras la raya crece. */
.hero-rejilla .hero-titular.revelar-hero .resaltado{ background-size:0 .22em }
.hero-rejilla .hero-titular.revelar-hero.visible .resaltado{
  background-size:100% .22em;
  transition:background-size .85s cubic-bezier(.22,.61,.36,1) .45s }
/* Quien pide menos movimiento en el sistema la ve ya dibujada. */
@media (prefers-reduced-motion:reduce){
  .hero-rejilla .hero-titular.revelar-hero .resaltado{
    background-size:100% .22em; transition:none } }

/* En un titular, partido en dos líneas dibuja dos franjas y parece un
   error, así que ahí va entero o no va. En el cuerpo no: una frase
   larga resaltada sin poder partir se sale de la pantalla en móvil. */
.hero-titular .resaltado,
.hero h1 .resaltado,
h2 .resaltado{ white-space:nowrap }

/* Bloque a dos columnas: el titular a un lado y el texto al otro.
   Un párrafo suelto bajo su titular, con media página vacía al lado,
   se lee plano por mucho que el texto sea bueno. */
.dividido{ display:grid; grid-template-columns:.85fr 1.15fr;
           gap:clamp(2rem,5vw,4.5rem); align-items:start }
.dividido h2{ margin:0 }
.dividido .rotulo{ margin-bottom:1rem }
/* Mismo cuerpo que el texto corrido. Lo que la distingue es el color,
   no el tamaño: va en --grafito y el parrafo normal en --texto-tenue.
   Con un escalon por encima, la entradilla y el parrafo que suele ir
   justo debajo se leian como dos bloques distintos. Es lo que hace
   Martha, que tiene 17,9 de entradilla con 17 de cuerpo. */
.entradilla{ font-size:var(--t-md); line-height:1.7;
             color:var(--grafito) }

/* Las tres técnicas. Son respuestas alternativas a un mismo problema,
   no pasos: por eso no van numeradas. */
.respuestas{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.respuesta{ background:var(--blanco); border:1px solid var(--borde);
            border-radius:var(--radio-md); padding:1.9rem 1.7rem 1.7rem;
            display:flex; flex-direction:column; text-decoration:none;
            color:inherit; transition:border-color .16s, transform .16s }
.respuesta:hover{ border-color:var(--titanio); transform:translateY(-2px) }
/* La misma tarjeta cuando todavía no hay página a la que llevar: no es
   un enlace, así que no se levanta al pasar por encima ni promete
   «Ver más». */
.respuesta-quieta:hover{ border-color:var(--borde); transform:none }
.respuesta-quieta{ cursor:default }
.respuesta h3{ order:1; font-family:var(--serif); font-weight:300;
               font-size:var(--s-md); line-height:1.2;
               letter-spacing:-.01em; margin-bottom:.9rem }
.respuesta p{ order:3 }
/* Rótulo pequeño bajo el titular, como en la web de Martha. En la
   portada solo lo lleva el tratamiento principal; en la página pilar
   dice qué diferencia a cada técnica de las otras dos. */
.respuesta-marca{ order:2; align-self:flex-start; font-size:var(--t-rotulo); font-weight:600;
                  letter-spacing:.14em; text-transform:uppercase; color:var(--grafito);
                  background:var(--resalta); padding:.28rem .6rem; border-radius:3px;
                  margin:-.15rem 0 .95rem }
.respuesta p{ font-size:var(--t-md); line-height:1.7; color:var(--texto-tenue);
              margin:0 0 1.4rem }
.respuesta-pie{ order:4; margin-top:auto; font-size:var(--t-md); font-weight:500;
                color:var(--titanio) }

/* Los pasos sí son una secuencia real, y por eso van numerados. */
.pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem }
.paso{ padding-top:.25rem }
.paso-num{ font-family:var(--serif); font-size:var(--s-sm); color:var(--titanio);
           letter-spacing:.05em; display:block; margin-bottom:.55rem }
.paso p{ font-size:var(--t-md); line-height:1.7; color:var(--texto-tenue); margin:0 }

/* --------------------------------------------------------- banda */
.banda{ background:var(--grafito); color:rgba(255,255,255,.78);
        padding:clamp(3.5rem,6vw,5.5rem) 0 }
.banda h2{ color:var(--papel) }
.banda p{ color:rgba(255,255,255,.78) }
.banda-rejilla{ display:grid; grid-template-columns:1fr 1fr;
                gap:clamp(2rem,5vw,4rem); align-items:center }

.sedes{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:2rem }
.sede{ border:1px solid rgba(255,255,255,.16); border-radius:var(--radio-md);
       padding:1.4rem 1.5rem }
.sede h3{ color:var(--papel); font-size:var(--s-sm); margin-bottom:.6rem }
.sede p{ font-size:var(--t-md); line-height:1.7; margin:0 }
.sede a{ color:var(--titanio-claro); text-decoration:none }
.sede a:hover{ text-decoration:underline }

/* ----------------------------------------------------------- faq */
.faq{ max-width:46rem; border-top:1px solid var(--borde) }
.faq details{ border-bottom:1px solid var(--borde) }
.faq summary{ cursor:pointer; list-style:none; padding:1.35rem 2.5rem 1.35rem 0;
              position:relative; font-weight:600; font-size:var(--t-md);
              color:var(--grafito); line-height:1.3 }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; position:absolute; right:.25rem; top:1.15rem;
                     font-size:1.35rem; font-weight:300; color:var(--titanio);
                     line-height:1 }
.faq details[open] summary::after{ content:"−" }
.faq-cuerpo{ padding:0 2.5rem 1.5rem 0; color:var(--texto-tenue); font-size:var(--t-md)}

/* -------------------------------------------------------- pendiente
   Marca visible para que ningún dato sin confirmar se escape a
   producción por descuido. Se quita cuando llegue el dato. */
.pendiente{ font-family:var(--sans); background:#FFF3CD; border:1px dashed #B8892B; color:#6B4E0F;
            font-size:var(--t-xs); font-weight:600; letter-spacing:.04em;
            padding:.1rem .4rem; border-radius:2px }

/* ----------------------------------------------------------- pie */
.pie{ background:var(--grafito-hondo); color:rgba(255,255,255,.62);
      padding:clamp(3rem,5vw,4.5rem) 0 2rem; font-size:var(--t-sm) }
.pie-rejilla{ display:grid; grid-template-columns:repeat(4,1fr);
              gap:2rem; padding-bottom:2.5rem }
.pie h3{ font-family:var(--sans); font-size:var(--t-rotulo);
         font-weight:600; letter-spacing:.16em;
         text-transform:uppercase; color:var(--titanio-claro);
         margin:0 0 1.1rem }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
.pie a{ color:rgba(255,255,255,.62); text-decoration:none }
.pie a:hover{ color:#fff }
.pie-sangria{ padding-left:.9rem; position:relative }
.pie-sangria::before{ content:""; position:absolute; left:0; top:.7em;
                      width:5px; height:1px; background:var(--titanio) }
.pie-legal{ border-top:1px solid rgba(255,255,255,.12); padding-top:1.5rem;
            display:flex; justify-content:space-between; gap:1rem;
            flex-wrap:wrap; font-size:var(--t-xs); color:rgba(255,255,255,.45) }

:where(a,button,summary):focus-visible{ outline:2px solid var(--titanio);
                                        outline-offset:3px; border-radius:2px }
/* ================================================================
   Animaciones
   Solo dos: la entrada del hero al cargar y la aparición de cada
   bloque al llegar a él. Todo se cancela si el sistema pide menos
   movimiento, y sin JavaScript no se oculta nada.
   ================================================================ */
@media (prefers-reduced-motion:no-preference){
  .revelar{ opacity:0; transform:translateY(16px);
            transition:opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1);
            transition-delay:calc(var(--i,0) * 70ms) }
  .revelar.visible{ opacity:1; transform:none }

  /* El hero usa la misma mecánica de transición que el resto, no
     @keyframes: si la animación no llega a ejecutarse, la transición
     deja igualmente el estado final y nada se queda invisible. */
  .revelar-hero{ opacity:0; transform:translateY(20px);
                 transition:opacity .8s ease, transform .8s cubic-bezier(.2,.6,.2,1);
                 transition-delay:calc(var(--i,0) * 110ms) }
  .revelar-hero.visible{ opacity:1; transform:none }

  .boton,.respuesta,.entrada{ transition:background .2s, color .2s,
                                      border-color .2s, transform .2s }
  .respuesta:hover{ transform:translateY(-3px) }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  .revelar,.revelar-hero{ opacity:1; transform:none }
}


/* ================================================================
   Componentes de la portada
   ================================================================ */

/* Cifras. Solo van las confirmadas: una cifra inventada en una web
   sanitaria es justo lo que no se puede publicar. */
.cifras{ display:grid; grid-template-columns:repeat(3,1fr);
         gap:clamp(2.5rem, 5vw, 5rem); margin-top:1.75rem }
/* En la portada la banda de cifras va sola, sin titular encima, asi que
   no necesita el aire de una seccion entera: solo el de las tres cifras. */
.banda-cifras{ padding:clamp(2rem,3vw,2.5rem) 0 }
.banda-cifras .cifras{ margin-top:0 }
.cifra dt{ font-size:var(--t-rotulo); font-weight:600; letter-spacing:.16em;
           text-transform:uppercase; color:var(--titanio-claro); margin-bottom:.7rem }
.cifra dd{ margin:0 }
.cifra-dato{ font-family:var(--serif); font-weight:300; font-size:2.125rem;
             line-height:1; color:var(--papel); display:block; margin-bottom:.6rem }
/* La tercera cifra, un poco mas adentro: cerraba la fila pegada al borde
   del texto y la banda quedaba desequilibrada de un lado. */
@media (min-width:761px){
  .cifras .cifra:last-child{ padding-left:2.5rem }
}
@media (max-width:760px){
  /* Apiladas y a todo el ancho, 30px pesaban demasiado al lado del
     rotulillo y del pie. */
  .cifra-dato{ font-size:1.625rem }
}
/* Vuelve al cuerpo del texto corrido: a 15 se veia mas pequeno que el
   resto de la pagina, y entre 15 y 18 no hay escalon intermedio. */
.cifra-pie{ font-size:var(--t-md); line-height:1.7; color:rgba(255,255,255,.72) }
/* Solo la del medio, desplazada un poco a la derecha. La primera y la
   tercera se quedan donde estaban. */
.cifra:nth-child(2){ padding-left:2rem }

/* Los siete tratamientos. */
/* `grid-auto-rows:1fr` iguala el alto de TODAS las filas, no solo el de
   las tarjetas dentro de una misma fila. Sin esto, con cuatro tarjetas a
   dos columnas la primera fila crecia con su descripcion mas larga y la
   segunda quedaba mas baja. */
.rejilla{ display:grid; grid-template-columns:repeat(4,1fr);
          grid-auto-rows:1fr; gap:1.25rem }
.rejilla .respuesta-pie{ color:var(--titanio) }

/* Quién opera. */
.perfil{ display:grid; grid-template-columns:.8fr 1.2fr;
         gap:clamp(2rem,4vw,3.5rem); align-items:center }
.perfil h2{ margin-bottom:1rem }

/* Ficha de cada sede. El paciente viene a saber dos cosas: cuál le
   pilla más cerca y cuándo puede ir. Por eso el nombre de la ciudad y
   el teléfono mandan, y el resto se lee de un vistazo. */
/* La foto va a sangre por arriba, asi que el relleno se baja al cuerpo:
   una ficha con la foto metida dentro del margen parece una diapositiva. */
.sede-detalle{ background:var(--blanco); border:1px solid var(--borde);
               border-radius:var(--radio-md); padding:0; overflow:hidden;
               display:grid; align-content:start }
.sede-cuerpo{ padding:clamp(1.75rem,2.6vw,2.25rem);
              display:grid; gap:1.4rem; align-content:start }
/* aspect-ratio y no alto fijo: las dos fotos son 16:9 y asi la ficha
   reserva el hueco antes de que la imagen llegue, sin dar el salto. */
.sede-foto{ display:block; aspect-ratio:16/9; background:var(--resalta-panel) }
.sede-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.sede-detalle h3{ font-family:var(--serif); font-weight:300;
                  font-size:var(--s-lg); line-height:1.15;
                  margin:0 }
.sede-dir{ margin:0; font-size:var(--t-md); line-height:1.5; color:var(--texto) }
.sede-barrio{ display:block; font-size:var(--t-rotulo); font-weight:600; letter-spacing:.16em;
              text-transform:uppercase; color:var(--texto-tenue); margin-top:.45rem }

.sede-tel{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
           font-weight:500; font-size:var(--t-lg); line-height:1.2; color:var(--grafito) }
.sede-tel svg{ width:16px; height:16px; fill:var(--titanio); flex:none }
.sede-tel:hover{ color:var(--titanio) }

.sede-horas{ display:grid; gap:.4rem; margin:0 }
.sede-horas dt{ font-size:var(--t-rotulo); font-weight:600; letter-spacing:.16em;
                text-transform:uppercase; color:var(--texto-tenue) }
.sede-horas dd{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.25rem;
                font-size:var(--t-md); line-height:1.5; color:var(--texto) }
.sede-horas b{ font-weight:500; color:var(--texto-tenue) }

.sede-acciones{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.2rem }
.sede-acciones .boton{ font-size:var(--t-xs); padding:.8rem 1.2rem }

.sede-distancia{ grid-column:1 / -1; text-align:center; font-size:var(--t-xs);
                 color:var(--texto-tenue); margin-top:.25rem }

/* Las mismas fichas cuando la sección cae en negro. */
.banda .sede-detalle{ background:#1E1E1E; border-color:#3A3A3A }
.banda .sede-foto{ background:#1E1E1E }
.banda .sede-detalle h3,.banda .sede-tel{ color:var(--papel) }
.banda .sede-tel svg{ fill:var(--resalta) }
.banda .sede-tel:hover{ color:var(--resalta) }
.banda .sede-dir,.banda .sede-horas dd{ color:#C9C9C9 }
.banda .sede-horas dt,.banda .sede-barrio{ color:var(--resalta) }
.banda .sede-horas b{ color:#9B9B9B }
.banda .sede-distancia{ color:#9B9B9B }
.banda .sede-acciones .boton{ background:var(--papel); color:var(--grafito);
                              border-color:var(--papel) }
.banda .sede-acciones .boton:hover{ background:transparent; color:var(--papel) }
.banda .sede-acciones .boton-linea{ background:transparent; color:var(--papel);
                                    border-color:#5A5A5A }
.banda .sede-acciones .boton-linea:hover{ background:var(--papel); color:var(--grafito) }

/* Opiniones y entradas comparten caja. */
.tarjetas{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.tarjeta{ background:var(--blanco); border:1px solid var(--borde);
          border-radius:var(--radio-md); padding:1.75rem; display:flex;
          flex-direction:column; text-decoration:none; color:inherit }
a.tarjeta:hover{ border-color:var(--titanio) }
.tarjeta .estrellas{ color:var(--titanio); font-size:var(--t-xs); margin-bottom:.9rem }
.tarjeta blockquote{ margin:0 0 1.2rem; font-family:var(--serif);
                     font-weight:300; font-size:var(--s-sm); line-height:1.5;
                     color:var(--grafito) }
.tarjeta-firma{ margin-top:auto; font-size:var(--t-xs); color:var(--texto-tenue) }
.tarjeta p{ font-size:var(--t-md); line-height:1.7; color:var(--texto-tenue); margin:0 0 1.3rem }

/* Las dos clinicas van a dos columnas y no a tres. Iba como style= en el
   propio div, y un estilo en linea le gana a cualquier regla de aqui:
   en movil las fichas se quedaban a dos columnas de 150px, con la
   direccion partida en cinco lineas. */
.tarjetas-sedes{ grid-template-columns:repeat(2,1fr) }
@media (max-width:760px){
  .tarjetas-sedes{ grid-template-columns:1fr }
  /* Los dos botones, mitad y mitad. Sumaban 308px dentro de 289 y el
     segundo caia solo a una linea de por si, descolgado. */
  /* Uno debajo de otro, no en dos columnas. «Ver la clínica de implantes
     dentales en Valencia» son 48 caracteres: en media columna de un móvil
     caía en cuatro renglones y quedaba un botón tres veces más alto que
     el de al lado. A ancho completo entra en dos. */
  .sede-acciones{ display:grid; grid-template-columns:1fr; gap:.6rem }
  .sede-acciones .boton{ padding:.9rem 1rem; text-align:center;
                         line-height:1.35 }
}

@media (max-width:900px){
  .dividido,.hero-rejilla{ grid-template-columns:1fr }
  /* El bloque de casos acaba en texto y justo debajo arranca la banda de
     color del siguiente. Sin este aire el parrafo parecia pegado al
     cambio de fondo. */
  #casos{ padding-bottom:4.5rem }

  .hero-texto{ max-width:46rem }
}
@media (max-width:1120px){
  .rejilla,.tarjetas{ grid-template-columns:repeat(2,1fr) }
  /* Apilado: titular, retrato y despues el texto. La foto sola abriendo
     la seccion no dice de que va, y el h2 quedaba enterrado a media
     pantalla. El orden del documento no cambia: solo el visual.
     El bloque de texto se deshace con display:contents para que el h2
     pueda subir por encima de la foto y el resto quedarse debajo. */
  .perfil{ grid-template-columns:1fr; row-gap:0 }
  .perfil > div{ display:contents }
  .perfil h2{ order:-2; margin-bottom:1.25rem }
  .perfil > .retrato,
  .perfil > figure,
  .perfil > .hueco{ order:-1; margin-bottom:1.75rem }
}
@media (max-width:620px){
  /* Superpuesta sobre una foto estrecha taparía media imagen. */
  .escena{ overflow:visible }
  .escena-sello{ left:.75rem; bottom:.75rem; padding:.6rem .85rem }
}
@media (max-width:760px){
  .rejilla,.tarjetas,.cifras{ grid-template-columns:1fr }
  .cifra:nth-child(2){ padding-left:0 }
}


/* ================================================================
   Formas propias por bloque
   La portada repetía la misma rejilla cuatro veces y el mismo bloque
   de cuatro columnas dos veces seguidas. Cada sección tiene ahora su
   forma, para que ninguna se parezca a la de al lado.
   ================================================================ */

/* Rasgos: filas a dos columnas, el rasgo a la izquierda y su
   explicación a la derecha. Nada de tarjetas. */
.rasgos{ display:grid; gap:0 }
/* Un filete entre rasgo y rasgo. Sin el, en movil las dos columnas se
   apilan y el titulo de uno queda pegado al parrafo del anterior: no se
   ve donde acaba una cosa y empieza la siguiente. */
.rasgo + .rasgo{ border-top:1px solid var(--borde);
                 margin-top:clamp(1.5rem,3vw,2.25rem);
                 padding-top:clamp(1.5rem,3vw,2.25rem) }
.rasgo{ display:grid; grid-template-columns:.42fr 1fr; gap:clamp(1.5rem,4vw,3.5rem);
        align-items:start }
.rasgo h3{ font-family:var(--serif); font-weight:300; font-size:var(--s-md);
           line-height:1.2; margin:0 }
/* En movil, a 24px el titular de cada rasgo casi igualaba al h2 de la
   banda, que mide 30. Va detras de la regla de arriba: con la misma
   especificidad gana la ultima. */
@media (max-width:760px){
  .rasgo h3{ font-size:1.375rem; line-height:1.25 }
}
.rasgo p{ margin:0; font-size:var(--t-md); line-height:1.7; color:var(--texto-tenue) }

/* Línea de tiempo: los pasos son una secuencia, y una secuencia se
   lee mejor en vertical que en cuatro columnas. */
.linea-tiempo{ display:grid; max-width:46rem }
.hito{ position:relative; padding:0 0 2.4rem 4.25rem }
.hito:last-child{ padding-bottom:0 }
/* El hilo que va de un circulo al siguiente. Sale del borde de abajo de
   uno y muere en el borde de arriba del otro, asi que se corta solo en
   el ultimo paso. Del mismo beige que los circulos: es la misma pieza. */
.hito:not(:last-child)::before{ content:""; position:absolute;
                                left:1.375rem; transform:translateX(-50%);
                                top:2.75rem; bottom:-.1rem;
                                width:2px; background:var(--resalta) }
.hito-num{ position:absolute; left:0; top:-.35rem; width:2.75rem; height:2.75rem;
           border-radius:50%; background:var(--resalta);
           display:grid; place-items:center; font-family:var(--serif); font-weight:300;
           font-size:var(--s-sm); color:var(--grafito) }
.hito h3{ margin-bottom:.45rem }
.hito p{ margin:0; font-size:var(--t-md); line-height:1.7; color:var(--texto-tenue) }

/* Opiniones: la cita manda, sin caja. Un filete arriba y ya. */
.citas{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.75rem) }
.cita{ padding-top:.25rem }
.cita .estrellas{ display:block; color:var(--titanio); font-size:var(--t-xs); margin-bottom:.9rem }
.cita blockquote{ margin:0 0 1.1rem; font-family:var(--serif); font-weight:300;
                  font-size:var(--s-sm); line-height:1.45;
                  color:var(--grafito) }
.cita-firma{ font-size:var(--t-xs); color:var(--texto-tenue) }

/* Blog: lista, no tarjetas. Ya hay tarjetas en tratamientos y en sedes. */
.lista-entradas{ display:grid; gap:.5rem }
.entrada{ display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:center;
          padding:1.25rem 1.25rem; margin:0 -1.25rem; border-radius:var(--radio-md);
          text-decoration:none; color:inherit }
.entrada:hover{ background:var(--resalta-suave) }
/* Sin articulo detras no hay nada que pulsar: ni cursor de mano, ni
   cambio de fondo al pasar por encima, ni promesa de «Leer». */
.entrada-pendiente{ cursor:default }
.entrada-pendiente:hover{ background:none }
.entrada-pendiente:hover h3{ color:inherit }
.entrada:hover h3{ color:var(--grafito) }
.entrada h3{ font-family:var(--serif); font-weight:300;
             font-size:var(--s-md); line-height:1.2; margin:0 0 .3rem }
.entrada p{ margin:0; font-size:var(--t-md); line-height:1.7; color:var(--texto-tenue);
            max-width:46rem }
.entrada-mas{ font-size:var(--t-md); font-weight:500; color:var(--titanio); white-space:nowrap }

@media (max-width:760px){
  /* Apilados, el hueco entre titulo y parrafo tiene que ser mayor que
     el interlineado del propio parrafo o se leen como un bloque solo. */
  .rasgo{ grid-template-columns:1fr; gap:.7rem }
  /* Y el titulo del rasgo baja un escalon. En ordenador va en su propia
     columna, al lado del texto, y a 24 se lee como rotulo de fila; en
     movil queda encima del parrafo y con el mismo tratamiento del h2
     —serif, peso 300, blanco— y solo 7px menos, asi que los dos niveles
     se confundian. A 21 la escalera queda 31,2 / 21 / 17. */
  /* Mas aire entre rasgo y rasgo que entre el titulo y su parrafo: es lo
     que dice cual va con cual. */
  .rasgo + .rasgo{ margin-top:1.9rem; padding-top:1.9rem }
  /* Y la cabecera de seccion se despega del primer item. */
  .seccion-cabeza{ margin-bottom:2.6rem }
  .citas{ grid-template-columns:1fr }
  .entrada{ grid-template-columns:1fr; gap:.6rem }
  .hito{ padding-left:3.25rem }
}


/* ================================================================
   Cierre: invitación a pedir cita y formulario
   ================================================================ */
.cierre{ display:grid; grid-template-columns:1fr 1fr;
         gap:clamp(2rem,5vw,4.5rem); align-items:start }
.cierre h2{ margin-bottom:1rem }
.cierre .entradilla{ margin-bottom:1.1rem }


/* El bloque va sobre lino y el formulario en blanco: antes era blanco
   sobre blanco y solo lo separaba un filete de un pixel. La sombra es
   minima, lo que levanta la caja es el cambio de fondo. */
/* Blanco sobre blanco. Lo que lo separa de la pagina es la sombra, no
   un cambio de fondo: metido en una caja de color se comia el ancho en
   el movil y los campos quedaban en nada. */
.formulario{ background:var(--blanco); border:1px solid var(--borde);
             border-radius:var(--radio-md); padding:clamp(1.5rem,3vw,2.5rem);
             display:grid; gap:1rem;
             box-shadow:0 2px 4px rgba(17,17,17,.05), 0 20px 48px rgba(17,17,17,.11) }
.aviso-form{ margin:0; font-size:var(--t-xs); color:var(--texto-tenue) }
.campo{ display:grid; gap:.4rem }
.campo-par{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.campo label{ font-size:var(--t-xs); font-weight:600; letter-spacing:.06em;
              text-transform:uppercase; color:var(--texto-tenue) }
.formulario input[type="text"],.formulario input[type="tel"],
.formulario input[type="email"],.formulario select,.formulario textarea{
  font-family:var(--sans); font-size:var(--t-md); color:var(--texto);
  background:var(--hueso); border:1px solid var(--borde);
  border-radius:var(--radio); padding:.7rem .8rem; width:100% }
.formulario textarea{ resize:vertical; min-height:6rem }
.formulario :is(input,select,textarea):focus{ outline:2px solid var(--grafito);
                                              outline-offset:1px; border-color:transparent }
.consentimiento{ display:grid; grid-template-columns:auto 1fr; gap:.65rem;
                 align-items:start; font-size:var(--t-xs); line-height:1.5;
                 color:var(--texto-tenue) }
.consentimiento input{ margin-top:.25rem; width:1rem; height:1rem; accent-color:var(--grafito) }
.consentimiento a{ color:var(--grafito) }
.formulario .boton{ justify-self:start; margin-top:.35rem; padding:1rem 1.9rem;
                    font-size:var(--t-xs); cursor:pointer; font-family:var(--sans) }

/* El bloque de quién opera pasa a fondo negro: es el ancla de
   autoridad de la página, y rompe la carrera de blancos del medio. */
.banda .perfil h2,.banda .perfil h3{ color:var(--papel) }
.banda .hueco{ background:#1E1E1E; color:#9B9B9B }
.banda .boton-linea{ color:var(--papel); border-color:rgba(255,255,255,.45) }
.banda .boton-linea:hover{ background:var(--papel); color:var(--grafito);
                           border-color:var(--papel) }

@media (max-width:900px){
  .cierre{ grid-template-columns:1fr }
}
@media (max-width:620px){
  /* Sin marco extra alrededor: el ancho entero para los campos. */
  .formulario{ margin-inline:-.35rem; padding:1.35rem 1.15rem }
}
@media (max-width:520px){
  .campo-par{ grid-template-columns:1fr }
}


/* ================================================================
   Los mismos componentes sobre fondo negro
   Con tres fondos rotando, cualquier bloque puede caer en negro.
   Todo lo de aquí comprobado: el texto más flojo da 8.2 y el rótulo
   en beige, 13.2.
   ================================================================ */
.banda .rotulo{ color:var(--resalta) }
.banda .seccion-cabeza p,.banda .entradilla{ color:#C9C9C9 }
.banda h3{ color:var(--papel) }

.banda .rasgo p,.banda .hito p{ color:#C9C9C9 }
.banda .rasgo + .rasgo{ border-color:rgba(255,255,255,.14) }

/* Las citas en banda oscura: escritas solo para fondo claro, la cita
   salía negra sobre negro. */
.banda .cita blockquote{ color:var(--papel) }
.banda .cita .estrellas{ color:var(--resalta) }
.banda .cita-firma{ color:#C9C9C9 }

.banda .faq{ border-top-color:#3A3A3A }
.banda .faq details{ border-bottom-color:#3A3A3A }
.banda .faq summary{ color:var(--papel) }
.banda .faq summary::after{ color:var(--resalta) }
.banda .faq-cuerpo{ color:#C9C9C9 }

/* ================================================================
   Bloque de llamada a la acción
   Caja oscura embutida dentro de una sección clara, con el argumento
   a la izquierda y las vías de contacto en una ficha blanca a la
   derecha. Va dentro de la sección y no como sección aparte, para no
   romper la rotación de los tres fondos.
   ================================================================ */
/* La banda de cierre del bloque de sedes, al estilo de martha-sitio:
   titular grande y una frase a la izquierda, los botones a la derecha, y
   todo sobre fondo oscuro a sangre. Antes era una caja de dos columnas
   con una lista de tres puntos y una ficha de telefonos; se cambio por
   esto para que el cierre pese lo que tiene que pesar. */
.cta-banda-rejilla{ display:grid; grid-template-columns:minmax(0,1.15fr) auto;
                    gap:clamp(2rem,5vw,4.5rem); align-items:center }
.cta-banda-rejilla h2{ color:var(--papel); max-width:20ch }
.cta-banda-rejilla p{ margin:1.1rem 0 0; max-width:46ch }
/* Los dos botones uno al lado del otro, y apilados solo cuando no caben.
   En movil van a ancho completo, que es donde mas se pulsan. */
.cta-banda-acciones{ display:flex; flex-wrap:wrap; gap:.75rem }
.cta-banda-acciones .boton{ text-align:center; white-space:nowrap }
.cta-banda .boton{ background:var(--papel); color:var(--grafito);
                   border-color:var(--papel) }
.cta-banda .boton:hover{ background:transparent; color:var(--papel) }
.cta-banda .boton-linea{ background:transparent; color:var(--papel);
                         border-color:#5A5A5A }
.cta-banda .boton-linea:hover{ background:var(--papel); color:var(--grafito) }
@media (max-width:760px){
  .cta-banda-rejilla{ grid-template-columns:1fr }
  .cta-banda-rejilla h2{ max-width:none }
  .cta-banda-acciones{ flex-direction:column; align-items:stretch }
}

.cta-caja{ background:var(--grafito); border-radius:var(--radio-md);
           margin-top:clamp(2.5rem,4vw,3.5rem);
           padding:clamp(2rem,4vw,3.25rem);
           display:grid; grid-template-columns:1.1fr .9fr;
           gap:clamp(2rem,4vw,3.5rem); align-items:center }
.cta-caja h3{ font-family:var(--serif); font-weight:300;
              font-size:var(--s-lg); line-height:1.15;
              color:var(--papel); margin-bottom:.9rem }
.cta-texto > p{ color:#C9C9C9; margin-bottom:1.6rem }

.cta-lista{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem }
.cta-lista li{ display:grid; grid-template-columns:auto 1fr; gap:.75rem;
               align-items:start; color:#E4E4E4; font-size:var(--t-md); line-height:1.7 }
.cta-lista svg{ width:16px; height:16px; margin-top:.28rem; fill:none;
                stroke:var(--resalta); stroke-width:2.4; stroke-linecap:round;
                stroke-linejoin:round; flex:none }

.cta-ficha{ background:var(--blanco); border-radius:var(--radio-md);
            padding:clamp(1.5rem,2.5vw,2rem); display:grid; gap:.85rem }
.cta-ficha p.cta-ficha-titulo{ font-family:var(--serif); font-weight:300; font-size:var(--s-sm);
                   line-height:1.2; color:var(--grafito); margin:0 }
.cta-ficha p{ margin:0; font-size:var(--t-md); line-height:1.7; color:var(--texto-tenue) }
.cta-ficha .boton{ text-align:center; padding:1rem 1.25rem }
.cta-enlace{ font-size:var(--t-md); font-weight:500; color:var(--grafito);
             text-decoration:none; border-bottom:1px solid var(--resalta);
             justify-self:start; padding-bottom:.15rem }
.cta-enlace:hover{ border-bottom-color:var(--grafito) }

@media (max-width:900px){
  .cta-caja{ grid-template-columns:1fr }
}



/* Retrato del hero. La proporción se fija en CSS además de en el HTML
   para que no salte la maquetación mientras carga. */
.retrato{ display:block; border-radius:var(--radio-md); overflow:hidden;
          background:var(--hueso) }
.retrato img{ display:block; width:100%; height:auto; aspect-ratio:4/5;
              object-fit:cover; object-position:50% 22% }
.banda .retrato{ background:#1E1E1E }

/* ================================================================
   Prótesis del hero
   Arcada completa dibujada en SVG. El volumen sale de los degradados
   de esmalte y encía, no de contornos. La animación es un giro muy
   lento más un destello que cruza el esmalte cada pocos segundos:
   sin ella la pieza se ve igual, solo quieta.
   ================================================================ */
.protesis{ background:var(--resalta-panel); border-radius:var(--radio-md);
           padding:clamp(1.25rem,2.5vw,2rem); display:grid; align-content:center }
.protesis svg{ width:100%; height:auto; display:block }

.pr-diente{ fill:url(#pr-esmalte); stroke:#CFC4AF; stroke-width:.9;
            stroke-linejoin:round }
.pr-brillo{ fill:#FFFFFF; opacity:.42 }
.pr-encia-fondo{ fill:#A36F66 }
.pr-encia-borde{ fill:url(#pr-encia) }
.pr-suelo{ fill:url(#pr-sombra) }
.pr-destello{ fill:url(#pr-destello) }

@media (prefers-reduced-motion:no-preference){
  .pr-arcada{ animation:pr-gira 14s ease-in-out infinite;
              transform-origin:210px 130px; transform-box:view-box }
  .pr-destello{ animation:pr-destello 7s ease-in-out infinite }
}
@keyframes pr-gira{
  0%,100%{ transform:rotateY(0deg) scaleX(1) }
  50%    { transform:scaleX(.965) translateX(6px) }
}
@keyframes pr-destello{
  0%,62%  { transform:translateX(0) }
  88%,100%{ transform:translateX(760px) }
}


/* ================================================================
   Casos reales, con comparador de antes y después
   El control es un <input type="range"> invisible por encima: así
   funciona con el ratón, con el dedo y con el teclado, y lo lee un
   lector de pantalla. El tirador que se ve es decorativo.
   ================================================================ */
.casos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.caso{ margin:0; background:var(--blanco); border:1px solid var(--borde);
       border-radius:var(--radio-md); overflow:hidden }

.caso-visor{ position:relative; aspect-ratio:1/1; background:var(--hueso);
             touch-action:pan-y }
.caso-visor img{ position:absolute; inset:0; width:100%; height:100%;
                 object-fit:cover; display:block }
.caso-antes{ position:absolute; inset:0;
             clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0) }

.caso-etq{ position:absolute; top:.75rem; z-index:2;
           background:rgba(17,17,17,.78); color:var(--papel);
           font-size:var(--t-rotulo); font-weight:600; letter-spacing:.12em;
           text-transform:uppercase; padding:.3rem .55rem; border-radius:3px }
.caso-etq-antes{ left:.75rem }
.caso-etq-despues{ right:.75rem }

.caso-linea{ position:absolute; top:0; bottom:0; z-index:2; width:2px;
             background:var(--papel); left:var(--pos,50%); margin-left:-1px;
             pointer-events:none }
.caso-tirador{ position:absolute; top:50%; left:var(--pos,50%); z-index:3;
               width:38px; height:38px; margin:-19px 0 0 -19px;
               border-radius:50%; background:var(--papel);
               box-shadow:0 2px 10px rgba(0,0,0,.28);
               display:grid; place-items:center; pointer-events:none }
.caso-tirador svg{ width:17px; height:17px; fill:var(--grafito) }

.caso-mando{ position:absolute; inset:0; z-index:4; width:100%; height:100%;
             margin:0; padding:0; opacity:0; cursor:ew-resize;
             -webkit-appearance:none; appearance:none; background:transparent }
.caso-mando:focus-visible{ outline:2px solid var(--grafito); outline-offset:-4px }

.caso figcaption{ padding:1.35rem 1.4rem 1.5rem }
.caso figcaption h3{ font-family:var(--serif); font-weight:300;
                     font-size:var(--s-md); line-height:1.2; margin-bottom:.4rem }
.caso figcaption p{ margin:0; font-size:var(--t-md); line-height:1.7;
                    color:var(--texto-tenue) }

.casos-nota{ margin:clamp(1.75rem,3vw,2.5rem) 0 0; font-size:var(--t-md);
             line-height:1.7; color:var(--texto-tenue); max-width:44rem }

@media (max-width:980px){ .casos{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .casos{ grid-template-columns:1fr } }


/* Lista de chequeo: puntos con chulo, a dos columnas si caben. */
.lista-chequeo{ display:grid; grid-template-columns:repeat(2,1fr);
                gap:.75rem 1.5rem; margin-top:1.75rem }
.lista-chequeo p{ display:grid; grid-template-columns:auto 1fr; gap:.7rem;
                  align-items:start; margin:0; font-size:var(--t-md);
                  line-height:1.5; color:var(--texto) }
.lista-chequeo svg{ width:15px; height:15px; margin-top:.24rem; fill:none;
                    stroke:var(--titanio); stroke-width:2.6; stroke-linecap:round;
                    stroke-linejoin:round; flex:none }
.banda .lista-chequeo p{ color:#C9C9C9 }
.banda .lista-chequeo svg{ stroke:var(--resalta) }

/* La rejilla de la página pilar son tres, no cuatro. */
.rejilla-3{ grid-template-columns:repeat(3,1fr) }
.rejilla-2{ grid-template-columns:repeat(2,1fr) }

@media (max-width:760px){ .lista-chequeo{ grid-template-columns:1fr } }
@media (max-width:1120px){ .rejilla-3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:760px){ .rejilla-3,.rejilla-2{ grid-template-columns:1fr } }

/* ------------------------------------------------------------ movil */
@media (max-width:1120px){
  .hero-rejilla,.banda-rejilla{ grid-template-columns:1fr }
  /* En cuanto el hero se apila, el titular deja de escalar con el ancho.
     Sin esto, entre 761 y 1120 el clamp caía a su suelo de 32px: el
     titular se veía MÁS PEQUEÑO en una tablet que en un móvil.
     Aquí van 50 y no los 36 del móvil a propósito: la columna pasa de
     365 a 560px y aguanta más cuerpo sin ganar renglones. */
  .hero-rejilla .hero-titular{ font-size:46px }
  .respuestas,.pasos{ grid-template-columns:1fr 1fr }
  .pie-rejilla{ grid-template-columns:1fr 1fr }
}
@media (max-width:1220px){
  .nav{ display:none }
  /* El cajon se desplaza si no cabe. Con el panel de implantes abierto
     mide casi 1000px, mas que cualquier pantalla de movil; sin esto, las
     ultimas entradas y el boton de cita quedaban fuera y sin manera de
     llegar a ellos. `dvh` y no `vh` porque en el movil la barra del
     navegador aparece y desaparece. */
  .nav.abierta{ display:flex; position:absolute; top:100%; left:0; right:0;
                flex-direction:column; align-items:flex-start; gap:0;
                background:var(--papel); border-bottom:1px solid var(--borde);
                padding:.5rem 1.25rem 1.25rem;
                max-height:calc(100dvh - 68px); overflow-y:auto;
                overscroll-behavior:contain;
                -webkit-overflow-scrolling:touch }
  .nav.abierta a{ width:100%; padding:.85rem 0; border-bottom:1px solid var(--borde) }
  /* En el menú de móvil no hay desplegable: no hay sitio para un nivel
     más y abrir submenús con el dedo es incómodo. Las dos clínicas van
     siempre a la vista, sangradas debajo del rótulo. */
  .nav.abierta .nav-grupo{ width:100% }
  .nav.abierta .nav-padre{ width:100%; justify-content:space-between;
                           padding:.85rem 0; border-bottom:1px solid var(--borde);
                           cursor:default; pointer-events:none }
  /* Menos el de «Clinicas», que en movil SI se pliega: con
     pointer-events:none el dedo no llegaba al boton y la lista no se
     abria nunca. El del panel de implantes se queda sin pulsar porque
     ahi el panel va siempre desplegado. */
  .nav.abierta .nav-grupo:has(ul.nav-hijos) > .nav-padre{
    pointer-events:auto; cursor:pointer }
  .nav.abierta .nav-padre svg{ display:none }
  .nav.abierta .nav-hijos{ position:static; opacity:1; visibility:visible;
                           transform:none; border:0; box-shadow:none;
                           background:none; padding:0; min-width:0 }
  /* «Clínicas» se pliega hasta que se toca. Son dos entradas de una
     palabra y sacarlas siempre a la vista alarga el menú sin aportar
     nada; el panel de implantes sí se queda abierto, porque es el
     contenido principal del menú.
     Distingo por la etiqueta: el desplegable simple es un `ul` y el
     panel de implantes es un `div`. */
  .nav.abierta .nav-grupo:has(.nav-panel) > .nav-padre{ display:none }
  .nav.abierta ul.nav-hijos{ display:none }
  .nav.abierta .nav-padre[aria-expanded="true"] + ul.nav-hijos{ display:block }
  /* La flecha solo en el grupo que se pliega. El de implantes va
     siempre abierto, asi que una flecha ahi prometeria algo que no
     hace. `:has()` distingue por la etiqueta de la lista hija. */
  .nav.abierta .nav-grupo:has(ul.nav-hijos) .nav-padre svg{
    display:block; transition:transform .16s }
  .nav.abierta .nav-hijos a{ padding-left:1rem }
  /* En el cajon de movil el panel se deshace: fuera el rotulo, las
     descripciones y el enlace de cierre, y las cuatro hijas en una
     columna. Es lo que hace martha-sitio, y por el mismo motivo: en
     vertical y a ancho completo, la descripcion convierte un menu de
     cuatro lineas en uno de ocho. */
  .nav.abierta .nav-panel{ width:auto; max-width:none; padding:0;
                           border-top:0 }
  /* En el cajon de movil el panel se deshace: una columna, sin
     descripciones —doblarian el alto del menu— y sin la linea de la
     duda, que alli ya hay un boton de cita a mano. Los rotulos se
     quedan: son lo que separa las situaciones de la tecnica. */
  .nav.abierta .nav-panel-lista > li > a .des{ display:none }
  .nav.abierta .nav-panel-lista{ display:block }
  .nav.abierta .nav-panel-lista li{ border-top:0 }
  /* El numero delante del titulo, en su propia columna: sin el, una
     situacion se lee igual que «Casos» o «Blog». La rejilla mantiene
     la segunda linea sangrada cuando el titulo dobla. */
  .nav.abierta .nav-panel-lista a{ display:grid;
                                   grid-template-columns:auto 1fr;
                                   column-gap:.6rem; align-items:baseline;
                                   padding:.7rem 0;
                                   border-bottom:1px solid var(--borde) }
  .nav.abierta .nav-panel-lista .num{ display:block; grid-column:1;
                                      grid-row:1; font-size:1rem;
                                      line-height:1.4 }
  .nav.abierta .nav-panel-lista .tit{ display:block; grid-column:2 }
  .nav.abierta .nav-panel-rotulo{ margin:.2rem 0 .3rem; padding-left:0 }
  .nav.abierta .nav-tecnica .nav-panel-rotulo{ padding-left:0; margin:0 0 .1rem }
  .nav.abierta .nav-tecnica .tec-titulo{ font-size:1.0625rem }
  .nav.abierta .nav-panel-lista{ display:block }
  .nav.abierta .nav-panel-lista li{ border-bottom:0 }
  .nav.abierta .nav-panel-lista a{ padding:.85rem 0;
                                   border-bottom:1px solid var(--borde) }
  .nav.abierta a.nav-tecnica{ display:block; width:auto;
                              margin:.55rem 0 1rem 1.75rem;
                              padding:.3rem 0 .4rem 1.25rem;
                              border-bottom:0 }
  .nav.abierta .nav-panel-lista a::after{ display:none }
  .nav.abierta .boton{ margin-top:1rem; width:100%; text-align:center; border-bottom:0 }
  /* En la mano la cabecera es mas baja y el logotipo pesa mas dentro
     de ella: baja otro escalon. */
  .marca img{ width:132px }
  .abrir-menu{ display:block }
  .cabecera .medida{ position:relative; min-height:68px }
}
@media (max-width:760px){
  .respuestas,.pasos,.sedes{ grid-template-columns:1fr }
  /* La barra de urgencias no sale en móvil: ocupaba una franja entera
     de la primera pantalla y el teléfono ya está en el menú y en el pie. */
  .barra{ display:none }
  /* Los dos botones del hero, uno debajo del otro: en 375px iban
     apretados y «Ver casos reales» se quedaba sin aire. */
  /* Como en martha-sitio: apilados y con más cuerpo, pero al ancho de su
     texto y no de borde a borde. La rejilla de una columna «max-content»
     hace que los dos midan lo que el más largo, sin fijar un ancho a
     mano que habría que revisar cada vez que cambie un texto. */
  .hero-acciones{ display:grid; grid-template-columns:max-content;
                  justify-content:start; gap:.85rem }
  .hero-acciones .boton{ font-size:1rem; letter-spacing:.02em;
                         text-transform:none; padding:.95rem 1.8rem;
                         text-align:center }
  .hero-titular{ font-size:2.95rem }
  /* 50 es el techo en movil: «casos complejos» va en nowrap y a ese
     cuerpo mide 320 de los 332 de una pantalla de 360px. Por encima se
     sale de la columna en vez de partirse. */
  .hero-rejilla .hero-titular{ font-size:42px }
  /* En movil el sobretitulo se queda en .44em: a .52 y con el titular ya
     pequeno, «Dr. Correa» competia con la frase grande. */
  .hero-rejilla h1.rotulo{ margin-bottom:44px;
                           font-size:11px; letter-spacing:.14em;
                           font-weight:540 }
  /* En móvil el aire de arriba lo fija el suelo del clamp, no el ancho
     de pantalla, así que se ajusta aquí. Apretado a propósito: cada
     píxel que se quita al bloque es un píxel más de foto en la primera
     pantalla. */
  .hero{ padding-top:46px }
  /* El rotulo de la portada baja 20px: con el bloque tan apretado
     arrancaba pegado a la cabecera. */
  .hero:has(.hero-rejilla){ padding-top:56px }
  /* En móvil el bloque respira en vez de apretarse para que la foto
     entre en la primera pantalla: se decidió que es mejor que se lea
     bien, aunque la foto quede por debajo del corte. */
  /* En movil el rotulo se queda sin sitio: 29 caracteres a 13px con
     .18em de espaciado piden 301px, y con el filete y su hueco pasan de
     los 347 de columna. Baja de cuerpo y de espaciado en vez de partirse
     en dos lineas, que con el filete al lado queda mal. */
  /* Sin el filete delante, el rotulo necesita mas aire debajo: era lo
     unico que lo separaba visualmente del titular. */
  /* Y un punto mas de peso que en ordenador: a 11px los trazos de la
     Instrument Sans se afinan y el gris se desvanece. */
  /* Los cuatro huecos del hero en movil, todos aqui para poder moverlos
     juntos. Suben respecto a la primera version: con el titular a 42px,
     26 y 24 de separacion dejaban el bloque apelmazado. */
  .hero-rejilla h1.rotulo{ margin-bottom:44px;
                           font-size:11px; letter-spacing:.14em;
                           font-weight:540 }
  .hero-rejilla .hero-sub{ margin-top:36px }
  .hero-rejilla .hero-sedes{ margin-top:58px }
  .hero-rejilla .hero-acciones{ display:flex; flex-wrap:wrap;
                                gap:.6rem; margin-top:3.4rem }
  /* Y mas aire entre el bloque de texto y la foto. */
  .hero-rejilla{ gap:2.5rem }
  /* En móvil la letra del botón sube: la regla general de la portada
     la deja en 13px y ahí, con el dedo, se queda corta. */
  .hero-rejilla .hero-acciones .boton{ font-size:14px; padding:.95rem 1.3rem }
  /* En la pagina de Valencia la foto del antes y despues va la primera:
     quien entra buscando «clinica de implantes dentales en Valencia» tiene
     que verla sin desplazarse, igual que en la portada se ve la foto del
     equipo. El orden del documento no cambia —la pregunta y el h2 siguen
     yendo delante para Google—, solo el orden visual en movil. */
  /* El h2 arriba y la foto justo debajo: en Valencia el bloque solo
     tiene esos dos y el parrafo, asi que basta con el orden natural. */
  .barra-urgencias > span{ display:block; white-space:normal }
  .barra-urgencias .barra-detalle{ display:inline }
  .barra-resenas{ margin-right:0 }
}
/* En movil el texto BAJA, no sube: en el ordenador se lee a medio metro
   y el cuerpo puede permitirse 18px; en la mano, a un palmo y en columna
   de 347px, 18 pide demasiados saltos de linea.
   Aqui NO se toca la raiz. Martha la sube de 16 a 17 en movil, y eso
   agranda de golpe todo lo que va en rem: rotulos, entradillas, huecos.
   Es lo contrario de la regla de esta web, que es que el ordenador
   siempre va por encima del movil. Se corrige lo que hay que corregir,
   uno a uno. */
@media (max-width:620px){
  /* El cuerpo baja a 16 y las superficies secundarias (pie y barra de
     urgencias) a 14: a 15 se quedaban a un pixel del cuerpo, que es
     justo lo que se lee como descuido. El h2 no hace falta tocarlo,
     su suelo ya vale 31,2. */
  /* Y --t-lg baja de 21 a 18: en una columna de 393px una entradilla de
     21 con el parrafo de 16 justo debajo son dos textos que no parecen
     del mismo bloque. Con 18 la jerarquia se mantiene y el salto no
     canta. Arrastra a --s-sm, que vale lo mismo. */
  :root{ --t-md:1.0625rem; --t-sm:1rem; --t-lg:1.125rem }  /* 17 · 16 · 18 */
}

@media (max-width:480px){
  .pie-rejilla{ grid-template-columns:1fr }
  :root{ --medida: min(100% - 1.75rem, 1180px) }
  /* El margen del contenedor baja aquí a .875rem: si la entrada sigue
     sangrando 1.25rem, se sale 6px por cada lado. */
  .entrada{ margin-inline:-.875rem; padding-inline:.875rem }
}


/* ================================================================
   Opiniones. Una lámina a la vez, con flechas y puntos. El mecanismo
   viene de martha-sitio; el color, de aquí. Sin JavaScript se ve la
   primera y las demás quedan ocultas, que sigue siendo válido.
   ================================================================ */
.carrusel{ display:grid; gap:1.8rem }
.opinion{ margin:0; background:var(--papel); border:1px solid var(--borde);
          border-radius:var(--radio-md); padding:clamp(1.6rem,3.5vw,2.75rem);
          display:grid; gap:1.3rem }
.opinion[hidden]{ display:none }
.opinion-persona{ display:flex; align-items:center; gap:1rem }
.opinion-inicial{ width:3.2rem; height:3.2rem; flex:none; border-radius:50%;
                  background:var(--grafito); color:var(--resalta);
                  font-family:var(--serif); font-size:var(--s-sm); font-weight:300;
                  display:grid; place-items:center }
.opinion-nombre{ margin:0; font-size:var(--t-lg); font-weight:500; color:var(--tinta) }
.opinion-dato{ margin:.15rem 0 0; font-size:var(--t-sm); color:var(--titanio) }
.opinion-estrellas{ margin:0; font-size:var(--t-md); letter-spacing:.26em; color:var(--grafito) }
.opinion blockquote{ margin:0; font-family:var(--serif); font-weight:300;
                     font-style:italic; font-size:var(--s-sm);
                     line-height:1.5; color:var(--tinta) }
/* Dos valores de la escala en vez de un clamp: el clamp iba pasando por
   20,4 · 21,5 · 22,8 según el ancho y nunca caía en un escalón. */
@media (min-width:1120px){ .opinion blockquote{ font-size:var(--s-md) } }

.carrusel-mando{ display:flex; align-items:center; justify-content:center; gap:1.5rem }
.carrusel-flecha{ width:2.9rem; height:2.9rem; border:1px solid var(--borde);
                  border-radius:50%; background:transparent; color:var(--tinta);
                  font-size:var(--t-lg); line-height:1; cursor:pointer;
                  display:grid; place-items:center;
                  transition:border-color .18s ease, background .18s ease }
.carrusel-flecha:hover{ border-color:var(--tinta); background:var(--papel) }
.carrusel-puntos{ display:flex; align-items:center; gap:.55rem }
.carrusel-punto{ width:.5rem; height:.5rem; padding:0; border:0; border-radius:999px;
                 background:var(--borde); cursor:pointer;
                 transition:width .25s ease, background .25s ease }
.carrusel-punto[aria-current="true"]{ width:1.8rem; background:var(--tinta) }

/* Sobre banda oscura */
.banda .opinion{ background:var(--tinta-panel,rgba(255,255,255,.05)); border-color:rgba(255,255,255,.16) }
.banda .opinion-nombre,.banda .opinion blockquote{ color:var(--papel) }
.banda .opinion-dato{ color:rgba(255,255,255,.62) }
.banda .opinion-estrellas{ color:var(--resalta) }
.banda .opinion-inicial{ background:var(--resalta); color:var(--grafito) }
.banda .carrusel-flecha{ border-color:rgba(255,255,255,.28); color:var(--papel) }
.banda .carrusel-flecha:hover{ border-color:var(--resalta); background:transparent }
.banda .carrusel-punto{ background:rgba(255,255,255,.28) }
.banda .carrusel-punto[aria-current="true"]{ background:var(--resalta) }

/* ----------------------------------------------------------------
   Caso real junto al bloque de posicionamiento. Comparador a la
   izquierda, texto a la derecha. En móvil se apilan, la foto primero.
   ---------------------------------------------------------------- */
/* Tres hermanos en el orden en que hay que leerlos: titular, fotos y
   texto. Apilado en movil sale tal cual, que es lo que se pidio: el h2
   dice que se esta mirando, la imagen lo ensena y el texto lo explica.
   En ordenador la foto se lleva la columna izquierda entera y el titular
   y el texto se reparten la derecha, sin tocar el orden del documento. */
.dividido-caso{ align-items:center;
                column-gap:clamp(2rem,5vw,4.5rem); row-gap:2rem }
/* La respuesta a la pregunta del h2. Va en el cuerpo del titular grande,
   --tam-hero, que es el unico escalon claramente por encima de un h2, y
   con la franja beige sobre las dos palabras que importan. La pregunta se
   queda en el h2 porque es lo que Google lee como encabezado; el peso
   visual lo lleva la respuesta, igual que en la portada. */
/* La pregunta, en serif cursiva y grande: es lo que le han dicho al
   paciente en otra clinica, y en cursiva suena a voz ajena. Va un
   escalon por debajo de la respuesta, que es la que manda. */
.pregunta-caso{ font-family:var(--serif); font-style:normal; font-weight:300;
                /* El mismo cuerpo y la misma letra que cualquier h2 del
                   sitio. Lo que la separa de la respuesta no es el tamano
                   sino que aquella va en cursiva, y el color. */
                font-size:var(--tam-h2); line-height:1.18;
                letter-spacing:-.012em; color:var(--grafito);
                /* Aire extra debajo de la pregunta. Como el grupo va
                   centrado frente a la foto, crecer por aqui empuja la
                   pregunta hacia arriba y deja la cita donde estaba. */
                margin:0 0 1.5rem }

/* Sin marca ninguna, lo que la separa de la pregunta es el color y la
   redonda: la pregunta va gris y en cursiva, la respuesta negra y recta. */
/* Sin `text-wrap:balance`, que es lo que heredan los h2: con una frase de
   54 caracteres reparte las lineas a lo ancho y deja media columna en
   blanco. Partiendo normal, cada linea llena el ancho. */
/* La respuesta va tratada como una cita destacada: filete vertical a la
   izquierda y el texto en el dorado de marca. El dorado de LETRA es
   #8F6810, que da 5,05 sobre blanco; el beige claro solo vale de relleno.
   Un escalon por debajo de la pregunta, porque el filete y el color ya le
   dan toda la presencia que necesita. */
.contra{ font-family:var(--serif); font-style:italic; font-weight:300;
         /* Cuerpo propio de la cita: el escalon de abajo de la escala es
            24 y el salto desde 36,8 era demasiado brusco. */
         /* El suelo del clamp es lo que manda en movil: 22px se quedaba
            pequeño al lado de la pregunta. */
         font-size:clamp(1.625rem, 2.2vw, 2rem); line-height:1.35;
         letter-spacing:-.012em;
         color:var(--resalta-texto); text-wrap:initial;
         border-left:3px solid var(--resalta);
         padding-left:1.25rem; margin:0 }
.contra em{ font-style:italic; color:inherit }
/* La lista de situaciones, al lado del antes y despues. Es el reparto de
   la portada hacia las cuatro paginas de implantes: el enlace habla como
   habla el paciente y la URL lleva el termino que busca Google. Repite a
   proposito los mismos textos del menu, para que quien entra por aqui y
   quien entra por arriba lean lo mismo. */
.situaciones-pie{ font-family:var(--sans); font-size:var(--t-md);
                  color:var(--texto-tenue); margin:0 0 .9rem }
.situaciones{ list-style:none; margin:0; padding:0;
              border-top:1px solid var(--borde) }
.situaciones li{ border-bottom:1px solid var(--borde) }
.situaciones a{ display:flex; align-items:center; justify-content:space-between;
                gap:1rem; padding:.9rem 0; text-decoration:none;
                font-family:var(--sans); font-size:var(--t-md);
                font-weight:500; color:var(--grafito);
                transition:color .16s ease }
.situaciones a::after{ content:"\2192"; color:var(--resalta-texto);
                       transition:transform .16s ease }
.situaciones a:hover{ color:var(--resalta-texto) }
.situaciones a:hover::after{ transform:translateX(4px) }
/* Las dos filas de 1fr son el truco: la foto es mas alta que los tres
   textos juntos, y sin ellas ese sobrante se repartia ENTRE los textos,
   separandolos 180px. Ahora se lo comen las filas vacias de arriba y
   abajo, los textos quedan a su hueco real y el grupo sale centrado
   frente a la foto. */
@media (min-width:761px){
  /* Las dos filas vacias vuelven a pesar igual: el grupo queda centrado
     frente a la foto, y con la cita en medio es ella la que cae al centro.
     El aire entre los tres lo pone este row-gap y nada mas, para que se
     puedan mover los tres a la vez desde aqui. */
  .dividido-caso{ grid-template-rows:.6fr auto auto auto 1.4fr;
                  row-gap:2.25rem; align-items:start }
  .dividido-caso .caso{ grid-column:1; grid-row:1 / -1; align-self:stretch }
  .dividido-caso > .pregunta-caso{ grid-column:2; grid-row:2 }
  .dividido-caso > .contra{ grid-column:2; grid-row:3 }
  .dividido-caso .pila-texto{ grid-column:2; grid-row:4 }
  /* En Valencia no hay cita en medio: el parrafo ocupa la fila que
     dejaba libre, o el hueco de 36px se sumaba dos veces. */
  .casos-arriba .dividido-caso .pila-texto{ grid-row:3 }
  /* Con solo dos bloques de texto, las filas vacias de arriba y abajo
     dejaban el grupo demasiado bajo frente a la foto. La de arriba pesa
     ahora una decima parte de la de abajo. */
  .casos-arriba .dividido-caso{ grid-template-rows:.2fr auto auto auto 2.4fr }
}
@media (min-width:900px){
  .dividido-caso{ grid-template-columns:minmax(0,.92fr) minmax(0,1fr) }
}
.caso-suelto{ margin:0; background:none; border:0; border-radius:0 }
.caso-visor-alto{ aspect-ratio:3/4; border-radius:var(--radio-md); overflow:hidden }
/* Los primeros planos de boca vienen apaisados: forzarlos a cuadrado
   recortaba las comisuras. El visor toma su proporcion. */
.caso-visor-ancho{ aspect-ratio:var(--prop, 600/420) }
/* El sitio de un caso que aun no tiene fotos: ocupa lo mismo que una
   tarjeta llena para que la fila no baile cuando llegue. */
.caso-visor-hueco{ display:grid; place-items:center; text-align:center;
                   background:repeating-linear-gradient(135deg,
                     #EDE6DC 0 10px, #F5F0E9 10px 20px) }
.caso-visor picture{ position:absolute; inset:0; display:block }

/* Carrusel de casos. Las flechas van encima de la foto, centradas y
   pegadas al borde: fuera robarían sitio a la imagen, que es lo único
   que importa aquí. */
.caso-carrusel{ position:relative }
.caso-flecha{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
              width:2.75rem; height:2.75rem; border-radius:50%;
              border:0; cursor:pointer;
              background:rgba(255,255,255,.88);
              display:grid; place-items:center;
              box-shadow:0 2px 10px rgba(17,17,17,.18);
              transition:background .14s }
.caso-flecha:hover{ background:#fff }
.caso-flecha svg{ width:20px; height:20px; fill:none; stroke:var(--grafito);
                  stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.caso-flecha-izq{ left:.75rem }
.caso-flecha-der{ right:.75rem }
.caso-flecha:focus-visible{ outline:2px solid var(--grafito); outline-offset:2px }

.caso-puntos{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem }
.caso-puntos button{ width:8px; height:8px; padding:0; border-radius:50%;
                     border:1px solid var(--titanio); background:none;
                     cursor:pointer; transition:background .14s }
.caso-puntos button[aria-current="true"]{ background:var(--grafito);
                                          border-color:var(--grafito) }

@media (max-width:520px){
  /* En el móvil la foto llega casi al borde y las flechas taparían
     media cara. Se encogen y se pegan más. */
  .caso-flecha{ width:2.25rem; height:2.25rem }
  .caso-flecha-izq{ left:.4rem }
  .caso-flecha-der{ right:.4rem }
}
.pila-texto{ display:flex; flex-direction:column; gap:1.1rem }
.pila-texto h2{ margin-bottom:.4rem }
.caso-pie{ padding:1rem 0 0 }
.caso-pie p{ margin:0; font-size:var(--t-md); line-height:1.7; color:var(--titanio) }


/* ================================================================
   Asistente de cita
   La misma paleta del sitio, sin colores nuevos. El botón flotante es
   lo único que se mueve por encima de la página, así que va en negro
   sólido: si fuera beige competiría con los resaltados del texto.
   ================================================================ */
/* Solo el icono, en redondo, en todas las medidas. El texto sigue en el
   marcado porque es lo que le da nombre al boton para quien navega con
   lector de pantalla, pero no se dibuja. */
.chat-abrir{ position:fixed; right:1.75rem; bottom:2rem; z-index:60;
             /* referencia de posicion para el punto de aviso */
             display:inline-flex; align-items:center; justify-content:center;
             width:3.5rem; height:3.5rem; padding:0; border-radius:50%;
             background:var(--grafito); color:var(--papel);
             border:1px solid var(--grafito); cursor:pointer;
             font-family:var(--sans); font-size:var(--t-xs); font-weight:600;
             letter-spacing:.06em; text-transform:uppercase;
             /* Aro blanco alrededor. El botón flota sobre lo que haya
                debajo, y al pasar sobre una banda negra se fundía con
                ella: negro sobre negro no se ve. El aro lo recorta
                sobre el negro y sobre el blanco desaparece solo. */
             box-shadow:0 0 0 2px var(--papel),
                        0 8px 24px rgba(17,17,17,.32);
             transition:transform .16s }
.chat-abrir:hover{ transform:translateY(-2px) }
.chat-abrir svg{ width:22px; height:22px; fill:var(--papel); flex:none }
.chat-abrir span:not(.chat-aviso){ display:none }

/* El punto de aviso. Es el unico rojo del sitio, y esta ahi porque un
   aviso en beige o en negro no se lee como aviso: se lee como adorno.
   Un boton flotante en una esquina se ignora con facilidad y esto es lo
   que hace que se mire. */
.chat-aviso{ position:absolute; top:-5px; right:-5px;
             min-width:1.25rem; height:1.25rem; padding:0 .3rem;
             border-radius:1rem; background:#C9302C; color:#fff;
             border:2px solid var(--papel);
             font-size:.6875rem; font-weight:700; line-height:1;
             display:grid; place-items:center }
.chat-aviso[hidden]{ display:none }
/* Sin animacion de entrada. Sale pintado con la pagina, sin esperar al
   JavaScript ni a un fotograma: si la pestaña carga en segundo plano,
   una animacion se queda parada en su primer fotograma, que aqui es
   tamaño cero, y el punto no se ve hasta que alguien mira la pestaña. */

/* El cartel que se despliega solo. Vive encima del botón flotante y
   repite el saludo del asistente: quien lo lee ya no tiene que entrar
   para saber de qué va. */
.chat-avance{ position:fixed; right:1.75rem; bottom:5.5rem; z-index:59;
              width:min(20rem, calc(100vw - 2.5rem));
              background:var(--papel); border:1px solid var(--borde);
              border-radius:var(--radio-md); padding:1.5rem 1.25rem 1.25rem;
              box-shadow:0 16px 44px rgba(17,17,17,.20);
              text-align:center }
.chat-avance[hidden]{ display:none }
@media (prefers-reduced-motion:no-preference){
  .chat-avance{ animation:chat-sube .3s ease-out }
}
@keyframes chat-sube{ from{ opacity:0; transform:translateY(10px) } }

/* La cara sale montada sobre el borde de arriba, como en el original. */
.chat-cara-avance{ width:3.25rem; height:3.25rem; margin:-2.9rem auto .75rem;
                   border:3px solid var(--papel);
                   box-shadow:0 2px 8px rgba(17,17,17,.18) }
.chat-cara-avance.chat-cara-letra{ font-size:1.5rem }

.chat-avance-cerrar{ position:absolute; top:.5rem; right:.5rem;
                     width:1.75rem; height:1.75rem; border-radius:50%;
                     border:0; background:none; cursor:pointer;
                     display:grid; place-items:center }
.chat-avance-cerrar:hover{ background:var(--hueso) }
.chat-avance-cerrar svg{ width:14px; height:14px; fill:none;
                         stroke:var(--texto-tenue); stroke-width:2;
                         stroke-linecap:round }

.chat-avance-texto{ margin:0 0 .6rem; font-size:var(--t-sm); line-height:1.5;
                    color:var(--grafito) }
.chat-avance-pregunta{ margin:0 0 1rem; font-size:var(--t-sm);
                       color:var(--texto-tenue) }
.chat-avance-botones{ display:grid; gap:.5rem }
.chat-avance-botones button{ width:100%; cursor:pointer;
                             background:var(--grafito); color:var(--papel);
                             border:1px solid var(--grafito); border-radius:2rem;
                             padding:.7rem 1rem;
                             font-family:var(--sans); font-size:var(--t-sm);
                             transition:background .14s, color .14s }
.chat-avance-botones button:hover{ background:transparent; color:var(--grafito) }

@media (max-width:520px){
  .chat-avance{ right:1rem; left:1rem; bottom:5rem; width:auto }
}

.chat-panel{ position:fixed; right:1.75rem; bottom:2rem; z-index:61;
             width:min(23rem, calc(100vw - 3.5rem));
             max-height:min(38rem, calc(100vh - 4rem));
             display:flex; flex-direction:column; overflow:hidden;
             background:var(--papel); border:1px solid var(--borde);
             border-radius:var(--radio-md);
             box-shadow:0 20px 60px rgba(17,17,17,.24) }
.chat-panel[hidden]{ display:none }

.chat-cabeza{ display:flex; align-items:center;
              gap:.75rem; padding:1rem 1.15rem;
              background:var(--grafito); color:var(--papel); flex:none }
.chat-quien{ flex:1; min-width:0 }

/* La cara del asistente. Mientras no haya foto es un círculo con la
   inicial: se ve puesto a propósito y no como una imagen rota. */
.chat-cara{ width:2rem; height:2rem; border-radius:50%; flex:none;
            object-fit:cover; display:block }
.chat-cara-grande{ width:2.5rem; height:2.5rem }
.chat-cara-letra{ display:grid; place-items:center;
                  background:var(--resalta); color:var(--grafito);
                  font-family:var(--serif); font-weight:300; font-size:1.05rem;
                  line-height:1 }
.chat-cara-grande.chat-cara-letra{ font-size:1.3rem }

/* Cada mensaje del asistente va con su cara al lado. Los míos no: ya se
   sabe quién los escribe. */
.chat-fila{ display:flex; align-items:flex-end; gap:.5rem; max-width:92% }
.chat-fila .chat-burbuja{ max-width:none }
.chat-marca{ margin:0; font-size:1.05rem; font-weight:300; letter-spacing:.055em }
.chat-bajada{ margin:.2rem 0 0; font-size:.44rem; letter-spacing:.28em;
              text-transform:uppercase; color:var(--resalta) }
.chat-mandos{ display:flex; align-items:center; gap:.2rem; flex:none }
.chat-rehacer,.chat-cerrar{ background:none; border:0; cursor:pointer;
                          padding:.4rem; border-radius:50%;
                          display:grid; place-items:center;
                          transition:background .14s, opacity .14s }
.chat-rehacer:hover,.chat-cerrar:hover{ background:rgba(255,255,255,.12) }
.chat-rehacer svg,.chat-cerrar svg{ width:18px; height:18px; fill:none;
                                  stroke:var(--papel); stroke-width:1.8;
                                  stroke-linecap:round; stroke-linejoin:round }
/* El de rehacer está siempre activo: en cualquier punto tiene sentido
   volver a empezar, incluso nada más abrir. */

/* El hilo crece hacia abajo y hace su propio desplazamiento: la página
   de detrás no se mueve. */
.chat-hilo{ flex:1; overflow-y:auto; padding:1.15rem;
            display:flex; flex-direction:column; gap:.55rem;
            background:var(--hueso) }

.chat-burbuja{ margin:0; max-width:85%; align-self:flex-start;
               background:var(--papel); border:1px solid var(--borde);
               border-radius:1rem 1rem 1rem .25rem;
               padding:.7rem .9rem; font-size:var(--t-sm); line-height:1.5;
               color:var(--texto) }
.chat-mia{ align-self:flex-end; background:var(--grafito); color:var(--papel);
           border-color:var(--grafito); border-radius:1rem 1rem .25rem 1rem }
/* Enlaces dentro de una burbuja. Subrayados de verdad: dentro de un
   texto corrido, un enlace que solo cambia de color se pierde. */
.chat-burbuja a{ color:var(--grafito); font-weight:500;
                 text-decoration:underline;
                 text-decoration-color:var(--resalta);
                 text-decoration-thickness:2px;
                 text-underline-offset:2px }
.chat-burbuja a:hover{ text-decoration-color:var(--grafito) }

.chat-puntos{ display:flex; gap:.25rem; padding:.85rem .9rem }
.chat-puntos span{ width:6px; height:6px; border-radius:50%;
                   background:var(--texto-tenue); opacity:.45 }
@media (prefers-reduced-motion:no-preference){
  .chat-puntos span{ animation:chat-late 1.1s infinite }
  .chat-puntos span:nth-child(2){ animation-delay:.16s }
  .chat-puntos span:nth-child(3){ animation-delay:.32s }
}
@keyframes chat-late{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:.85 } }

.chat-pie{ flex:none; padding:.9rem 1.15rem 1.15rem;
           border-top:1px solid var(--borde); background:var(--papel) }
.chat-pie:empty{ display:none }

/* Las respuestas van alineadas a la derecha y al ancho de su texto:
   así se leen como lo que son, cosas que dice quien visita, y no como
   botones de la interfaz. */
.chat-opciones{ display:flex; flex-direction:column; align-items:flex-end;
                gap:.5rem }
.chat-opcion{ background:var(--papel); color:var(--grafito);
              border:1px solid var(--grafito); border-radius:2rem;
              padding:.6rem 1.1rem; cursor:pointer; text-align:right;
              text-decoration:none;
              font-family:var(--sans); font-size:var(--t-sm); line-height:1.35;
              transition:background .14s, color .14s }
.chat-opcion:hover{ background:var(--grafito); color:var(--papel) }

.chat-form{ display:grid; gap:.7rem }
.chat-campo{ display:grid; gap:.3rem }
.chat-campo span{ font-size:var(--t-xs); font-weight:600; letter-spacing:.06em;
                  text-transform:uppercase; color:var(--texto-tenue) }
/* El asterisco, en el gris del texto: en el beige de la marca no se
   vería sobre blanco, y aquí está para verse. */
.chat-obl{ color:var(--grafito); font-weight:600; margin-left:.15em }
.chat-consent .chat-obl{ margin-left:.1em }
.chat-campo input{ font-family:var(--sans); font-size:var(--t-md);
                   color:var(--texto); background:var(--hueso);
                   border:1px solid var(--borde); border-radius:var(--radio);
                   padding:.6rem .7rem; width:100% }
.chat-campo input:focus{ outline:2px solid var(--grafito); outline-offset:1px;
                         border-color:transparent }
.chat-consent{ display:grid; grid-template-columns:auto 1fr; gap:.55rem;
               align-items:start; font-size:var(--t-xs); line-height:1.45;
               color:var(--texto-tenue) }
.chat-consent input{ margin-top:.15rem; width:1rem; height:1rem;
                     accent-color:var(--grafito) }
.chat-consent a{ color:var(--grafito) }
.chat-form .boton{ width:100%; text-align:center; cursor:pointer;
                   font-family:var(--sans); margin-top:.2rem }

@media (max-width:520px){
  /* En el móvil el panel ocupa la pantalla: un cuadro pequeño con un
     teclado abierto encima no deja sitio para leer nada. */
  .chat-panel{ inset:0; width:100%; max-height:none; border-radius:0;
               border:0 }
  /* Solo el icono, en redondo. El texto se esconde pero el botón
     conserva su nombre por el aria-label, así que quien navega con
     lector de pantalla sigue oyendo «Pedir cita». */
  .chat-abrir{ right:1rem; bottom:1rem }

  body.chat-abierto{ overflow:hidden }
  body.chat-abierto .chat-abrir{ display:none }
}

/* ===============================================================
   PÁGINAS DE TÉCNICA
   Diseño de Claude Design para /implantes-subperiosticos/, montado
   sobre las variables de la casa. Todo cuelga de `main.tecnica`, así
   que no toca ninguna otra página. Los tamaños de letra son los de
   la escala del sitio: aquí solo se decide la composición.
   =============================================================== */

/* Mono del sistema: no se carga ninguna fuente más por tres rótulos. */
:root{ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace }

/* --- migas --- */
.migas{ background:var(--papel); padding:.9rem 0 0 }
.migas .medida{ display:flex; flex-wrap:wrap; align-items:center;
                gap:.45rem; font-family:var(--sans);
                font-size:var(--t-xs); color:var(--texto-tenue) }
.migas a{ color:var(--texto-tenue); text-decoration:none;
          border-bottom:1px solid transparent }
.migas a:hover{ color:var(--grafito); border-bottom-color:var(--titanio) }
.migas a + a::before,
.migas a + span::before{ content:"/"; margin-right:.45rem; color:var(--borde) }
.migas [aria-current]{ color:var(--grafito) }

/* --- hero --- */
.hero.hero-tecnica h1{ font-size:clamp(2rem, 3.6vw, 3.0625rem);
                       font-weight:250 }
.hero.hero-tecnica{ padding-top:clamp(2.5rem, 4.6vw, 4.75rem);
                    padding-bottom:clamp(2.5rem, 4vw, 3.25rem) }
.hero.hero-tecnica .hero-cuerpo{ max-width:55ch;
                                 margin-top:clamp(2rem, 3vw, 3.25rem) }
/* El rótulo con su punto dorado delante, como en el diseño. */
.rotulo-punto{ display:inline-flex; align-items:center; gap:.55rem }
.rotulo-punto::before{ content:""; width:8px; height:8px; border-radius:50%;
                       background:var(--resalta) }
/* Franja de hechos bajo la imagen del hero. */
/* Se reparte entre los datos que haya —tres o cuatro— en vez de fijar
   cuatro columnas y dejar un hueco vacio cuando solo hay tres. */
.datos-hero{ display:grid;
             grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
             gap:0 2rem; margin-top:3.5rem;
             border-block:1px solid var(--borde) }
.dato-hero{ display:flex; gap:.75rem; align-items:flex-start;
            padding:1.4rem 1.25rem 1.4rem 0;
            font-size:var(--t-sm); line-height:1.45 }
.marca-si{ flex:none; width:22px; height:22px; border-radius:50%;
           background:var(--resalta); color:var(--resalta-texto);
           display:flex; align-items:center; justify-content:center;
           font-size:12px }

/* --- índice --- */
.indice{ padding:0 0 3.5rem }
.indice-caja{ background:var(--hueso); padding:1.4rem 1.6rem;
              display:flex; flex-wrap:wrap; gap:.6rem .5rem; align-items:center }
.indice-caja .rotulo-mini{ margin-right:.75rem }
.indice a{ display:flex; gap:.5rem; align-items:center;
           background:var(--blanco); border:1px solid var(--borde);
           padding:.5rem .9rem; font-size:var(--t-sm);
           color:var(--texto); text-decoration:none }
.indice a:hover{ border-color:var(--grafito); color:var(--grafito) }

/* --- rótulos pequeños --- */
.num-seccion{ font-family:var(--mono); font-size:var(--t-sm);
              color:var(--resalta-texto); margin:0 0 1.25rem;
              letter-spacing:0 }
.banda .num-seccion{ color:var(--resalta) }
.rotulo-mini{ font-family:var(--sans); font-size:.6875rem; font-weight:600;
              letter-spacing:.18em; text-transform:uppercase;
              color:var(--resalta-texto) }
.marca-negra{ display:inline-block; background:var(--grafito);
              color:var(--resalta); font-family:var(--sans);
              font-size:.6875rem; font-weight:600; letter-spacing:.18em;
              text-transform:uppercase; padding:.45rem .65rem }
.num-mono{ font-family:var(--mono); font-size:var(--t-xs);
           color:var(--resalta-texto) }
.num-mono-negro{ background:var(--grafito); color:var(--papel);
                 padding:.3rem .5rem }
.num-mono-oro{ background:var(--resalta); color:var(--grafito);
               padding:.25rem .45rem }

/* --- rejillas de dos columnas --- */
.tecnica .dividido{ display:grid;
                    grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));
                    gap:clamp(2rem,3.5vw,3.5rem) }
.tecnica .dividido-pie{ align-items:end; gap:1.5rem clamp(2rem,3.5vw,3.5rem) }
.titulo-pegado{ position:sticky; top:7.5rem }
.tecnica .dividido > div:has(.titulo-pegado),
.tecnica .dividido > .faq-cabeza{ align-self:stretch }
.frase-grande{ display:block; margin-top:.6rem; font-family:var(--serif);
               font-weight:300; font-size:var(--s-lg); line-height:1.2;
               color:var(--grafito) }
/* En ordenador entra un poco en su columna: pegada al borde izquierdo
   parecia la continuacion del titular de al lado. */
@media (min-width:901px){
  .dividido-pie .frase-grande{ padding-left:3rem }
}

/* --- tarjetas numeradas --- */
.tarjetas-num{ display:grid;
               grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
               gap:1.25rem; margin-top:4rem }
.tarjeta-num{ background:var(--blanco); padding:2rem }
.tarjeta-cifra{ display:block; font-family:var(--serif); font-weight:300;
                font-size:2.75rem; line-height:1; color:var(--resalta-texto);
                margin-bottom:.85rem }
.tarjeta-num h3{ margin:0 0 .6rem }
.tarjeta-num p{ margin:0; font-size:1.0625rem; line-height:1.6;
                color:var(--texto-tenue) }
/* La variante con foto: la imagen va a sangre contra los bordes de la
   tarjeta y el texto dentro, con el filete marcando donde empieza y
   acaba cada opcion. Sin el, la foto y su pie se leian sueltos en
   medio de la pagina. */
.tarjeta-foto{ padding:0; border:1px solid var(--borde);
               border-radius:var(--radio-md); overflow:hidden }
.tarjeta-foto .foto{ border-radius:0; margin:0 }
.tarjeta-foto h3{ margin:1.25rem 1.5rem .5rem }
.tarjeta-foto p{ margin:0 1.5rem 1.5rem }
@media (max-width:760px){
  .tarjeta-foto h3{ margin-inline:1.25rem }
  .tarjeta-foto p{ margin-inline:1.25rem }
}

/* --- rejilla de casos de indicación --- */
.rejilla-casos{ display:grid;
                grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
                margin-top:3.5rem; border:1px solid var(--borde) }
.celda-caso{ display:flex; flex-direction:column; gap:.85rem;
             padding:2rem 1.75rem; background:var(--blanco);
             border-right:1px solid var(--borde) }
.celda-caso:last-child{ border-right:0 }
.celda-caso-alto{ display:flex; justify-content:space-between; align-items:center }
.marca-circulo{ width:28px; height:28px; border:1px solid var(--resalta);
                border-radius:50%; display:flex; align-items:center;
                justify-content:center; color:var(--resalta-texto);
                font-size:13px }
.celda-caso h3{ margin:0 }
.celda-caso p{ margin:0; flex:1; font-size:var(--t-sm); line-height:1.6;
               color:var(--texto-tenue) }

/* --- aviso con chapa --- */
.aviso-importante{ display:flex; flex-wrap:wrap; gap:1.25rem;
                   align-items:flex-start; margin-top:1.75rem;
                   background:var(--hueso); padding:1.5rem 1.75rem }
.aviso-importante p{ margin:0; flex:1; min-width:16rem;
                     font-size:var(--t-sm); line-height:1.6 }
.aviso-importante a{ color:var(--resalta-texto) }

/* --- flujo de la malla --- */
.flujo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
        gap:.75rem; margin-top:3rem }
.paso-flujo{ display:flex; gap:.9rem; align-items:center;
             background:var(--blanco); padding:1.25rem 1.4rem;
             font-size:var(--t-sm); font-weight:500 }

/* --- cita destacada dentro del texto --- */
.cita-bloque{ border-left:3px solid var(--grafito); padding:.4rem 0 .4rem 1.4rem;
              margin:1.75rem 0; font-family:var(--serif); font-weight:300;
              font-size:var(--s-md); line-height:1.35; color:var(--grafito) }

/* --- comparativa --- */
.tabla-marco{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.tabla-compara{ display:grid; grid-template-columns:1fr 1.3fr 1.3fr;
                min-width:32rem; font-family:var(--sans);
                font-size:1.0625rem; line-height:1.5 }
.tabla-compara > div,
.tabla-compara > .fila > div{ padding:1.1rem 1rem }
.fila-cabeza{ font-size:var(--t-xs); font-weight:600; letter-spacing:.1em;
              text-transform:uppercase; color:var(--texto-tenue);
              border-bottom:1px solid var(--grafito) }
.fila-cabeza-oscura{ background:var(--grafito); color:var(--resalta);
                     border-bottom:0 }
.fila-clave{ font-weight:500; color:var(--grafito);
             border-bottom:1px solid var(--borde) }
.fila-a{ color:var(--texto-tenue); border-bottom:1px solid var(--borde) }
.fila-b{ display:flex; gap:.6rem; background:var(--hueso);
         border-bottom:1px solid var(--borde) }
.fila-b .punto{ color:var(--resalta-texto); font-size:.6em; line-height:2 }
/* Va detrás de .fila-b a propósito: empatan en especificidad y si fuera
   antes, el lino de la columna le comería el fondo negro a la cabecera. */
.tabla-compara .fila-cabeza-oscura{ background:var(--grafito);
                                    color:var(--resalta); border-bottom:0 }
/* La fila no pinta nada en escritorio: solo agrupa para el móvil. */
.fila{ display:contents }
.resumen-negro{ background:var(--grafito); color:var(--papel); padding:1.6rem 1.75rem }
.resumen-negro .rotulo-mini{ color:var(--resalta) }
.resumen-negro p{ margin:.6rem 0 0; font-family:var(--serif); font-weight:300;
                  font-size:var(--s-sm); line-height:1.4 }

/* --- paso a paso sobre negro --- */
/* Cada paso lleva su filete arriba, asi que el hueco entre columnas es
   lo unico que los separa: a 16px los filetes casi se tocaban. */
.pasos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
        gap:1rem clamp(1.5rem,3.5vw,3.25rem); margin-top:clamp(3rem,5vw,5rem) }
.paso{ border-top:2px solid var(--resalta); padding-top:1.6rem }
.paso-alto{ display:flex; align-items:center; gap:.9rem; margin-bottom:.85rem }
.paso-num{ flex:none; width:46px; height:46px; border-radius:50%;
           background:var(--resalta); color:var(--grafito);
           display:flex; align-items:center; justify-content:center;
           font-family:var(--serif); font-size:1.25rem }
.paso h3{ margin:0; color:var(--papel) }
/* A 15px, en cuatro columnas sobre negro, el texto de cada paso se
   leia como pie de foto. Sube a 17 en ordenador; en movil, donde la
   columna es unica y ancha, se queda como estaba. */
.paso p{ margin:0; font-size:1.0625rem; line-height:1.6 }
@media (max-width:760px){
  .paso p{ font-size:var(--t-sm) }
}
.fichas-dato{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
              gap:1rem; margin-top:2.5rem }
.ficha-dato{ background:#1E1E1E; padding:1.4rem 1.5rem }
.ficha-cifra{ display:block; font-family:var(--serif); font-weight:300;
              font-size:2.5rem; line-height:1.1; color:var(--resalta) }
.ficha-pie{ display:block; margin-top:.4rem; font-size:var(--t-sm);
            line-height:1.5 }

/* --- ventajas y límites --- */
.par-cajas{ display:grid;
            grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));
            gap:1.25rem; margin-top:3rem; align-items:start }
/* En movil las dos cajas van apiladas y el salto de 48px se suma al
   aire que ya trae la tarjeta: queda un hueco en blanco antes de la
   primera foto. */
@media (max-width:760px){
  .par-cajas{ margin-top:1.75rem }
}
.caja-lista{ padding:2.25rem }
.caja-alto{ display:flex; justify-content:space-between; align-items:center;
            gap:1rem; margin-bottom:1.25rem }
.caja-alto h3{ margin:0 }
.caja-lista ul{ list-style:none; margin:0; padding:0 }
.caja-lista li{ display:flex; gap:.9rem; align-items:flex-start;
                padding:.85rem 0; border-top:1px solid var(--borde);
                font-size:var(--t-md); line-height:1.5 }
.caja-lista-si{ background:var(--blanco); border:1px solid var(--borde);
                border-top:4px solid var(--resalta-texto) }
.caja-lista-no{ background:var(--hueso); border-top:4px solid var(--grafito) }
.caja-lista-no li{ color:var(--texto-tenue) }
.caja-lista-si .marca-si{ background:none; color:var(--resalta-texto);
                          width:auto; height:auto }
.marca-no{ flex:none; color:var(--titanio); opacity:.5 }
.nota-info{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
            margin:1.75rem 0 0; padding:1.25rem 0;
            border-block:1px solid var(--borde);
            font-size:var(--t-sm); color:var(--texto-tenue) }
.marca-info{ flex:none; width:34px; height:34px; border-radius:50%;
             background:var(--grafito); color:var(--resalta);
             display:flex; align-items:center; justify-content:center;
             font-family:var(--serif); font-size:1.125rem }

/* --- historia --- */
.linea-anios{ display:grid; gap:2.75rem }
.tecnica .dividido-historia{ align-items:stretch }
.tecnica .dividido-historia .linea-anios{ align-content:space-between;
                                          gap:2.75rem }
.hito-anio{ display:grid; grid-template-columns:7rem 1fr; gap:1.5rem }
.anio{ font-family:var(--serif); font-weight:300; font-size:var(--s-sm);
       line-height:1.25; color:var(--resalta-texto);
       border-right:1px solid var(--resalta);
       padding-right:1.25rem; text-align:right }
.hito-anio p{ margin:0; font-size:var(--t-md); line-height:1.75 }
.caja-evidencia{ background:var(--blanco); padding:1.9rem; margin-top:2rem }
.caja-evidencia p{ margin:.85rem 0 0; font-size:var(--t-sm); line-height:1.65 }
.caja-evidencia blockquote{ margin:1.1rem 0 0; border-left:3px solid var(--resalta-texto);
                            padding-left:1.25rem; font-family:var(--serif);
                            font-weight:300; font-size:var(--s-md); line-height:1.35 }

/* --- precio --- */
.factores{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
           gap:.6rem; margin:1.5rem 0 }
.factor{ display:flex; flex-direction:column; gap:.5rem;
         border:1px solid var(--borde); padding:1rem;
         font-size:var(--t-sm); line-height:1.35 }
.caja-presupuesto{ display:flex; gap:1.1rem; align-items:flex-start;
                   background:var(--hueso); padding:1.5rem 1.6rem }
.caja-presupuesto p{ margin:0; font-size:var(--t-sm); line-height:1.6 }
.sello-pdf{ flex:none; width:40px; height:50px; background:var(--blanco);
            border:1px solid var(--resalta); display:flex; align-items:center;
            justify-content:center; font-family:var(--mono); font-size:10px;
            color:var(--resalta-texto) }

/* --- doctor --- */
.fichas-dr{ display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
            gap:1px; background:#333; border:1px solid #333; margin:2.25rem 0 1.5rem }
.ficha-dr{ background:var(--grafito); padding:1.1rem }
.ficha-dr .ficha-cifra{ font-size:1.75rem }
.ficha-dr .ficha-pie{ font-size:var(--t-xs); color:#a9a296 }

/* --- casos --- */
.casos-rejilla{ display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
                gap:1.25rem; margin-top:3rem }
.caso-tarjeta{ margin:0; background:var(--blanco); border:1px solid var(--borde) }
.caso-par{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2px }
.caso-par picture{ display:block; min-width:0; aspect-ratio:1/1 }
.caso-par img{ display:block; width:100%; height:100%; object-fit:cover }
.caso-etiqueta{ position:absolute; top:.6rem; left:.6rem; z-index:2;
                background:var(--grafito); color:var(--papel);
                font-family:var(--sans); font-size:var(--t-xs); font-weight:600;
                letter-spacing:.14em; text-transform:uppercase;
                padding:.3rem .5rem }
.caso-etiqueta-der{ left:auto; right:.6rem; background:var(--resalta);
                    color:var(--grafito) }
.caso-tarjeta figcaption{ padding:1.4rem 1.5rem; display:flex;
                          flex-direction:column; gap:.6rem }
.caso-tarjeta h3{ margin:0 }
.caso-tarjeta p{ margin:0; font-size:var(--t-sm); line-height:1.6;
                 color:var(--texto-tenue) }
.caso-sello{ align-self:flex-start; background:var(--hueso);
             color:var(--resalta-texto); font-family:var(--sans);
             font-size:var(--t-sm); font-weight:600; padding:.4rem .75rem }

/* --- preguntas --- */
.tecnica .dividido-faq{ grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
                        align-items:start }
.faq-cabeza{ position:sticky; top:7.5rem }
.faq-cabeza .boton{ margin-top:1.75rem }
.tecnica .faq details{ border-top:1px solid var(--borde) }
.tecnica .faq summary{ display:flex; gap:1.1rem; align-items:center;
                       padding:1.4rem .5rem }
.tecnica .faq summary .faq-texto{ flex:1; font-size:var(--t-md);
                                  font-weight:600; line-height:1.3 }
.tecnica .faq .faq-marca{ flex:none; width:30px; height:30px;
                          border:1px solid var(--grafito); border-radius:50%;
                          position:relative }
.tecnica .faq .faq-marca::before,
.tecnica .faq .faq-marca::after{ content:""; position:absolute; inset:50% 8px auto;
                                 height:1px; background:var(--grafito) }
.tecnica .faq .faq-marca::after{ transform:rotate(90deg); transition:transform .16s }
.tecnica .faq details[open] .faq-marca::after{ transform:rotate(0) }
.tecnica .faq .faq-cuerpo{ padding:0 .5rem 1.6rem 3.4rem }

/* --- huecos de imagen --- */
/* Un hueco de imagen que abre columna arranca a la altura de lo que
   tiene al lado: el margen de 2,5rem es para cuando va suelto entre dos
   bloques de texto, no para cuando es una columna. Esta regla evita
   tener que corregirlo seccion por seccion. */
.dividido > .hueco, .dividido > .foto, .dividido > .giro,
.dividido > div > .hueco:first-child, .dividido > div > .foto:first-child,
.dividido-arcadas > .hueco, .dividido-arcadas > .foto{ margin-top:0 }
/* Apilado ya no es una columna: vuelve a necesitar aire con lo de
   arriba. */
@media (max-width:760px){
  .dividido > .hueco, .dividido > .foto,
  .dividido > div > .hueco:first-child, .dividido > div > .foto:first-child,
  .dividido-arcadas > .hueco, .dividido-arcadas > .foto{ margin-top:1.75rem }
}

/* Sin la imagen que habia entre medias, el boton quedaba pegado a la
   ultima tarjeta de pasos. */
#solucion .centrado{ margin-top:3.5rem }

/* Los dos enlaces de la columna cierran el bloque: se separan del
   parrafo para que no se lean como una linea mas de el, y entre si para
   que se distingan como dos destinos y no como una lista apretada.
   Los margenes de parrafos consecutivos se funden, asi que un valor por
   debajo del que ya hay —17 px— no mueve nada: estos dos van por
   encima a proposito. */
#poco-hueso .dividido > div > p:nth-of-type(2){ margin-top:3rem }
#poco-hueso .dividido > div > p:nth-of-type(3){ margin-top:2rem }

/* La creencia que la seccion viene a desmontar. Misma voz que la cita
   dorada de la portada —cursiva con serifa y filete a la izquierda—,
   pero en el beige claro y no en el dorado oscuro: sobre banda negra
   aquel no se leeria. Arranca al margen, como el resto de la seccion.
   `.banda .` delante porque `.banda p` pinta de blanco todo el texto de
   la banda y gana por tener un elemento en el selector. */
.banda .objecion-frase{ max-width:40ch; margin:4.5rem 0 3.5rem;
                 font-family:var(--serif); font-style:italic; font-weight:300;
                 font-size:clamp(1.625rem,2.2vw,2rem); line-height:1.35;
                 letter-spacing:-.012em; color:var(--resalta);
                 border-left:3px solid var(--resalta); padding-left:1.25rem }

/* --- pagina del Dr. Correa -------------------------------------------
   La unica pagina con capitulos numerados: es un recorrido por una
   persona, no una ficha de tratamiento, y el numero ayuda a leerla como
   lo que es. El rotulo va en monoespaciada dorada sobre fondo claro y
   en beige sobre la banda negra, donde el dorado no se leeria. */
.capitulo{ margin:0 0 1rem; font-family:var(--mono); font-size:var(--t-xs);
           letter-spacing:.04em; color:var(--resalta-texto) }
.banda .capitulo{ color:var(--resalta) }

/* El hero de la persona: su retrato al lado del nombre. Es la unica
   pagina que lo lleva, porque aqui la cara es el argumento. */
/* Menos aire arriba que en el resto de heros: aqui la foto y la
   columna de texto tienen que caber enteras, con el boton dentro, en
   la primera pantalla de un portatil de 1470x707. */
/* El mismo aire que el hero de las paginas de tratamiento: 68px
   arriba y 52 abajo. Estuvo recortado a 10px mientras el hero llevaba
   el sello grande y no cabia en pantalla. */
/* El nombre arranca a la misma altura que el titular del hero de la
   portada: alli hay un rotulillo encima que lo empuja, y aqui no. */
/* ---------------------------------------------------------------
   El hero de la pagina del doctor. Dos columnas: la izquierda apila
   rotulo, nombre, lema, parrafo, la caja de certificacion y las
   acciones con 28px entre bloques; la derecha, el retrato en 4:5 con
   un marco dorado desplazado. */
/* El hero del doctor: texto a la izquierda y el retrato a sangre por
   la derecha, de alto completo. La idea es que quepa entero en la
   primera pantalla de un ordenador sin tener que bajar, que es para lo
   que se mide contra la altura de la ventana menos lo que ocupan la
   barra de urgencias y la cabecera. El tope de 780px es para que en una
   pantalla muy alta no se estire hasta parecer un cartel. */
/* El texto del hero lleva medida fija, no un porcentaje: asi la frase
   dorada parte siempre por el mismo sitio y acaba siempre a la misma
   distancia del margen, se mire en la ventana que se mire. Eso es lo
   que deja el hueco entre el texto y la foto quieto: la foto se cuelga
   del margen derecho, pero como el final de la frase tampoco se mueve,
   la distancia entre los dos es la misma en cualquier ventana. */
.hero-persona{ --alto-cabecera:150px;
               --margen-pagina:max(1.25rem, calc((100vw - 1180px) / 2));
               --ancho-texto:32rem;
               --hueco-foto:35px;
               --ancho-foto:525px;
               /* El pulso vertical del texto del hero. Se mide contra el
                  alto de la ventana porque el hero tiene que caber en la
                  primera pantalla: en una grande el texto respira y en un
                  portatil bajo se encoge solo antes que dejar el boton
                  fuera. Los margenes de cada pieza son fracciones de este
                  mismo valor, para que la escalera no se descuadre. */
               --aire-hero:clamp(1.25rem,5svh,3.5rem);
               --aire-foto:clamp(1rem,2.4svh,2rem);
               --aire-foto-arriba:clamp(1rem,2.8svh,2.5rem);
               padding:0; overflow:hidden }
.hero-persona-rejilla{ display:grid;
                       grid-template-columns:minmax(0, calc(var(--margen-pagina)
                           + var(--ancho-texto) + var(--hueco-foto)))
                         minmax(0,1fr);
                       align-items:stretch;
                       min-height:min(calc(100svh - var(--alto-cabecera)), 780px) }
/* El texto arranca en el margen de la pagina aunque su columna llegue
   hasta el borde: asi el titular se alinea con el resto de la web y la
   foto puede salir a sangre. */
/* El aire vertical se mide contra el alto de la ventana, no contra el
   ancho: en un portatil de 720px de alto el hero tiene que encogerse
   solo o el boton se queda fuera de la primera pantalla. */
.hero-persona .rotulo-hero-dr{ margin-bottom:calc(var(--aire-hero) * .35) }
.hero-persona-texto{ display:flex; flex-direction:column;
                     gap:var(--aire-hero);
                     justify-content:center;
                     padding:clamp(1.75rem,3.2svh,3.5rem) var(--hueco-foto)
                             clamp(1.75rem,3.2svh,3.5rem)
                             var(--margen-pagina) }
/* En ordenador, «Correa» baja de linea. En movil se quedan seguidos:
   ahi el nombre ya parte solo y dos lineas forzadas sobran. */
.hero-persona h1 span{ display:block }
/* El mismo rotulo en versales del hero de la portada, pero en <p>: el
   h1 de esta pagina es el nombre. */
/* El nombre y todo lo que va debajo arrancan mas abajo que el rotulo:
   el hueco uniforme de la columna los dejaba pegados a el. */
.rotulo-hero-dr{ margin:0 0 1.5rem; font-family:var(--sans); font-style:normal;
                 font-weight:470; font-size:.875rem; letter-spacing:.18em;
                 text-transform:uppercase; line-height:1.35;
                 color:var(--texto-tenue) }
/* El hueco hasta el nombre es el mismo que en la portada entre su
   rotulo y el titular: 28px en ordenador, 34 en movil. El flex de la
   columna ya pone 28, asi que en movil solo hay que anadir la
   diferencia. */
@media (max-width:1120px){
  .rotulo-hero-dr{ font-size:12px; letter-spacing:.14em; font-weight:540 }
}
/* Solo el cuerpo es propio: el peso, el interletraje y la interlinea
   son los del resto de h1 de la web, no los del mockup. */
.hero.hero-persona h1{ margin:0;
                       font-size:clamp(3.25rem,5.8vw,4.8125rem);
                       font-weight:250; line-height:1.06;
                       letter-spacing:-.015em }
.hero-persona .hero-oficio{ margin:1rem 0 0; font-family:var(--serif);
                            font-style:italic; font-weight:300;
                            font-size:clamp(1.4375rem,2.4vw,1.9rem);
                            line-height:1.3; color:var(--resalta-texto) }
/* El lema va pegado al nombre: los dos forman un bloque, y el hueco de
   28px es con lo que viene despues. */
.hero-persona h1 + .hero-oficio{ margin-top:calc(var(--aire-hero) * .1) }
.hero-persona p:not(.rotulo-hero-dr):not(.hero-oficio){ margin:0;
                            font-size:var(--t-md); line-height:1.6;
                            max-width:33rem }
/* El sello y el boton bajan respecto al lema y se separan entre si:
   con el hueco uniforme de la columna los tres se leian pegados. */
.hero-persona .sello-lacre{ margin-top:clamp(.75rem,2svh,1.5rem) }
.hero-persona .hero-acciones{ margin-top:calc(var(--aire-hero) * .35); display:flex;
                              align-items:center; gap:1.5rem; flex-wrap:wrap }

/* En ordenador el retrato se estira hasta el pie del boton: su borde
   de arriba va con el rotulo y el de abajo cierra con la columna de
   texto. La proporcion la decide la columna, asi que la imagen se
   recorta al vuelo en vez de imponer su 4:5. */

/* El retrato, con el marco dorado desplazado por detras. */
/* El retrato es un bloque aparte: guarda su proporcion 3:4 entera y
   deja aire por sus cuatro lados, sin tocar ni el borde de la pagina ni
   el pie del hero. Como el alto lo fija la ventana, es el alto el que
   manda y el ancho sale solo; va absoluto para que no sea al reves y
   acabe estirando el hero fuera de la primera pantalla. */
/* El marco es el que lleva la medida de la foto, no la <img>: dentro va
   tambien el certificado, que se cuelga de su esquina de abajo a la
   izquierda y se sale un poco por ese lado. Por eso la columna no puede
   recortar. */
.hero-persona-foto{ position:relative; overflow:visible }
.hero-persona-marco{ position:absolute; top:var(--aire-foto-arriba);
                     right:calc(var(--margen-pagina) + 2rem);
                     /* 525 de ancho es el tope; si la ventana es baja
                        manda lo que quede de alto y sale mas estrecha. */
                     height:min(calc(100% - var(--aire-foto-arriba)
                                     - var(--aire-foto)),
                                calc(var(--ancho-foto) / 5 * 6));
                     width:auto; aspect-ratio:5/6;
                     max-width:calc(100% - var(--aire-foto)) }
.hero-persona-marco picture{ display:block }
.hero-persona-marco img{ display:block; width:100%; height:100%;
                         object-fit:cover; object-position:50% 50% }
/* La tarjeta del certificado, estampada sobre el pie de la foto. Fondo
   blanco de verdad y sombra larga: es lo unico que la despega del
   retrato, que por ahi es claro. */
.hero-persona-marco .sello-lacre{ position:absolute; z-index:2;
                                  left:-2.75rem; bottom:2.25rem;
                                  margin:0; width:max-content;
                                  max-width:calc(100% + 1.25rem);
                                  padding:1rem 1.5rem 1.05rem 1.25rem;
                                  background:var(--blanco);
                                  box-shadow:0 18px 44px rgba(17,17,17,.17) }
@media (max-width:760px){
  /* Los mismos huecos que el hero de la portada en movil: 36 de aire
     arriba, 34 hasta el nombre, 36 hasta el sello, 54 hasta el boton y
     40 hasta la foto. La columna deja de repartir con gap y cada pieza
     pone su margen, que es como estan puestos alli. */
  /* En movil se apila: una sola columna, dentro del margen de la
     pagina, y la foto recupera su proporcion vertical. */
  .hero-persona{ padding-top:56px; padding-bottom:40px }
  /* Apilado, el orden es rotulo, nombre, frase, certificado, boton y la
     foto al final. En ordenador esas piezas viven en dos columnas y el
     certificado ademas va metido en el marco de la foto, asi que aqui
     las dos cajas que las agrupan se disuelven (display:contents) y cada
     pieza dice por si misma en que puesto va. Los huecos siguen siendo
     los margenes de cada una, no un gap comun. */
  .hero-persona-rejilla{ display:flex; flex-direction:column; gap:0;
                         min-height:0;
                         width:var(--medida); margin-inline:auto }
  .hero-persona-texto,
  .hero-persona-foto,
  .hero-persona-marco{ display:contents }
  .hero-persona .rotulo-hero-dr{ order:1 }
  .hero-persona h1{ order:2 }
  .hero-persona .hero-oficio{ order:3 }
  .hero-persona .sello-lacre{ order:4 }
  .hero-persona .hero-acciones{ order:5 }
  .hero-persona-marco picture{ order:6; margin-top:40px }
  .hero-persona h1 span{ display:inline }
  /* Apilada, la foto vuelve a ir en el flujo y a medir lo que mide:
     su alto sale de los atributos width/height de la etiqueta, no de un
     aspect-ratio sobre una caja vacia con la imagen absoluta dentro.
     Aquello dependia de que el movil entendiera aspect-ratio; si no, la
     caja se quedaba sin alto y la foto no se veia. */
  .hero-persona-marco img{ height:auto; border-radius:var(--radio) }
  /* Y el certificado vuelve a ser lo que es en el resto de la web: un
     sello estampado sobre el papel, sin caja. */
  .hero-persona-marco .sello-lacre{ position:static; margin-top:56px;
                                    width:auto; max-width:none; padding:0;
                                    background:none; border:0;
                                    border-radius:0; box-shadow:none }
  .hero.hero-persona h1{ font-size:42px; line-height:1.08 }
  .hero-persona-texto{ gap:0 }
  /* Con la clase sola no bastaba: la regla de ordenador va con
     .hero-persona delante y pesa mas, asi que se comia este hueco y
     dejaba el nombre pegado al rotulo. */
  .hero-persona .rotulo-hero-dr{ margin:0 0 48px }
  .hero-persona h1 + .hero-oficio{ margin-top:36px }
  .hero-persona .hero-oficio{ font-size:1.5rem }
  .hero-persona .hero-acciones{ margin-top:52px }
  .hero-persona .filete{ display:none }
}


/* La frase, sobre el pie de la foto: caja de lino con filete dorado
   arriba, como el sello del hero de Martha. En movil baja debajo del
   retrato y se queda sin caja, que sobre una foto estrecha tapaba
   media cara. */


/* Los hilos que unen los cuatro pasos del metodo. Cada paso lleva el
   suyo, que cruza el hueco hasta el paso siguiente; el ultimo se queda
   dentro de su columna. Se trazan de uno en uno cuando el bloque entra
   en pantalla, y si no hay JS estan dibujados desde el principio. */
.metodo-hilo{ position:relative; display:block; height:1px;
              margin:1.35rem 0 0; background:var(--borde);
              width:calc(100% + clamp(1.5rem,3vw,2.75rem));
              transform-origin:left center }
.metodo-paso:last-child .metodo-hilo{ width:100% }
.metodo-hilo::before{ content:""; position:absolute; left:0; top:-3px;
                      width:7px; height:7px; border-radius:50%;
                      background:var(--resalta-texto) }
.metodo-paso h3{ margin-top:1.1rem }
.traza-lista .metodo-hilo{ transform:scaleX(0);
                           transition:transform .75s cubic-bezier(.22,.61,.36,1) }
.traza-lista .metodo-hilo::before{ transform:scale(0);
                                   transition:transform .35s ease }
.traza-lista.trazado .metodo-hilo{ transform:scaleX(1) }
.traza-lista.trazado .metodo-hilo::before{ transform:scale(1) }
.traza-lista.trazado .metodo-paso:nth-child(1) .metodo-hilo{ transition-delay:.05s }
.traza-lista.trazado .metodo-paso:nth-child(2) .metodo-hilo{ transition-delay:.55s }
.traza-lista.trazado .metodo-paso:nth-child(3) .metodo-hilo{ transition-delay:1.05s }
.traza-lista.trazado .metodo-paso:nth-child(4) .metodo-hilo{ transition-delay:1.55s }
.traza-lista.trazado .metodo-paso:nth-child(1) .metodo-hilo::before{ transition-delay:0s }
.traza-lista.trazado .metodo-paso:nth-child(2) .metodo-hilo::before{ transition-delay:.5s }
.traza-lista.trazado .metodo-paso:nth-child(3) .metodo-hilo::before{ transition-delay:1s }
.traza-lista.trazado .metodo-paso:nth-child(4) .metodo-hilo::before{ transition-delay:1.5s }

/* La linea de tiempo. En ordenador las tarjetas alternan lado con un
   filete en medio y un nodo con icono sobre el; apilada en movil, con
   el filete a la izquierda. Va estatica: todo el contenido en el HTML.
   Los lugares NO van en amarillo: el relleno beige es para la etiqueta
   de categoria, y el sitio va en pastilla de contorno con su bandera,
   que es un dato, no un reclamo. */
.linea-dr{ margin-top:3.5rem; display:grid; gap:2.5rem }
.hito-dr{ display:grid; gap:1rem; position:relative }
.hito-dr-nodo{ display:grid; place-items:center; width:2.75rem; height:2.75rem;
               border-radius:12px; background:var(--grafito); color:var(--papel);
               flex:none }
.hito-dr:nth-child(even) .hito-dr-nodo{ background:var(--resalta-texto) }
.hito-dr-nodo svg{ width:1.3rem; height:1.3rem; fill:none;
                   stroke:currentColor; stroke-width:1.6;
                   stroke-linecap:round; stroke-linejoin:round }
/* El ano y su etiqueta, apilados: en una misma linea el ano grande y
   las versales pequenas se estorbaban y la fecha se leia mal. */
.hito-dr-marca{ display:flex; flex-direction:column; gap:.3rem }
.hito-dr-anos{ order:-1 }
.hito-dr-anos{ font-family:var(--serif); font-weight:300;
               font-size:clamp(1.75rem,2.6vw,2.25rem); line-height:1;
               letter-spacing:-.01em; color:var(--grafito) }
.hito-dr-etiqueta{ font-family:var(--sans); font-size:.75rem; font-weight:600;
                   letter-spacing:.14em; text-transform:uppercase;
                   color:var(--texto-tenue) }
.hito-dr-caja{ background:var(--blanco); border:1px solid var(--borde);
               border-radius:var(--radio-md); padding:1.75rem }
.hito-dr-tags{ margin:0 0 1.1rem; display:flex; gap:.45rem; flex-wrap:wrap }
.tag-dr{ font-family:var(--sans); font-size:.6875rem; font-weight:600;
         letter-spacing:.08em; text-transform:uppercase;
         background:var(--grafito); color:var(--papel);
         border:1px solid var(--grafito); border-radius:999px;
         padding:.35rem .7rem }
.hito-dr:nth-child(even) .tag-dr{ background:var(--resalta);
                                  border-color:var(--resalta);
                                  color:var(--grafito) }
/* El lugar, en pastilla de contorno: ni relleno beige ni dorado. */
.tag-dr-lugar,
.hito-dr:nth-child(even) .tag-dr-lugar{ display:inline-flex;
                                        align-items:center; gap:.35rem;
                                        background:none; color:var(--texto-tenue);
                                        border:1px solid var(--borde) }
.tag-dr-bandera{ font-size:.85rem; line-height:1; letter-spacing:0 }
.hito-dr-caja h3{ margin:0; font-family:var(--serif); font-weight:300;
                  font-size:var(--s-md); line-height:1.25 }
.hito-dr-centro{ margin:.4rem 0 0; font-size:var(--t-sm);
                 color:var(--resalta-texto) }
.hito-dr-caja p:last-child{ margin:.9rem 0 0; font-size:var(--t-sm);
                            line-height:1.7; color:var(--texto-tenue) }

@media (min-width:761px){
  /* Dos columnas con el filete en medio: la marca de anos a un lado y
     la tarjeta al otro, alternando en cada hito. El nodo va encima del
     filete, centrado en la fila. */
  .linea-dr{ gap:0; position:relative }
  .linea-dr::before{ content:""; position:absolute; top:0; bottom:0;
                     left:50%; width:1px; background:var(--borde) }
  .hito-dr{ grid-template-columns:1fr 1fr;
            column-gap:clamp(3.5rem,6vw,5rem); align-items:start;
            padding-bottom:3.5rem }
  .hito-dr:last-child{ padding-bottom:0 }
  .hito-dr-nodo{ position:absolute; left:50%; top:0;
                 transform:translateX(-50%);
                 box-shadow:0 0 0 6px var(--papel) }
  .hito-dr-marca{ grid-column:1; grid-row:1; align-items:flex-end;
                  text-align:right; padding-top:.3rem }
  .hito-dr-caja{ grid-column:2; grid-row:1 }
  /* Los pares cambian de lado, y la marca se lee en espejo: el ano
     primero cuando queda a la derecha del nodo. */
  .hito-dr:nth-child(even) .hito-dr-marca{ grid-column:2; order:2;
                                           align-items:flex-start;
                                           text-align:left }
  .hito-dr:nth-child(even) .hito-dr-caja{ grid-column:1; order:1 }
}

@media (max-width:760px){
  /* Apilada: el filete pasa a la izquierda y el nodo se sienta encima,
     con la marca y la tarjeta a su derecha. */
  .linea-dr{ position:relative; padding-left:4rem; gap:2.25rem }
  .linea-dr::before{ content:""; position:absolute; top:.5rem; bottom:.5rem;
                     left:1.375rem; width:1px; background:var(--borde) }
  .hito-dr-nodo{ position:absolute; left:-4rem; top:0;
                 box-shadow:0 0 0 5px var(--papel) }
  .hito-dr-marca{ min-height:2.75rem; justify-content:center;
                  align-items:flex-start }
}

/* ---------------------------------------------------------------
   La invitacion a pedir cita: a una columna, centrada, y entera dentro
   de una caja de lino sobre el blanco de la pagina. Antes iba a dos
   columnas y el formulario quedaba como un anexo del texto; aqui es la
   pieza, y el cambio de color la despega del resto. */
.cierre-centrado{ max-width:46rem; margin-inline:auto }
.caja-formulario{ background:var(--hueso); border:1px solid var(--borde);
                  border-radius:var(--radio-md);
                  padding:clamp(1.75rem,3.5vw,3rem) }
/* Dentro de la caja de lino, el formulario deja su propia caja blanca:
   dos recuadros uno dentro de otro se leian como un parche. */
.caja-formulario .formulario{ background:none; border:0; border-radius:0;
                              padding:0; box-shadow:none }
/* Y los campos respiran: en una caja ya acotada, 16px entre pieza y
   pieza los dejaba pegados. */
.caja-formulario .formulario-pasos{ gap:2rem }
.caja-formulario .campo{ gap:.55rem }
.caja-formulario .campo + .campo,
.caja-formulario .campo-par,
.caja-formulario .consentimiento{ margin-top:1.5rem }
/* Dentro de la pareja telefono/correo no: ahi son columnas, no uno
   debajo de otro, y el margen hundia el segundo campo. */
.caja-formulario .campo-par .campo + .campo{ margin-top:0 }
.caja-formulario .campo-par{ gap:1.25rem }
.cierre-cabeza{ text-align:center; margin-bottom:clamp(1.75rem,3vw,2.5rem) }
.cierre-cabeza h2{ margin:0 }
.cierre-cabeza .entradilla{ margin:1.1rem auto 0; max-width:32rem }
/* Sobre lino, las piezas que llevan fondo blanco se quedan en blanco:
   es lo que marca donde se escribe y donde se elige. */
.caja-formulario input[type=text],
.caja-formulario input[type=tel],
.caja-formulario input[type=email],
.caja-formulario textarea{ background:var(--blanco) }

/* ---------------------------------------------------------------
   El formulario de cita, en tres pasos. Las opciones son radios de
   toda la vida vestidos de boton: sin JS se ven las tres preguntas
   seguidas y el formulario sigue funcionando. */
.formulario-pasos{ display:grid; gap:1.5rem }
.pasos-marca{ display:grid; gap:.6rem }
.pasos-barra{ height:3px; background:var(--borde); border-radius:999px;
              overflow:hidden }
.pasos-barra span{ display:block; height:100%; width:100%;
                   background:var(--resalta-texto);
                   transition:width .32s cubic-bezier(.22,.61,.36,1) }
.pasos-rotulo{ margin:0; font-family:var(--sans); font-size:var(--t-xs);
               letter-spacing:.04em; color:var(--texto-tenue) }
/* Sin JS no hay paso actual que contar. */
.formulario-pasos:not(.con-pasos) .pasos-marca{ display:none }

.formulario-pasos .paso{ border:0; margin:0; padding:0; min-width:0 }
.formulario-pasos .paso + .paso{ margin-top:2rem }
.con-pasos .paso + .paso{ margin-top:0 }
.formulario-pasos legend{ padding:0; margin:0 0 1rem; font-family:var(--serif);
                          font-weight:300; font-size:var(--s-md);
                          line-height:1.3; color:var(--grafito) }

.opciones-paso{ display:grid; gap:.6rem;
                grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)) }
.opciones-paso-dos{ grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)) }
.opcion-paso{ position:relative; display:block; cursor:pointer }
.opcion-paso input{ position:absolute; opacity:0; width:0; height:0 }
.opcion-paso span{ display:block; padding:1rem 1.15rem;
                   background:var(--blanco); border:1px solid var(--borde);
                   border-radius:var(--radio); font-size:var(--t-sm);
                   line-height:1.4; color:var(--texto);
                   transition:border-color .18s ease, background .18s ease }
.opcion-paso:hover span{ border-color:var(--resalta-texto) }
.opcion-paso input:focus-visible + span{ outline:2px solid var(--resalta-texto);
                                         outline-offset:2px }
.opcion-paso input:checked + span{ background:var(--grafito);
                                   border-color:var(--grafito);
                                   color:var(--papel) }

.paso-atras{ margin-top:1.25rem; background:none; border:0; padding:0;
             font-family:var(--sans); font-size:var(--t-sm);
             color:var(--texto-tenue); cursor:pointer }
.paso-atras:hover{ color:var(--grafito) }
.paso-acciones{ display:flex; align-items:center; gap:1.25rem;
                flex-wrap:wrap; margin-top:1.5rem }
.paso-acciones .paso-atras{ margin-top:0 }

/* Cabecera de lista: el titular a la izquierda y el rotulo del
   capitulo a la derecha, en la misma linea de base. */
.cabeza-lista{ display:flex; align-items:baseline; justify-content:space-between;
               gap:1rem 2rem; flex-wrap:wrap }
.cabeza-lista h2{ margin:0 }
.cabeza-lista .capitulo{ margin:0 }
.cabeza-lista + .entradilla{ margin-top:1.25rem }

/* Las cuatro especialidades, en filas de lista separadas por filetes:
   numero, titular, explicacion y flecha. Las que tienen pagina son un
   enlace entero, no solo el titular. */
.especialidades{ margin-top:2.5rem; border-top:1px solid var(--borde) }
.especialidad{ display:grid; align-items:baseline;
               grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 1.5rem;
               column-gap:clamp(2rem,5vw,4.5rem); row-gap:.5rem;
               padding:1.75rem 0; border-bottom:1px solid var(--borde);
               text-decoration:none; color:var(--texto) }
/* A 32px el titular de cada fila casi igualaba al h2 de la seccion,
   que mide 40: la lista se leia como ocho titulares del mismo rango. */
.especialidad h3{ margin:0; font-family:var(--serif); font-weight:300;
                  font-size:clamp(1.375rem,1.9vw,1.75rem); line-height:1.2;
                  color:var(--grafito); transition:color .18s ease }
.especialidad p{ margin:0; font-size:var(--t-sm); line-height:1.6;
                 color:var(--texto-tenue) }
/* La marca de «tecnica destacada», pegada al titular: en pastilla
   beige, el unico relleno de color de la lista. */
.especialidad-tag{ display:inline-block; margin-left:.65rem;
                   margin-top:.2rem;
                   vertical-align:middle; font-family:var(--mono);
                   font-size:var(--t-xs); letter-spacing:.04em;
                   color:var(--grafito); background:var(--resalta);
                   border-radius:999px; padding:.25rem .6rem }
.especialidad-flecha{ justify-self:end; font-size:var(--t-md); line-height:1;
                      color:var(--resalta-texto);
                      transition:transform .18s ease }
a.especialidad:hover h3{ color:var(--resalta-texto) }
a.especialidad:hover .especialidad-flecha{ transform:translate(3px,-3px) }
@media (max-width:760px){
  /* Tres columnas: numero, titular y flecha arriba; la explicacion
     debajo, bajo el titular. A 375px, cuatro columnas no caben. */
  .especialidad{ grid-template-columns:minmax(0,1fr) 1.25rem;
                 column-gap:1rem; padding:1.5rem 0 }
  /* A 24px el titular de cada fila se confundia con el h2 de la
     seccion, que en movil mide 30. */
  .especialidad h3{ grid-column:1; grid-row:1; font-size:1.375rem;
                    line-height:1.2 }
  .especialidad-flecha{ grid-column:2; grid-row:1 }
  .especialidad p{ grid-column:1 / -1; grid-row:2 }
}

/* El curriculum, por areas, dentro de un panel con pestanas. Los
   cuatro bloques van enteros en el HTML uno detras de otro: con JS
   solo se ve el activo, sin JS se leen todos seguidos con su rotulo
   (de eso se encarga .con-pestanas, que solo pone el JS). */
/* El panel entero es una tarjeta grande de lino, y dentro van las
   fichas en blanco: asi el bloque se lee como una sola pieza. */
.panel-dr{ margin-top:2.5rem; background:var(--hueso);
           border:1px solid var(--borde); border-radius:var(--radio-md);
           padding:clamp(1.5rem,3vw,2.75rem) }
.panel-dr-cabeza{ display:flex; align-items:flex-start;
                  justify-content:space-between; gap:1rem 2rem;
                  flex-wrap:wrap; padding-bottom:1.5rem;
                  border-bottom:1px solid var(--borde) }
.panel-dr-cabeza h2{ margin:0 }
.panel-dr-cabeza .entradilla{ margin:1rem 0 0; max-width:38rem }
.chip-dr{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.04em;
          color:var(--resalta-texto); background:var(--resalta-suave);
          border-radius:999px; padding:.45rem .9rem; white-space:nowrap }
.rotulo-seccion{ margin:0; font-family:var(--sans); font-size:var(--t-xs);
                 font-weight:600; letter-spacing:.14em;
                 text-transform:uppercase; color:var(--texto-tenue) }

/* Las pestanas: botones sueltos, en pildora. El activo va en negro,
   como el resto de botones solidos de la web. */
.pestanas-dr{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem }
.pestana-dr{ display:inline-flex; align-items:baseline; gap:.5rem;
             font-family:var(--mono); font-size:var(--t-xs);
             letter-spacing:.03em; text-align:left; color:var(--texto);
             background:var(--blanco); border:1px solid var(--borde);
             border-radius:999px; padding:.65rem 1.1rem; cursor:pointer;
             transition:background .18s ease, color .18s ease,
                        border-color .18s ease }
.pestana-dr:hover{ background:var(--resalta-suave) }
.pestana-dr-num{ color:var(--resalta-texto) }
.pestana-dr[aria-selected="true"]{ background:var(--grafito);
                                   border-color:var(--grafito);
                                   color:var(--papel) }
.pestana-dr[aria-selected="true"] .pestana-dr-num{ color:var(--resalta) }

.area-dr{ margin-top:2rem }
.area-dr + .area-dr{ margin-top:3rem }
.con-pestanas .area-dr .rotulo-seccion{ display:none }
.area-dr-fichas{ display:grid; gap:1rem; margin-top:1.25rem;
                 grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)) }
.credencial{ background:var(--blanco); border:1px solid var(--borde);
             border-radius:var(--radio-md); padding:1.5rem }
.credencial-marca{ margin:0; display:flex; align-items:baseline; gap:.45rem;
                   font-family:var(--mono); font-size:var(--t-xs);
                   letter-spacing:.04em; text-transform:uppercase;
                   color:var(--resalta-texto) }
.credencial-marca span + span::before{ content:"\00b7\00a0" }
.credencial h4{ margin:.9rem 0 0; font-family:var(--serif); font-weight:300;
                font-size:var(--s-md); line-height:1.25; color:var(--grafito) }
.credencial-centro{ margin:.4rem 0 0; font-size:var(--t-sm); line-height:1.6;
                    color:var(--texto-tenue) }

/* La tecnica, sobre banda negra: dos columnas de texto corrido, sin
   recuadros. El titular crece aqui mas que en el resto de la pagina
   porque es el argumento que la sostiene. */
/* Sin tamano propio: a 62px era el unico titular de la web a ese
   cuerpo y la seccion se leia como si fuera de otra pagina. Se queda
   con el de cualquier h2. */
.banda .titulo-grande .oro{ color:var(--resalta) }
/* La banda de la tecnica lleva cuatro piezas cortas: con el relleno de
   seccion holgada (120px arriba y abajo) quedaba una franja enorme
   para el poco texto que tiene. */
#tecnica.seccion.seccion-holgada{ padding-top:clamp(3rem,5vw,4.5rem);
                                  padding-bottom:clamp(3rem,5vw,4.5rem) }
/* Bajo el titular de la banda: el lema en cursiva y, debajo, la
   explicacion de que es la tecnica. El lema va en el oro de marca, que
   sobre negro da 12.6 de contraste. */
.tecnica-lema{ margin:2.5rem 0 0; font-family:var(--serif);
               font-style:italic; font-weight:300;
               font-size:clamp(1.625rem,2.4vw,2.125rem); line-height:1.25 }
.banda .tecnica-lema{ color:var(--resalta) }
.tecnica-entrada{ margin:1.5rem 0 0; max-width:48rem;
                  font-size:var(--t-md); line-height:1.75 }
.tecnica-cta{ margin:3rem 0 0 }

/* Metodo: cuatro columnas con el numero en grande. */
.metodo{ display:grid;
         grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
         gap:clamp(1.5rem,3vw,2.75rem); margin-top:3rem }
.metodo-num{ font-family:var(--serif); font-weight:300; font-size:2.75rem;
             line-height:1; color:var(--resalta-texto) }
.metodo-paso h3{ margin:1rem 0 .6rem; font-family:var(--serif);
                 font-weight:300; font-size:var(--s-md); line-height:1.25 }
.metodo-paso p{ margin:0; font-size:var(--t-sm); line-height:1.6;
                color:var(--texto-tenue) }
@media (max-width:760px){
  /* Apilados, el metodo se lee como los pasos de la portada: el numero
     en circulo beige a la izquierda y el hilo vertical uniendo uno con
     otro. En horizontal, cada filete cortaba el paso por la mitad y
     parecia un separador suelto. */
  .metodo{ display:block }
  .metodo-paso{ position:relative; padding:0 0 2.4rem 4.25rem }
  .metodo-paso:last-child{ padding-bottom:0 }
  .metodo-num{ position:absolute; left:0; top:-.35rem;
               width:2.75rem; height:2.75rem; border-radius:50%;
               background:var(--resalta); color:var(--grafito);
               display:grid; place-items:center; font-size:var(--s-sm);
               line-height:1 }
  .metodo-hilo{ position:absolute; left:1.375rem; top:2.75rem; bottom:-.1rem;
                width:2px; height:auto; margin:0; background:var(--resalta);
                transform:translateX(-50%); transform-origin:top center }
  .metodo-paso:last-child .metodo-hilo{ display:none }
  .metodo-hilo::before{ display:none }
  .metodo-paso h3{ margin-top:0; font-size:1.375rem; line-height:1.2 }
  .traza-lista .metodo-hilo{ transform:translateX(-50%) scaleY(0) }
  .traza-lista.trazado .metodo-hilo{ transform:translateX(-50%) scaleY(1) }
}

/* La frase del doctor, al lado de su foto. */
/* La cita arranca a la altura del borde superior de la foto. La
   comilla es un adorno: va fuera del flujo, asi que no empuja al texto
   hacia abajo. */
.dividido-palabras{ align-items:start }
.cita-doctor{ margin:0; position:relative; padding-top:.35rem }
@media (max-width:760px){
  /* Apilada bajo la foto, la comilla se le echaba encima. */
  .cita-doctor{ margin-top:2.5rem }
  /* Y la pastilla, en su propia linea, necesita respirar mas. */
  .especialidad-tag{ margin-left:0; margin-top:.6rem }
}
.cita-comilla{ position:absolute; top:-1.9rem; left:-.15rem;
               font-family:var(--serif); font-size:4.5rem; line-height:1;
               color:var(--resalta-texto) }
.cita-doctor blockquote{ margin:0; font-family:var(--serif);
                         font-weight:300; font-size:var(--s-lg);
                         line-height:1.3; color:var(--texto) }
/* La comilla de cierre, al final del texto: misma letra y mismo oro
   que la de apertura, pero en linea, para que cierre donde acaba la
   frase y no en una esquina suelta. */
.cita-cierre{ font-family:var(--serif); font-size:3.5rem; line-height:0;
              vertical-align:-.25em; margin-left:.1rem;
              color:var(--resalta-texto) }
.cita-doctor figcaption{ margin-top:1.4rem; font-family:var(--serif);
                         font-size:clamp(1.25rem,1.6vw,1.375rem);
                         line-height:1.3; color:var(--texto) }

/* Las dos sedes, cada una con su mapa. */
.sedes-dr{ display:grid;
           grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
           gap:1.25rem; margin-top:2.5rem }
.sede-dr{ border:1px solid var(--borde); display:flex;
          flex-direction:column; overflow:hidden }
.sede-dr-cuerpo{ padding:1.75rem; display:flex; flex-direction:column;
                 gap:.75rem }
.sede-dr-dir{ margin:0; font-family:var(--serif); font-weight:300;
              font-size:var(--s-md); line-height:1.3 }
.sede-dr-datos{ margin:.25rem 0 0; display:grid;
                grid-template-columns:auto minmax(0,1fr); gap:.4rem 1.25rem }
.sede-dr-datos dt{ font-size:var(--t-sm); color:var(--texto-tenue) }
.sede-dr-datos dd{ margin:0; font-size:var(--t-sm) }
.sede-dr p:last-child{ margin:.5rem 0 0 }

/* --- video del doctor -------------------------------------------
   Cuadrado, asi que no puede ocupar la columna entera: a 566 px de
   ancho mediria lo mismo de alto y aplastaria todo lo que tiene al
   lado. Se le pone techo y se alinea arriba con el bloque vecino. */
.pelicula{ position:relative; margin:0; width:min(100%, var(--ancho, 30rem));
           aspect-ratio:var(--prop, 16/9);
           border-radius:var(--radio-md); overflow:hidden;
           background:var(--grafito) }
/* `contain`, nunca `cover`: en la pagina la caja y el video son
   cuadrados y da igual, pero a pantalla completa la caja pasa a ser
   apaisada y `cover` recortaba la cabeza por arriba. */
.pelicula video{ display:block; width:100%; height:100%; object-fit:contain }
/* El boton de sonido se aparta de los controles del navegador, que
   viven abajo. No desaparece al activarlo: es el mismo boton el que
   silencia, y esconder el unico mando visible seria peor. Con sonido
   baja el tono, que ya no tiene que llamar la atencion. */
.pelicula-sonido{ position:absolute; top:.9rem; right:.9rem;
                  display:inline-flex; align-items:center; gap:.45rem;
                  background:rgba(255,255,255,.94); color:var(--grafito);
                  border:0; border-radius:999px; cursor:pointer;
                  font-family:var(--sans); font-size:var(--t-xs);
                  font-weight:600; letter-spacing:.02em;
                  padding:.5rem .85rem;
                  box-shadow:0 2px 12px rgba(0,0,0,.25);
                  transition:background .2s ease, opacity .2s ease }
.pelicula-sonido:hover{ background:#fff }
.pelicula.con-sonido .pelicula-sonido{ background:rgba(255,255,255,.72);
                                       box-shadow:none }
.pelicula.con-sonido .pelicula-sonido:hover{ background:#fff }
/* Altavoz dibujado con dos cajas: sin icono que cargar. */
.pelicula-sonido-icono{ position:relative; flex:none; width:9px; height:9px;
                        background:currentColor;
                        clip-path:polygon(0 30%, 38% 30%, 100% 0, 100% 100%, 38% 70%, 0 70%) }
.pelicula-pie{ margin:.75rem 0 0; font-size:var(--t-xs);
               color:var(--texto-tenue); letter-spacing:.02em }

/* --- pieza que gira ---------------------------------------------
   Un video que no se reproduce: se gira con el raton o con el dedo.
   Ocupa el mismo sitio que la foto o el hueco al que sustituye.
   `touch-action:pan-y` deja que la pagina siga bajando con el dedo
   mientras el gesto horizontal queda para la pieza. */
.giro{ position:relative; margin:2.5rem 0 0; aspect-ratio:var(--prop, 3/2);
       border-radius:var(--radio-md); overflow:hidden;
       background:var(--hueso); cursor:ew-resize; touch-action:pan-y;
       -webkit-user-select:none; user-select:none }
.giro video{ display:block; width:100%; height:100%; object-fit:cover;
             pointer-events:none }
/* Avance: dice cuanto queda por girar. Un filete fino, no una barra de
   reproduccion, porque esto no se reproduce. */
.giro-avance{ position:absolute; left:0; right:0; bottom:0; height:3px;
              background:rgba(17,17,17,.1) }
.giro-avance i{ display:block; height:100%; background:var(--titanio);
                transform:scaleX(0); transform-origin:left center }
/* El aviso de que se puede girar desaparece en cuanto alguien lo hace:
   a partir de ahi solo estorba la imagen. */
.giro-pie{ position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
           margin:0; white-space:nowrap;
           background:rgba(255,255,255,.92); color:var(--grafito);
           font-size:var(--t-xs); font-weight:500; letter-spacing:.02em;
           padding:.45rem .85rem; border-radius:999px;
           box-shadow:0 2px 12px rgba(0,0,0,.14);
           transition:opacity .25s ease }
.giro-tocado .giro-pie{ opacity:0 }
@media (hover:none){
  /* Sin cursor que lo sugiera, el aviso tiene que aguantar mas. */
  .giro{ cursor:default }
}

/* La foto que sustituye a un hueco hereda su geometria: misma
   proporcion y mismo margen superior, para que cambiar el marcador por
   la imagen de verdad no desplace nada de al lado. */
.foto{ margin:2.5rem 0 0; aspect-ratio:var(--prop, 16/9);
       border-radius:var(--radio-md); overflow:hidden;
       background:var(--hueso) }
/* Dentro de una tarjeta la foto va pegada a su borde: el margen de
   40px que trae por defecto dejaba un hueco en blanco entre el texto
   de la seccion y la primera tarjeta. */
.tarjeta-num .foto{ margin-top:0 }
.foto picture{ display:block; height:100% }
.foto img{ display:block; width:100%; height:100%; object-fit:cover }

.hueco{ position:relative; display:flex; align-items:flex-end;
        width:100%; min-width:0; box-sizing:border-box;
        aspect-ratio:var(--prop, 16/9); margin-top:2.5rem; padding:1.25rem;
        background:repeating-linear-gradient(135deg,
                   #EDE6DC 0 10px, #F5F0E9 10px 20px) }
.banda .hueco{ background:repeating-linear-gradient(135deg,
               #1B1B1B 0 10px, #222 10px 20px); border:1px solid #2c2c2c }
.hueco-etiqueta{ position:absolute; top:1rem; left:1rem;
                 background:var(--grafito); color:var(--resalta);
                 font-family:var(--mono); font-size:var(--t-xs);
                 padding:.35rem .6rem }
.banda .hueco-etiqueta{ background:var(--resalta); color:var(--grafito) }
.caso-par-hueco{ grid-template-columns:1fr }
.hueco-caso{ margin-top:0; aspect-ratio:2/1; align-items:center;
             justify-content:center; text-align:center }
.hueco-texto{ color:var(--texto-tenue); opacity:.55 }

/* --- formulario, con el aire del diseño --- */
/* El formulario de las paginas de tratamiento ya no lleva caja propia:
   va dentro de la de lino, como en el resto de la web. */
.tecnica .formulario label{ font-size:var(--t-xs); font-weight:600;
                            letter-spacing:.12em; text-transform:uppercase;
                            color:var(--texto-tenue) }
/* Las opciones de los pasos son botones, no rotulos de campo: aqui la
   regla de arriba las ponia en versales y negrita. */
.tecnica .formulario .opcion-paso,
.tecnica .formulario .opcion-paso span,
.tecnica .formulario .consentimiento,
.tecnica .formulario .consentimiento span{ font-size:var(--t-sm);
                                           font-weight:400; letter-spacing:0;
                                           text-transform:none;
                                           color:var(--texto) }
/* ...pero esa correccion pesa mas que la del boton elegido, asi que se
   comia su color: la opcion marcada quedaba con letra oscura sobre fondo
   negro y no se leia. En portada no pasaba porque su <main> no es
   .tecnica. */
.tecnica .formulario .opcion-paso input:checked + span{ color:var(--papel) }
.tecnica .formulario input:not([type=checkbox]),
.tecnica .formulario select,
.tecnica .formulario textarea{ background:var(--blanco) }
.tecnica .consentimiento,
.tecnica .consentimiento span{ text-transform:none; letter-spacing:0;
                               font-weight:400; font-size:var(--t-sm) }

/* --- firma --- */
.firma{ padding-top:2.5rem; padding-bottom:3rem; border-top:1px solid var(--borde) }
.firma-revision{ margin:0; font-size:var(--t-sm); color:var(--texto-tenue);
                 max-width:70ch }
.cita{ color:var(--resalta-texto); text-decoration:underline;
       text-decoration-thickness:1px; text-underline-offset:.18em }

@media (max-width:1120px){
  .hero.hero-tecnica h1{ font-size:46px }
  .datos-hero{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .tecnica .dividido-faq{ grid-template-columns:minmax(0,1fr) }
  .faq-cabeza,
  .titulo-pegado{ position:static }
}
@media (max-width:760px){
  /* 56 para que el titular arranque a la misma altura que el rotulo de
     la portada: los dos a 125 desde el borde de la ventana. */
  .hero.hero-tecnica{ padding-top:56px }
  /* Y dentro del hero, mas aire entre las tres piezas: titular,
     bajada, parrafo y botones. */
  .hero-tecnica .hero-cuerpo{ margin-top:2.75rem }
  /* Cuando la bajada va dentro del h1, el salto lo pone ella. */
  .hero.hero-tecnica h1 .hero-lema{ margin-top:2rem }
  .hero-tecnica .hero-cuerpo p{ margin-top:2rem }
  .hero-tecnica .hero-acciones{ margin-top:3.25rem }
  .hero.hero-tecnica h1{ font-size:34px }
  .hero.hero-tecnica .hero-acciones{ display:flex; flex-wrap:wrap;
                                     justify-content:flex-start; gap:.6rem }
  /* 13px, como el resto de botones de la web: a 14 y en caja alta
     pesaban más que los de la portada. */
  .hero.hero-tecnica .hero-acciones .boton{ font-size:12px;
                                            padding:.85rem 1.1rem;
                                            letter-spacing:.07em;
                                            text-transform:uppercase }
  .datos-hero{ grid-template-columns:minmax(0,1fr); gap:0 }
  .dato-hero{ padding-right:0; border-top:1px solid var(--borde) }
  .dato-hero:first-child{ border-top:0 }
  .celda-caso{ border-right:0; border-bottom:1px solid var(--borde) }
  .celda-caso:last-child{ border-bottom:0 }
  .hito-anio{ grid-template-columns:5rem 1fr; gap:.9rem }
  .caja-lista{ padding:1.5rem 1.35rem }
  /* Las cifras del paso a paso, un punto por debajo: a 40px en una
     columna de móvil pesaban más que el propio titular. */
  .ficha-dato .ficha-cifra{ font-size:1.75rem }
  /* En movil sube un escalon, de 13 a 15, sin pasar de ahi: la tabla no
     se desplaza de lado, se ajusta al ancho de la pantalla. */
  .tabla-compara{ min-width:0; grid-template-columns:.85fr 1fr 1fr;
                  font-size:var(--t-sm) }
  .tabla-compara > .fila > div,
  .tabla-compara > div{ padding:.75rem .45rem; min-width:0;
                        overflow-wrap:break-word; hyphens:auto }
  .tabla-compara .fila-cabeza{ letter-spacing:.06em }
  .tabla-compara .fila-b{ gap:.35rem }
}


/* En el móvil el hero de las páginas de servicio deja de ir centrado:
   a 393px de ancho un titular centrado de cinco líneas se lee peor que
   uno alineado a la izquierda, porque cada renglón empieza en un sitio
   distinto. En ordenador sigue centrado. */
@media (max-width:760px){
  .hero-centrado{ text-align:left }
  .hero-centrado h1:not(.rotulo){ max-width:none; margin-inline:0 }
  .hero-centrado .hero-cuerpo{ margin-inline:0 }
  .hero-centrado .hero-acciones{ justify-content:flex-start }
  .hero-centrado .rotulo{ margin-inline:0 }
}

/* ===============================================================
   PÁGINA DE POCO HUESO
   Mismo sistema que la de técnica: cuelga de `main.tecnica` y usa
   los mismos tokens. Aquí solo van las piezas que no existían.
   =============================================================== */

/* Las tres vías, bajo la imagen del hero. */
.rutas-hero{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
             border-bottom:1px solid var(--borde) }
.rutas-hero a{ display:flex; gap:.9rem; align-items:center;
               padding:1.4rem 1.25rem 1.4rem 0; text-decoration:none;
               font-size:var(--t-md); font-weight:500; color:var(--texto) }
.rutas-hero a:hover{ color:var(--resalta-texto) }
.ruta-num{ flex:none; width:30px; height:30px; border-radius:50%;
           background:var(--resalta); color:var(--resalta-texto);
           display:flex; align-items:center; justify-content:center;
           font-family:var(--serif); font-size:1rem }

/* El «Sí.» grande de la respuesta. */
.respuesta-si{ margin:1.5rem 0 0; font-family:var(--serif); font-weight:300;
               font-size:clamp(2.5rem, 5vw, 4rem); line-height:1;
               color:var(--grafito) }
.respuesta-si span{ color:var(--resalta-texto) }

/* Los tres caminos, en fichas blancas. */
.caminos{ display:grid; gap:1.35rem; margin-top:1.5rem }
/* El bloque del precio: el titular cabe en menos de media pagina y la
   columna de la derecha —dos cajas enfrentadas y el aviso del
   presupuesto— necesita el sitio. */
@media (min-width:761px){
  .tecnica .dividido-precio{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr) }
}
/* En «¿Que son?» el texto baja hasta cerrar a la altura del pie de la
   imagen, en vez de quedarse centrado a media columna. */
@media (min-width:761px){
  /* La columna va anclada abajo, asi que lo que la sube es el aire que
     se le pone DEBAJO: con margen superior solo se moveria la pieza. */
  #que-son .dividido > div:last-child{ align-self:end; margin-bottom:1.75rem }
  /* En «¿Existe el rechazo?» el texto cierra con el pie de la imagen:
     centrado arrancaba por encima de ella. La cita de arriba se separa
     del parrafo que la sigue y, al estar la columna anclada abajo, eso
     la sube. */
  #respuesta .dividido > div:last-child{ align-self:end }
  #respuesta .cita-bloque{ margin-bottom:2rem }
}
/* Con la columna anclada abajo, lo que sube la cita es el aire que se le
   pone DEBAJO: el margen superior solo movia el parrafo de arriba. */
#que-son .cita-bloque{ margin-bottom:1.75rem }
/* En «¿Para quien estan indicados?» el titular se alinea con la PRIMERA
   linea del texto de al lado, no con la ultima: al pie quedaba colgando
   muy por debajo del parrafo. */
@media (min-width:761px){
  #para-quien .dividido-pie{ align-items:start }
}
/* La malla: imagen a un lado y todo el texto al otro, como el bloque de
   la clinica en la pagina de Valencia. */
@media (min-width:761px){
  .dividido-malla{ align-items:start }
  .dividido-malla > .hueco,
  .dividido-malla > .foto{ margin-top:0 }
  .dividido-malla h2{ margin-bottom:1.5rem }
}
@media (max-width:760px){
  /* Apilado: titular, imagen y texto. */
  .dividido-malla > div:not(.hueco){ display:contents }
  .dividido-malla h2{ order:-2; margin-bottom:1.25rem }
  .dividido-malla > .hueco,
  .dividido-malla > .foto{ order:-1; margin-top:0; margin-bottom:1.5rem }
}
/* La respuesta va en cuatro piezas: titular y «Sí» a la izquierda, el
   parrafo a la derecha, y debajo la imagen y las tres vias, cada una en
   su columna y arrancando a la misma altura. */
.dividido-respuesta{ align-items:start }
.dividido-respuesta > .hueco{ margin-top:0 }
.dividido-respuesta > .caminos{ margin-top:0 }
@media (min-width:761px){
  /* El parrafo cae al pie de su fila —a la altura del «Si»— sin estirarla:
     con relleno superior empujaba hacia abajo la imagen y las vias. Y las
     tres vias cierran justo donde termina la imagen. */
  /* El margen negativo es lo que lo baja de verdad: pegado al pie de su
     fila y sobresaliendo por debajo, sin estirarla. Si se estira, la
     imagen y las vias bajan con ella. */
  .dividido-respuesta > div:nth-child(2){ align-self:end;
                                          margin-bottom:-11rem }
  .dividido-respuesta > .caminos{ align-self:end }
  /* Con el video, que es cuadrado y mas bajo que el hueco apaisado al
     que sustituye, las vias se alinean arriba con el: ancladas abajo
     quedaba un agujero entre el parrafo y ellas. */
  /* Con #respuesta delante porque la regla que ancla abajo la ultima
     columna de esta seccion lleva id, y sin el gana ella. */
  /* Ancladas al pie del video y subidas desde ahi: asi se controla la
     posicion con un numero en vez de depender de lo que midan. */
  #respuesta .dividido:has(> .pelicula) > .caminos{ align-self:end;
                                                   margin-bottom:1.75rem }
}
@media (max-width:760px){
  /* Apilado: titular, «Si», imagen, parrafo y vias. Los envoltorios de
     texto van con display:contents, asi que se ordenan sus hijos. */
  /* Con id: la regla general del bloque holgado pone el h2 en -1 y hay
     que quedar por delante de ella. */
  #respuesta h2{ order:-4 }
  #respuesta .respuesta-si{ order:-3 }
  #respuesta .dividido > .hueco{ order:-2 }
  .dividido-respuesta > .hueco,
  .dividido-respuesta > .pelicula{ order:-1; margin-top:1.5rem }
  /* Apilado no hay columna que respetar: el video ocupa el ancho. */
  .dividido-respuesta > .pelicula{ width:100% }
}
.camino{ display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap;
         background:var(--blanco); padding:1rem 1.25rem;
         font-size:var(--t-md); line-height:1.5 }
/* El nombre de la tecnica, sin parentesis: se separa del enunciado con
   un guion largo y el dorado de marca. */
.camino em{ font-style:normal; font-weight:500; color:var(--resalta-texto) }
.camino-tecnica::before{ content:"\2014\00a0"; color:var(--borde) }

/* Franja negra de aviso, con la frase a la derecha. */
.franja-negra{ display:grid;
               grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
               gap:1.5rem; align-items:center; margin-top:3rem;
               background:var(--grafito); color:var(--papel);
               padding:1.75rem 2rem }
.franja-negra-aviso{ display:flex; gap:1rem; align-items:flex-start }
.franja-negra-aviso p{ margin:0; font-size:var(--t-sm); line-height:1.6;
                       color:#d8d2c8 }
.franja-negra-frase{ margin:0; font-family:var(--serif); font-weight:300;
                     font-size:var(--s-md); line-height:1.3 }
.franja-negra-frase span{ color:var(--resalta) }
.marca-oro{ flex:none; display:inline-block; background:var(--resalta);
            color:var(--grafito); font-family:var(--sans);
            font-size:.6875rem; font-weight:600; letter-spacing:.18em;
            text-transform:uppercase; padding:.45rem .65rem }
/* El enlace de la franja heredaba el negro del texto corrido y quedaba
   negro sobre negro: invisible, solo se veia su filete dorado. Va en
   beige, como los de las bandas oscuras. */
.franja-negra .cta-enlace{ color:var(--resalta) }
.franja-negra .cta-enlace:hover{ border-bottom-color:var(--papel) }
@media (max-width:760px){
  /* Y la pastilla deja de ir al lado del texto: en 390px dejaba una
     columna de siete palabras por linea. */
  .franja-negra-aviso{ flex-direction:column; gap:.9rem }
  .franja-negra{ padding:1.5rem 1.35rem }
}

/* 2D contra 3D. */
.tecnica .dividido-diagnostico{ margin-top:3rem; align-items:start }
/* El hueco de imagen trae 2,5rem de margen para cuando va suelto entre
   bloques; aqui va en columna y tiene que arrancar a la altura de los
   cuadros de 2D/3D. */
.dividido-diagnostico > .hueco{ margin-top:0 }
.dos-dimensiones{ display:grid; grid-template-columns:1fr 1fr;
                  border:1px solid var(--borde); margin-bottom:1.5rem }
.dimension{ display:flex; flex-direction:column; gap:.75rem;
            padding:1.5rem; border-right:1px solid var(--borde) }
.dimension:last-child{ border-right:0 }
.dimension-cifra{ font-family:var(--serif); font-weight:300; font-size:2.75rem;
                  line-height:1; color:var(--titanio); opacity:.85 }
.dimension-pie{ font-size:var(--t-sm); line-height:1.5; color:var(--texto-tenue) }
.dimension-oscura{ background:var(--grafito); color:var(--papel) }
.dimension-oscura .rotulo-mini{ color:var(--resalta) }
.dimension-oscura .dimension-cifra{ color:var(--resalta); opacity:1 }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem }
.chip{ border:1px solid var(--borde); padding:.25rem .6rem;
       font-size:var(--t-xs); color:var(--texto-tenue) }
.dimension-oscura .chip{ border-color:#555; color:var(--papel) }
.banda .chip,
.cta-texto .chip{ border-color:rgba(255,255,255,.28); color:#d8d2c8 }

/* Nota sobre lino con marca redonda. */
.nota-lino{ display:flex; gap:1rem; align-items:flex-start; margin:2rem 0 0;
            background:var(--hueso); padding:1.5rem 1.75rem;
            font-size:var(--t-sm); line-height:1.6 }

/* Las tres soluciones, en tarjetas con imagen. */
.soluciones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
             gap:1.25rem; margin-top:3rem }
.solucion{ display:flex; flex-direction:column; background:var(--blanco) }
.solucion-cuerpo{ display:flex; flex-direction:column; gap:.85rem; flex:1;
                  padding:1.9rem }
.solucion-alto{ display:flex; justify-content:space-between; align-items:center;
                gap:.6rem }
.solucion-num{ font-family:var(--serif); font-weight:300; font-size:2.75rem;
               line-height:1; color:var(--resalta-texto) }
.solucion h3{ margin:0 }
.solucion p{ margin:0; flex:1; font-size:1.0625rem; line-height:1.65;
             color:var(--texto-tenue) }
.solucion-destacada{ background:var(--grafito); color:var(--papel) }
.solucion-destacada h3{ color:var(--papel) }
.solucion-destacada p{ color:#cfc8bd }
.solucion-destacada .solucion-num{ color:var(--resalta) }
.solucion-destacada .cta-enlace{ color:var(--resalta) }

/* La comparativa, aquí con cuatro columnas. */
.tabla-cuatro{ grid-template-columns:.9fr 1.2fr 1.2fr 1.2fr; min-width:44rem }

/* Franja de resumen entre filetes. */
.franja-resumen{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
                 margin:2rem 0 0; padding:1.25rem 0;
                 border-block:1px solid var(--borde);
                 font-family:var(--serif); font-weight:300;
                 font-size:var(--s-sm); line-height:1.4; color:var(--grafito) }
.franja-resumen > span:last-child{ flex:1; min-width:16rem }

/* Arriba y abajo. */
.tecnica .dividido-arcadas{ margin-top:3rem; align-items:start }
.arcadas{ display:grid; gap:.75rem }
.arcada{ background:#1E1E1E; padding:1.6rem 1.75rem;
         display:flex; flex-direction:column; gap:.6rem }
.arcada-alto{ display:flex; justify-content:space-between; gap:.6rem;
              flex-wrap:wrap; align-items:baseline }
.arcada .rotulo-mini{ color:var(--resalta) }
.arcada-nota{ font-size:var(--t-sm); color:#a9a296 }
.arcada p{ margin:0; font-size:var(--t-sm); line-height:1.65; color:#d8d2c8 }
.arcada-borde{ background:none; border:1px solid var(--resalta);
               flex-direction:row; align-items:center; gap:1rem }
.arcada-simbolo{ flex:none; font-family:var(--serif); font-size:1.75rem;
                 color:var(--resalta) }

/* Pie de los casos. */
.mas-casos{ margin:2rem 0 0 }

/* Precio: una vía no cuesta lo que la otra. */
.precio-compara{ display:grid; grid-template-columns:1fr auto 1fr;
                 gap:.75rem; align-items:center; margin:1.5rem 0 }
.precio-caja{ background:var(--blanco); padding:1.1rem;
              font-size:var(--t-sm); line-height:1.4 }
.precio-signo{ font-family:var(--serif); font-size:1.375rem;
               color:var(--resalta-texto) }
.caja-presupuesto-filete{ background:var(--blanco);
                          border-left:3px solid var(--grafito) }

@media (max-width:1120px){
  .rutas-hero{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .tabla-cuatro{ min-width:40rem }
}
@media (max-width:760px){
  .rutas-hero{ grid-template-columns:minmax(0,1fr) }
  .rutas-hero a{ padding-right:0; border-top:1px solid var(--borde) }
  .rutas-hero a:first-child{ border-top:0 }
  .dos-dimensiones{ grid-template-columns:1fr }
  .dimension{ border-right:0; border-bottom:1px solid var(--borde) }
  .franja-negra{ padding:1.5rem 1.35rem }
  .solucion-cuerpo{ padding:1.5rem 1.35rem }
  .precio-compara{ grid-template-columns:1fr; text-align:center }
  .tabla-cuatro{ min-width:0; grid-template-columns:.8fr 1fr 1fr 1fr;
                 font-size:11.5px }
}


/* --- tres arreglos del bloque oscuro --- */

/* El enlace de «conoce la trayectoria» heredaba el color del texto
   normal: negro sobre negro. Lo único que se veía era su filete dorado,
   y parecía una raya suelta. Va en dorado sobre las bandas oscuras. */
/* Cualquier enlace dentro de una banda oscura: sin esto hereda el negro
   del texto corrido y desaparece. */
.banda .rasgo a,
.banda p a:not(.boton):not(.cta-enlace){ color:var(--resalta);
                                         text-decoration-color:rgba(230,214,184,.5) }
.banda .cta-enlace{ color:var(--resalta);
                    border-bottom-color:rgba(230,214,184,.45) }
.banda .cta-enlace:hover{ color:var(--papel); border-bottom-color:var(--papel) }

/* Tres fichas en dos columnas dejan un hueco vacío que se ve como un
   cuadro gris de más. En móvil van una debajo de otra. */
@media (max-width:760px){
  .fichas-dr{ grid-template-columns:minmax(0,1fr) }
}

/* La tarjeta negra de la técnica acababa justo donde empieza la
   cabecera negra de la tabla y los dos negros se fundían. */
.soluciones + .tabla-marco{ margin-top:3rem }
/* Sin las imagenes, las tres tarjetas son mucho mas bajas y la tabla se
   les quedaba encima. En movil van apiladas y ahi 3rem bastan. */
@media (min-width:761px){
  .soluciones + .tabla-marco{ margin-top:5.5rem }
}


/* Titular de poco hueso: es más corto que el de subperiósticos, así que
   admite un cuerpo mayor sin irse de línea. */
.hero.hero-grande h1{ font-size:clamp(2rem, 3.6vw, 3.0625rem) }
/* Un salto que solo existe en el móvil, para que la parte resaltada
   caiga entera en su propio renglón. */
.salto-movil{ display:none }
@media (max-width:760px){
  .salto-movil{ display:inline }
  .hero.hero-grande h1{ font-size:38px }
}

/* --- piezas de la página de rechazo --- */

/* Dos tarjetas en vez de tres: que no se estiren a lo ancho. */
.tarjetas-dos{ grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)) }

/* Los síntomas: mismas celdas que las situaciones, pero con el texto
   como cuerpo y sin marca de verificación. */
.rejilla-sintomas{ grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)) }
.sintoma{ margin:.5rem 0 0; font-size:var(--t-md); line-height:1.5;
          color:var(--grafito) }

/* Urgencias: la única caja de la web que pide llamar ahora mismo. */
.caja-urgencias{ background:var(--hueso); border-left:3px solid var(--grafito);
                 padding:1.6rem 1.75rem; display:flex; flex-direction:column;
                 gap:.6rem; align-items:flex-start }
.caja-urgencias p{ margin:0; font-size:var(--t-sm); line-height:1.6 }
.caja-urgencias .boton{ margin-top:.4rem }

/* Reseña real, en tarjeta blanca sobre la banda oscura. */
.resena{ margin:2rem 0 1.5rem; background:var(--blanco); color:var(--grafito);
         padding:1.75rem }
.resena-alto{ display:flex; justify-content:space-between; align-items:center;
              gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem }
.resena blockquote{ margin:0; font-family:var(--serif); font-weight:300;
                    font-size:var(--s-sm); line-height:1.4; color:var(--grafito) }
.resena figcaption{ margin-top:.9rem; font-size:var(--t-sm); color:var(--texto-tenue) }
.resena-estrellas{ color:var(--resalta-texto); letter-spacing:.15em;
                   font-size:1.125rem }

/* --- rechazo: piezas propias --- */
.ruta-flecha{ margin-left:auto; color:var(--resalta-texto) }
.boton-wsp{ display:inline-flex; align-items:center; gap:.6rem }
.boton-wsp::before{ content:""; width:8px; height:8px; border-radius:50%;
                    background:#7BC47F; flex:none }
.boton-oro{ background:var(--resalta); color:var(--grafito);
            border:1px solid var(--resalta) }
.boton-oro:hover{ background:transparent; color:var(--resalta) }
.hero-urgencias{ display:flex; gap:.6rem; align-items:center;
                 justify-content:center; margin:1.25rem 0 0;
                 font-size:var(--t-sm) }
.hero-urgencias a{ font-weight:600; color:var(--grafito); white-space:nowrap }
.centrado{ text-align:center; margin:2rem 0 0 }
.oro{ color:var(--resalta) }
.rotulo-gris{ color:var(--texto-tenue) }

/* Las dos causas, con la «o» en medio. */
.dos-causas{ display:grid; grid-template-columns:1fr auto 1fr; gap:1rem;
             align-items:stretch; margin-top:3rem }
.causa{ background:var(--blanco); padding:2rem; display:flex;
        flex-direction:column; gap:.75rem; align-items:flex-start }
.causa h3{ margin:0 }
.causa p{ margin:0; font-size:1.0625rem; line-height:1.55;
          color:var(--texto-tenue) }
.causa-o{ display:flex; align-items:center; font-family:var(--serif);
          font-size:1.75rem; color:var(--resalta-texto) }
.franja-negra-simple{ grid-template-columns:minmax(0,1fr) }

/* Síntomas. */
.rejilla-sintomas{ display:grid;
                   grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
                   border:1px solid var(--borde); margin-top:3rem }
.celda-sintoma{ background:var(--blanco); padding:1.75rem 1.5rem;
                border-right:1px solid var(--borde);
                display:flex; flex-direction:column; gap:1rem }
.celda-sintoma:last-child{ border-right:0 }
.celda-sintoma p{ margin:0; font-size:1.0625rem; line-height:1.5 }
.celda-sintoma-alto{ display:flex; justify-content:space-between;
                     align-items:center }
.sintoma-num{ font-family:var(--serif); font-weight:300; font-size:2.5rem;
              line-height:1; color:var(--resalta-texto) }
.punto-oro{ width:10px; height:10px; border-radius:50%;
            background:var(--resalta-texto) }
.par-avisos{ display:grid;
             grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
             gap:1rem; margin-top:1.5rem }
.aviso-normal{ background:var(--hueso); padding:1.75rem }
.aviso-alarma{ background:var(--blanco); border:1px solid var(--grafito);
               padding:1.75rem }
.par-avisos p{ margin:.75rem 0 0; font-size:1.0625rem; line-height:1.6 }
.franja-urgencias{ display:flex; gap:1.5rem; align-items:center;
                   justify-content:space-between; flex-wrap:wrap;
                   background:var(--grafito); color:var(--papel);
                   padding:1.6rem 1.75rem; margin-top:1rem }
.franja-urgencias-texto{ display:flex; gap:1rem; align-items:center;
                         flex:1; min-width:18rem }
.franja-urgencias p{ margin:0; font-size:var(--t-sm); line-height:1.5 }
.caja-destacada{ display:grid;
                 grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
                 gap:1.5rem; align-items:center; margin-top:2.5rem;
                 border:1px solid var(--resalta-texto); background:#FBF8F3;
                 padding:clamp(1.5rem,4vw,2.5rem) }
.caja-destacada p{ margin:0; font-family:var(--serif); font-weight:300;
                   font-size:var(--s-md); line-height:1.35 }
.caja-destacada .boton{ justify-self:start }

/* Causas. */
.tarjetas-causa{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
                 gap:.75rem; margin-top:2.5rem }
.tarjeta-causa{ background:var(--blanco); padding:1.6rem 1.5rem;
                display:flex; flex-direction:column; gap:.6rem }
.tarjeta-causa h3{ margin:0 }
.tarjeta-causa p{ margin:0; font-size:1.0625rem; line-height:1.55;
                  color:var(--texto-tenue) }
.tecnica .dividido-causas{ margin-top:3.5rem; align-items:center }
/* Los dos vuelven al centro de la columna, pero con mas aire entre
   ellos: repartidos a los extremos quedaban descolgados. */
@media (min-width:761px){
  .dividido-causas .cita-oro{ margin-top:3rem }
}
.cita-oro{ margin:1.25rem 0 0; border-left:3px solid var(--resalta-texto);
           padding-left:1.4rem; font-family:var(--serif); font-weight:300;
           font-size:var(--s-md); line-height:1.35; color:var(--grafito) }

/* Segundo intento. */
.cabeza-centrada{ max-width:56rem; margin-inline:auto; text-align:center }
/* En movil una cabecera centrada sobre contenido alineado a la
   izquierda se lee como un bloque suelto: ahi va alineada como el
   resto. */
@media (max-width:760px){
  .cabeza-centrada{ text-align:left }
}
/* Lo que viene detras de una cabecera centrada arrancaba a 32px del
   titular; con un bloque a dos columnas debajo se leia pegado. */
.cabeza-centrada + .dividido{ margin-top:clamp(2.5rem,4.5vw,4rem) }
.par-creencia{ display:grid;
               grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
               gap:1rem; margin-top:3rem }
.creencia{ background:var(--hueso); padding:2rem; display:flex;
           flex-direction:column; gap:.85rem }
.creencia-frase{ margin:0; font-family:var(--serif); font-weight:300;
                 font-size:var(--s-md); line-height:1.25;
                 color:var(--grafito); text-decoration:line-through;
                 /* Dorado a media tinta: a plena saturacion la raya pesaba
                    mas que la letra y la frase costaba de leer. */
                 text-decoration-color:rgba(143,104,16,.45);
                 text-decoration-thickness:1px }
.creencia p:last-child,
.detras p:last-child{ margin:0; font-size:var(--t-sm); line-height:1.6 }
.detras{ background:var(--grafito); color:var(--papel); padding:2rem;
         display:flex; flex-direction:column; gap:.85rem }
.detras .rotulo-mini{ color:var(--resalta) }
.detras .chip{ border-color:rgba(255,255,255,.28); color:#d8d2c8 }
.franja-base{ display:grid;
              grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
              gap:1rem; align-items:center; margin-top:1rem;
              padding:1.5rem 0; border-block:1px solid var(--borde) }
.franja-base p{ margin:0; font-size:var(--t-sm); line-height:1.6 }
/* Un apunte al cierre de una seccion: una pregunta corta y su respuesta,
   en texto corrido y separados del bloque de arriba por un filete. */
.apunte{ margin-top:4.5rem; padding-top:1.75rem; border-top:1px solid var(--borde);
         display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1fr);
         column-gap:clamp(1.5rem,4vw,3.5rem); row-gap:1.1rem; align-items:start }
.apunte h3{ margin:0; font-family:var(--serif); font-weight:300;
            font-size:var(--s-lg, 1.75rem); line-height:1.2 }
.apunte p{ margin:0; font-size:var(--t-md); line-height:1.7;
           color:var(--texto) }
/* Con imagen, las dos columnas se reparten a partes iguales: en la
   columna estrecha la foto se quedaba en un sello de 400 px al lado de
   un parrafo que ocupaba el doble. Solo en ordenador: apilado no hay
   columnas que repartir, y sin acotarlo esta regla ganaba por
   especificidad y dejaba la foto en 166 px. */
@media (min-width:761px){
  .apunte:has(.foto){ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
}
/* Si el apunte lleva imagen, la pregunta ocupa el primer renglon y
   debajo van la imagen y la respuesta, una al lado de la otra y a la
   misma altura. */
@media (min-width:761px){
  .apunte:has(.hueco) > h3,
  .apunte:has(.foto) > h3{ grid-column:1; grid-row:1 }
  .apunte:has(.hueco) > .hueco,
  .apunte:has(.foto) > .foto{ grid-column:1; grid-row:2; margin-top:0 }
  .apunte:has(.hueco) > p,
  .apunte:has(.foto) > p{ grid-column:2; grid-row:2 }
}
@media (max-width:760px){
  .apunte{ grid-template-columns:1fr; gap:.9rem }
  .apunte .hueco, .apunte .foto{ margin-top:1.5rem }
}
/* La frase que antes eran pastillas sueltas: mismo peso visual que el
   parrafo de al lado, pero en el cuerpo del texto corrido. */
.franja-base-frase{ margin:.6rem 0 0 !important; font-size:var(--t-md) !important;
                    line-height:1.55 }
.franja-base-frase strong{ font-weight:600; color:var(--grafito) }
.chip-mas{ background:var(--hueso); border-color:transparent;
           font-weight:500; color:var(--grafito); padding:.6rem .9rem }
.chip-mas::before{ content:"+ "; color:var(--resalta-texto) }

/* Plan de la solución. */
.pasos-tres{ grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)) }
.plan{ display:grid; gap:.6rem; margin:.25rem 0 .75rem }
.plan-caja{ background:#1E1E1E; padding:1rem 1.1rem; display:flex;
            flex-direction:column; gap:.35rem; font-size:var(--t-sm);
            line-height:1.5 }
.plan-caja-oro{ background:var(--resalta); color:var(--grafito) }
.plan-caja-oro .rotulo-mini{ color:#6B5118 }

/* Injerto. */
.chips-lino .chip{ background:var(--hueso); border-color:transparent;
                   padding:.5rem .9rem; color:var(--texto) }
/* Una tira de pastillas entre dos parrafos necesita su propio aire: sin
   esto quedaba pegada al texto de abajo. */
.chips-lino{ gap:.5rem; margin:1.25rem 0 1.75rem }
.par-salidas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
              gap:.75rem; margin:1.25rem 0 }
.salida{ border:1px solid var(--borde); padding:1.25rem; display:flex;
         flex-direction:column; gap:.5rem; font-size:var(--t-sm);
         line-height:1.5 }
.salida-negra{ border-color:var(--grafito) }

/* Prevención. */
.tarjetas-prevencion{ display:grid;
                      grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
                      gap:.75rem; margin-top:2.5rem }
.tarjeta-prevencion{ background:var(--blanco); padding:1.75rem 1.5rem;
                     display:flex; flex-direction:column; gap:.75rem }
.tarjeta-prevencion h3{ margin:0 }
.tarjeta-prevencion p{ margin:0; font-size:var(--t-sm); line-height:1.55;
                       color:var(--texto-tenue) }
.prevencion-alto{ display:flex; justify-content:space-between;
                  align-items:center; gap:.5rem }
.chapa{ border:1px solid var(--resalta); color:var(--resalta-texto);
        background:var(--hueso); font-family:var(--sans); font-size:.625rem;
        font-weight:600; letter-spacing:.16em; text-transform:uppercase;
        padding:.3rem .5rem }

@media (max-width:1120px){
  .tarjetas-causa{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:760px){
  .tarjetas-causa{ grid-template-columns:minmax(0,1fr) }
  .dos-causas{ grid-template-columns:minmax(0,1fr) }
  .causa-o{ justify-content:center }
  .celda-sintoma{ border-right:0; border-bottom:1px solid var(--borde) }
  .celda-sintoma:last-child{ border-bottom:0 }
  .franja-urgencias{ align-items:flex-start }
  .hero-urgencias{ justify-content:flex-start }
}

/* El sello de clínica certificada: tarjeta redondeada con la medalla
   del visto bueno a la izquierda y la flecha a la derecha. Es el único
   bloque del hero que enlaza a otra página. */
.sello{ display:grid; grid-template-columns:auto 1fr auto; gap:1rem;
        align-items:center; max-width:30rem; margin-top:2rem;
        padding:.9rem 1.15rem .9rem 1rem; background:var(--hueso);
        border:1px solid transparent; border-radius:14px;
        position:relative; overflow:hidden;
        text-decoration:none; color:var(--texto);
        transition:border-color .16s ease, background .16s ease }
/* El filete dorado de la izquierda es lo que la convierte en sello: sin
   el, con el fondo en blanco, se leia como una tarjeta cualquiera. */
.sello::before{ content:""; position:absolute; left:0; top:0; bottom:0;
                width:3px; background:var(--resalta-texto) }
.sello:hover{ border-color:var(--resalta); background:#EAE5DB }
/* La medalla lleva un aro dorado alrededor, como el cordon de un sello
   de lacre. El circulo solo, en negro, parecia un icono de aplicacion. */
.sello-medalla{ flex:none; width:42px; height:42px; border-radius:50%;
                background:var(--grafito); color:var(--resalta);
                box-shadow:0 0 0 4px rgba(230,214,184,.45);
                display:flex; align-items:center; justify-content:center;
                font-size:.95rem }
.sello-texto{ display:flex; flex-direction:column; gap:.1rem }
.sello-rotulo{ font-family:var(--sans); font-size:.625rem; font-weight:600;
               letter-spacing:.18em; text-transform:uppercase;
               color:var(--resalta-texto); margin-bottom:.25rem }
.sello-titulo{ font-family:var(--serif); font-weight:300; font-size:1.25rem;
               line-height:1.2; color:var(--grafito) }
.sello-pie{ margin-top:.2rem; font-size:.8125rem; line-height:1.4;
            color:var(--texto-tenue) }
/* La flecha va suelta, sin circulo: el circulo repetia la forma de la
   medalla y las dos se disputaban la mirada en una tarjeta de 480px. */
.sello-flecha{ flex:none; font-size:1rem; color:var(--resalta-texto);
               transition:transform .16s ease }
.sello:hover .sello-flecha{ transform:translateX(3px) }
/* En ordenador la tarjeta va al lado de un titular de 64px y con la
   letra de movil se quedaba pequena. */
@media (min-width:1121px){
  .sello-rotulo{ font-size:.6875rem }
  .sello-titulo{ font-size:1.375rem }
  .sello-pie{ font-size:.9375rem }
}

@media (max-width:760px){
  .sello{ max-width:none; gap:1rem; padding:1rem 1.1rem }
  .sello-flecha{ display:none }
}

}

/* El hueco de la portada sí enseña la medida: es el único que hay que
   encargar con un tamaño concreto. */
.hueco-medida{ align-items:center; justify-content:center; margin-top:0 }
.hueco-tamano{ font-family:var(--mono); font-size:var(--t-sm);
               color:var(--texto-tenue) }
/* Lo que debe ir en cada foto, dentro del propio hueco: la descripcion y
   la medida. Vacias no pintan nada, para que el hueco pueda ir tambien
   sin texto. */
/* `flex:none` porque dentro de una tarjeta de solucion los parrafos
   crecen para igualar alturas entre columnas; estirado, el texto del
   hueco subia hasta quedar debajo de la etiqueta y no se leia. */
.hueco-que{ flex:none; margin:0; max-width:42ch; font-size:var(--t-sm);
            line-height:1.5; color:var(--texto-tenue) }
.hueco-ficha{ flex:none; margin-top:auto; font-family:var(--mono);
              font-size:var(--t-xs); color:var(--titanio) }
.hueco-que:empty, .hueco-ficha:empty{ display:none }
/* La etiqueta deja de flotar y entra en la columna: asi no hay forma
   de que se solape con la descripcion, mida lo que mida. */
.hueco{ flex-direction:column; justify-content:flex-start; gap:.5rem }
.hueco-etiqueta{ position:static; align-self:flex-start }
.banda .hueco-que{ color:#cfc8bd }
.banda .hueco-ficha{ color:var(--resalta) }


/* --- comparativa de dos flujos (carga inmediata) ---------------------
   Dos cajas una al lado de la otra con la secuencia del tratamiento
   dentro: la clasica en blanco, con el hilo punteado de la espera, y la
   nuestra en negro. El contraste de fondo es el que cuenta el mensaje,
   asi que no se puede resolver con chips en las dos. */
.comparativa{ display:grid;
              grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));
              gap:1rem; margin-top:3rem; align-items:stretch }
.comparativa-caja{ background:var(--blanco); padding:1.85rem;
                   display:flex; flex-direction:column; gap:1.15rem }
.comparativa-caja .rotulo-mini{ font-size:.8125rem }
.comparativa-caja-negra{ background:var(--grafito); color:var(--papel) }
.comparativa-caja-negra .rotulo-mini{ color:var(--resalta) }
.comparativa-linea{ display:flex; align-items:center; gap:.6rem;
                    flex-wrap:wrap }
/* Las dos lineas de tiempo del tratamiento: a 14px se leian como pie de
   foto al lado del texto corrido de 19. */
.pieza{ background:var(--hueso); padding:.65rem .9rem;
        font-size:1.0625rem; line-height:1.3 }
.pieza-oro{ background:var(--resalta); color:var(--grafito); font-weight:500 }
.pieza-linea{ background:none; border:1px solid #555; color:var(--papel) }
/* El hilo se estira con lo que sobra: es lo que dibuja la espera. */
.hilo{ flex:1; min-width:2.5rem; border-top:2px dashed var(--borde) }
.comparativa-caja-negra .hilo{ border-top-style:solid; border-top-color:#444 }
.comparativa-caja-negra .espera{ color:#cfc8bd }
/* En ordenador la secuencia va en un solo renglon: partida, «Definitiva»
   cae sola debajo y deja de leerse como el final de la linea. Los hilos
   ceden el espacio que haga falta. */
/* El umbral es 1200 y no 1121: a 15px la secuencia de la caja oscura
   pide 488px y entre 1121 y 1199 la caja solo da 473, asi que ahi se
   deja partir en dos renglones en vez de desbordar. */
@media (min-width:1200px){
  .comparativa-linea{ flex-wrap:nowrap }
  .comparativa-linea .pieza{ white-space:nowrap }
  .comparativa-linea .espera{ white-space:nowrap }
  /* La caja oscura lleva mas texto en la misma linea, asi que baja un
     escalon respecto a la clara; a 13px quedaba muy por debajo. */
  .comparativa-caja-negra .pieza{ font-size:var(--t-sm) }
  .comparativa-caja-negra .espera{ font-size:var(--t-sm) }
  .comparativa-linea .hilo{ min-width:1rem }
}
@media (max-width:760px){
  /* Apilada: cada paso en su renglon y el hilo convertido en un tramo
     vertical que los encadena. En horizontal, al partirse, los hilos
     quedaban colgando al final de la linea y no se entendia el orden. */
  /* Con la secuencia apilada y centrada, el rotulo de la caja tambien va
     al centro: alineado a la izquierda quedaba descolgado. */
  .comparativa-caja{ align-items:center; text-align:center }
  .comparativa-linea{ flex-direction:column; align-items:stretch; gap:.35rem }
  .comparativa-linea .pieza{ width:100%; text-align:center }
  .comparativa-linea .espera{ width:100%; text-align:center; padding:.15rem 0 }
  .comparativa-linea .hilo{ flex:none; width:2px; min-width:0; height:16px;
                            margin-left:calc(50% - 1px);
                            border-top:0; border-left:2px dashed var(--borde) }
  .comparativa-caja-negra .hilo{ border-left-style:solid; border-left-color:#444 }
}
.espera{ font-size:1.0625rem; color:var(--texto-tenue) }

/* Un dato tachado al lado del que lo sustituye: 24 h frente a 12 h, la
   prisa frente a la estabilidad. El tachado va en dorado para que se
   lea como correccion y no como error. */
.relevo{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
         margin-top:clamp(2.25rem,3.5vw,3rem) }
.relevo-caja{ border:1px solid #444; padding:.9rem 1.15rem;
              display:flex; flex-direction:column; gap:.15rem }
.relevo-caja-oro{ background:var(--resalta); border-color:var(--resalta);
                  color:var(--grafito) }
.relevo-dato{ font-family:var(--serif); font-size:1.875rem; line-height:1 }
.relevo-caja:not(.relevo-caja-oro) .relevo-dato{ color:var(--titanio-claro);
              text-decoration:line-through;
              text-decoration-color:var(--resalta);
              /* Fina: a 30px de serif, una raya gruesa tapa media letra y
                 el dato tachado deja de leerse. */
              text-decoration-thickness:1px }
.relevo-flecha{ color:var(--resalta); font-size:1.25rem }
/* El parrafo que sigue al bloque 24 h → 12 h: arrancaba pegado a las
   cajas, a cero. */
.relevo + p{ margin-top:1.5rem }
@media (min-width:761px){
  .relevo + p{ margin-top:2rem }
}
/* En claro, el mismo recurso sin caja: solo las dos palabras. */
.relevo-claro .relevo-caja{ border:0; padding:0 }
.relevo-claro .relevo-dato{ font-size:1.625rem }
.relevo-claro .relevo-caja:not(.relevo-caja-oro) .relevo-dato{
              color:var(--texto-tenue); text-decoration-thickness:1px }
.relevo-claro .relevo-caja-oro{ background:none; color:var(--texto) }
.relevo-claro .relevo-flecha{ color:var(--resalta-texto) }

/* Las dos fichas del «no confundir» van enmarcadas, no sueltas sobre el
   fondo: es un cara a cara, y sin borde las dos mitades se leian como un
   texto corrido. La de la derecha lleva el borde negro porque es la que
   da nombre a la pagina. */
.causa-ficha{ background:none; border:1px solid var(--borde); gap:.9rem }
.causa-ficha-fuerte{ border:1px solid var(--grafito) }
.causa-alto{ display:flex; justify-content:space-between; align-items:center;
             gap:.75rem; flex-wrap:wrap; width:100% }
.causa-nota{ font-size:var(--t-sm); color:var(--texto-tenue) }
.causa-ficha p{ font-size:var(--t-md); color:var(--texto) }

/* Franja de «son combinables»: chapa negra, las tres piezas con sus
   signos y el resultado. Los signos van fuera de las piezas, como en el
   diseno, para que se lea como una suma y no como tres etiquetas. */
.suma{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap }
.suma-signo{ color:var(--resalta-texto) }
.suma-total{ font-weight:600 }

/* La respuesta grande de la pagina de carga inmediata: va por encima del
   h2, no por debajo, porque es la frase que cierra la pregunta. Y el oro
   sobre fondo claro tiene que ser el de texto (#8F6810): el claro es
   para fondos negros y aqui se quedaba en 1,4:1, ilegible. */
.frase-respuesta{ display:block; margin-top:1.25rem;
                  font-family:var(--serif); font-weight:300;
                  font-size:clamp(2.5rem, 4.4vw, 3.75rem); line-height:1.05;
                  color:var(--grafito) }
.frase-respuesta .oro{ color:var(--resalta-texto) }

/* Las dos cajas de requisitos, como en el diseno: las dos en blanco, sin
   marco, y lo unico que las distingue es el filete de arriba (oro /
   negro) y la chapa. La version gris de .caja-lista-no es de otra
   pagina; aqui las dos pesan lo mismo. */
.caja-lista-limpia{ border:0; background:var(--blanco) }
.caja-lista-limpia.caja-lista-si{ border-top:4px solid var(--resalta-texto) }
.caja-lista-limpia.caja-lista-no{ border-top:4px solid var(--grafito) }
.caja-lista-limpia.caja-lista-no li{ color:var(--texto) }
.chapa-negra{ background:var(--grafito); border-color:var(--grafito);
              color:var(--papel) }
/* El cierre de la caja de contraindicaciones, en gris y pequeno. */
.caja-lista-pie{ margin:1rem 0 0; font-size:var(--t-sm); line-height:1.6;
                 color:var(--texto-tenue) }

/* Los pasos de la pagina de carga inmediata, como en el diseno: filete
   dorado arriba, el numero dentro de un circulo dorado y el titulo al
   lado. Es una variante de .pasos, no un bloque nuevo. */
.pasos-circulo .paso{ border-top:2px solid var(--resalta); padding-top:1.6rem }
.pasos-circulo .paso-alto{ display:flex; align-items:center; gap:.9rem;
                           margin-bottom:.9rem }
.pasos-circulo .paso-num{ flex:none; width:46px; height:46px; margin:0;
                          border-radius:50%; background:var(--resalta);
                          color:var(--grafito); display:flex;
                          align-items:center; justify-content:center;
                          font-size:1.25rem }
.pasos-circulo .paso h3{ margin:0 }

/* La objecion clasica, en su propia caja dentro de la banda negra: sobre
   el negro un filete lateral no se ve, y el bloque necesitaba separarse
   del texto que lo rodea. */
.caja-objecion{ background:#1E1E1E; padding:1.4rem 1.5rem; margin:1.75rem 0;
                display:flex; flex-direction:column; gap:.5rem }
.caja-objecion p{ margin:0; font-family:var(--serif); font-weight:300;
                  font-size:var(--s-md); line-height:1.35;
                  color:var(--papel) }

/* Los factores del precio, en blanco sobre el fondo hueso. */
.factores-blancas .factor{ background:var(--blanco); border-color:transparent }

/* --- segunda opinion -------------------------------------------------
   La franja de tres promesas bajo los botones del hero: sin compromiso,
   sin juicios, confidencial. Es lo que quita el miedo a pedir cita, asi
   que va antes que la imagen. */
.promesas{ display:flex; gap:.75rem 2rem; flex-wrap:wrap;
           justify-content:center; margin:1.75rem 0 0;
           font-size:var(--t-sm); color:var(--texto-tenue) }
.promesa{ display:inline-flex; gap:.5rem; align-items:center }
.promesa::before{ content:"\2713"; color:var(--resalta-texto); font-weight:600 }

/* La lista con la que se revisa un presupuesto. Cabecera negra, filas
   con su casilla y un pie a dos columnas: es una herramienta que la
   persona puede llevarse, no un parrafo mas. */
.checklist{ border:1px solid var(--grafito); background:var(--blanco) }
.checklist-alto{ display:flex; justify-content:space-between; gap:.75rem;
                 flex-wrap:wrap; background:var(--grafito); color:var(--resalta);
                 padding:1rem 1.5rem; font-family:var(--sans);
                 font-size:.6875rem; font-weight:600; letter-spacing:.18em;
                 text-transform:uppercase }
.checklist-alto span:last-child{ color:#a9a296 }
.checklist-fila{ display:flex; gap:1rem; align-items:flex-start;
                 padding:1.15rem 1.5rem; border-top:1px solid var(--borde);
                 font-size:var(--t-md); line-height:1.5 }
.checklist-casilla{ flex:none; width:24px; height:24px;
                    border:1.5px solid var(--resalta); color:var(--resalta-texto);
                    display:flex; align-items:center; justify-content:center;
                    font-size:.8125rem }
.checklist-pie{ display:grid;
                grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
                gap:1rem; background:var(--hueso); padding:1.4rem 1.5rem;
                font-size:var(--t-sm); line-height:1.55 }
.checklist-pie div{ display:flex; flex-direction:column; gap:.4rem }

/* Los tres datos del doctor sobre fondo claro: la version oscura
   (.ficha-dato) es para las bandas negras. */
.fichas-claras .ficha-dato{ background:var(--blanco);
                            border:1px solid var(--borde) }
.fichas-claras .ficha-cifra{ font-size:1.875rem; color:var(--resalta-texto) }
.fichas-claras .ficha-pie{ color:var(--texto-tenue) }

/* Dos ajustes de aire en la pagina de carga inmediata: el parrafo de la
   izquierda arrancaba pegado a la frase grande mientras la caja de al
   lado empezaba mas abajo, y la tabla de la protesis nacia pegada a su
   titular. */
#osteointegracion .dividido > p:first-child{ margin-top:2.5rem }
#protesis .tabla-marco{ margin-top:3rem }
/* Y lo mismo en la comparativa de subperiosticos: la tabla nacia pegada
   a su titular. */
#diferencias .tabla-marco{ margin-top:3rem }

/* Las tres fichas del doctor llevan frase entera, no una palabra suelta:
   «Medir / la estabilidad» partido en dos lineas no se entendia. */
.ficha-dr .ficha-cifra{ font-size:1.375rem; line-height:1.25 }
/* El pie de las fichas iba a 13px y en gris apagado sobre negro: se leia
   mal justo donde estan los datos que dan confianza. */
.ficha-dr .ficha-pie{ margin-top:.5rem; font-size:1rem;
                      color:#cfc8bd }

/* El enlace que cierra el bloque del doctor iba pegado a las fichas. */
.fichas-dato + p,
.fichas-dr + p{ margin-top:1.75rem }

/* --- servicios complementarios --------------------------------------
   Las cuatro tarjetas del hero son enlaces a las secciones de la misma
   pagina: hacen de indice sin serlo. La de urgencias va en negro porque
   es la unica que se usa con prisa. */
.servicios{ display:grid;
            grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
            gap:.75rem; margin-top:3.5rem }
.servicio{ display:flex; flex-direction:column; gap:.85rem;
           background:var(--hueso); padding:1.6rem 1.5rem;
           min-height:10.5rem; text-decoration:none; color:var(--texto);
           transition:outline-color .16s ease;
           outline:1px solid transparent; outline-offset:-1px }
.servicio:hover{ outline-color:var(--grafito) }
.servicio-alto{ display:flex; justify-content:space-between;
                align-items:center }
.servicio-flecha{ color:var(--resalta-texto) }
.servicio-titulo{ font-family:var(--serif); font-weight:300;
                  font-size:1.5rem; line-height:1.15; flex:1 }
.servicio-pie{ font-size:var(--t-sm); color:var(--texto-tenue) }
.servicio-oscuro{ background:var(--grafito); color:var(--papel) }
.servicio-oscuro .servicio-pie{ color:#cfc8bd }

/* Lista de prestaciones sobre fondo blanco, con su marca. */
.lista-blanca{ background:var(--blanco) }
.lista-blanca div{ display:flex; gap:1rem; align-items:flex-start;
                   padding:1.1rem 1.4rem; border-top:1px solid var(--borde);
                   font-size:var(--t-md); line-height:1.5 }
.lista-blanca div:first-child{ border-top:0 }

/* La caja del telefono de urgencias: la unica pieza en oro macizo de la
   web, porque es la unica que se usa con dolor. */
.caja-telefono{ background:var(--resalta); color:var(--grafito);
                padding:clamp(1.75rem,4vw,3rem); display:flex;
                flex-direction:column; gap:.9rem }
.caja-telefono .rotulo-mini{ color:#6B5118 }
.telefono-grande{ font-family:var(--serif); font-weight:300;
                  font-size:clamp(2.75rem,5vw,4rem); line-height:1;
                  color:var(--grafito); text-decoration:none;
                  white-space:nowrap }
.telefono-datos{ display:flex; gap:.6rem 1.25rem; flex-wrap:wrap;
                 font-size:var(--t-sm); font-weight:500 }
.telefono-pie{ border-top:1px solid #C9A45C; padding-top:.9rem;
               font-size:var(--t-sm); line-height:1.5 }
.caja-telefono .boton{ background:var(--grafito); color:var(--papel);
                       border-color:var(--grafito); text-align:center }
/* La caja va dentro de la banda negra, que pinta el texto en blanco:
   sobre el oro habia que devolverlo al negro o no se leia. */
.caja-telefono,
.caja-telefono p,
.caja-telefono span,
.caja-telefono a{ color:var(--grafito) }
.caja-telefono .rotulo-mini{ color:#6B5118 }
.caja-telefono .boton{ color:var(--papel) }

/* Un h1 de dos palabras aguanta mas cuerpo que uno de doce: en esa
   pagina el titular es corto y a 49px se quedaba pequeno en el centro
   de la pantalla. En movil manda la regla de siempre. */
/* Los titulares que no son de tratamiento: servicios complementarios y
   el blog. Van a 55 en vez de a los 49 de las paginas de servicio —son
   titulos cortos, de una o dos lineas, y a 49 se quedaban pequeños en
   una pagina sin bajada—. Los dos comparten esta regla para que no
   vuelvan a separarse. */
.hero.hero-corto h1{ font-size:clamp(2rem, 4.05vw, 3.4375rem) }
@media (max-width:760px){ .hero.hero-corto h1{ font-size:38px } }

/* El lema del hero de segunda opinion: serif en cursiva y mas grande que
   el cuerpo, para que haga de entrada y no se confunda con el parrafo
   que viene detras. */
.hero-cuerpo .hero-lema{ margin:-.9rem 0 1.25rem;
                         font-size:clamp(1.5rem, 2.2vw, 1.875rem);
                         color:var(--resalta-texto) }

/* Cuando la frase entera tiene que ser el h1 (por SEO) pero se quiere
   ver como titular + lema, el lema va dentro del h1 como bloque: mismo
   aspecto, una sola etiqueta. */
.hero h1 .hero-lema{ display:block; margin:1.25rem 0 0;
                     font-family:var(--serif); font-style:italic;
                     font-weight:300; line-height:1.35;
                     font-size:clamp(1.5rem, 2.2vw, 1.875rem);
                     color:var(--resalta-texto) }

/* --- ficha de sede (Valencia, y manana Gandia) -----------------------
   Media pantalla de foto y media de datos: direccion, horario, telefonos
   y el enlace al mapa. El mapa no va embebido: un iframe de Google mete
   cookies de terceros antes de que nadie acepte nada. */
.sede-ficha{ display:grid;
             grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
             gap:clamp(1.5rem,3vw,3rem); align-items:stretch; margin-top:3rem }
.sede-datos{ background:var(--blanco); border:1px solid var(--borde);
             padding:clamp(1.75rem,3vw,2.5rem); display:flex;
             flex-direction:column; gap:1.25rem }
.sede-datos dl{ margin:0; display:grid; gap:.9rem }
.sede-datos dt{ font-family:var(--sans); font-size:var(--t-rotulo);
                font-weight:600; letter-spacing:.16em; text-transform:uppercase;
                color:var(--resalta-texto) }
.sede-datos dd{ margin:.25rem 0 0; font-size:var(--t-md); line-height:1.55 }
.sede-datos .boton{ text-align:center }

/* El sello y la direccion, centrados, cuando el hero es el de las
   paginas de servicio. */
.hero-centrado .sello{ margin-inline:auto }
.hero-centrado .hero-sedes{ justify-content:center }
.hero-centrado .escena{ margin-top:3rem }

/* El mapa de la sede. Va dentro de la ficha, arriba del todo, y en gris
   para que no compita con la foto de al lado. Es un iframe de Google:
   pone cookies de terceros, asi que tiene que quedar cubierto por el
   aviso de cookies antes de publicar. */
.sede-mapa{ width:100%; height:240px; border:0; display:block;
            filter:grayscale(.6); margin:-1px 0 .5rem }
.sede-mapa-dr{ height:200px; margin:0; filter:grayscale(1) contrast(1.05) }

/* --- piezas de la pagina de Valencia ---------------------------------
   Las tres vias, en filas dentro de una caja oscura: cada una con su
   nombre y su etiqueta a la derecha. Es una lista, no tres tarjetas: lo
   que importa es que se lean seguidas. */
.vias{ display:flex; flex-direction:column; gap:1px; background:#333;
       border:1px solid #333 }
/* La tabla arranca 19px mas arriba que el texto de al lado: su primera
   fila mide 32 de interlineado y la cita de la izquierda 24, asi que
   pegadas por el borde superior las dos primeras lineas no cuadran.
   Solo en ordenador, que es donde van una al lado de la otra. */
@media (min-width:761px){
  .dividido > .vias{ margin-top:19px }
}

/* La segunda mitad del titular del antes y despues: va en su propio
   renglon y con la franja beige, para que la pregunta y la respuesta se
   lean como dos tiempos dentro de un mismo h2. El hueco es el mismo que
   separa las dos frases en la portada: 60px en ordenador, 56 en movil. */
/* Una seccion de texto corrido, sin tarjetas ni fotos, necesita mas
   aire arriba y abajo que una llena de piezas: con el relleno normal la
   franja quedaba estrecha para lo ancha que es. */
.seccion.seccion-holgada{ padding-top:clamp(4rem,8vw,7.5rem);
                          padding-bottom:clamp(4rem,8vw,7.5rem) }
/* Y el texto de dentro con dos escalones, que si no en movil salen dos
   parrafos del mismo cuerpo, uno detras de otro, y se lee como un muro:
   la entradilla sube un punto y el cierre va de cita, con su filete. */
/* En ordenador la entradilla va al cuerpo del texto corrido; en movil
   se queda un punto por encima, que es lo que separa los dos parrafos
   cuando van apilados. */
.seccion-holgada .entradilla{ font-size:var(--t-md); line-height:1.7 }
@media (max-width:760px){
  .seccion-holgada .entradilla{ font-size:var(--t-lg); line-height:1.65 }
}
/* La foto del equipo debajo del titular, en la columna que quedaba
   vacia. Va detras del h2 en el documento, asi que en movil aparece
   entre el titular y el texto sin tocar el orden de lectura. */
/* La foto ocupa su columna entera, sin margen: el titular vive en la
   columna de al lado, con el texto. */
.escena-apoyo{ margin:0 }
@media (min-width:761px){
  /* Arriba y no centrado: la primera linea del titular a la altura del
     borde de la foto. Sin compensaciones: con el margen negativo el h2
     se salia por encima de la imagen. */
  .seccion-holgada .dividido{ align-items:start }
  /* Cuando la columna de al lado es un hueco de imagen —mas alto que el
     texto— el grupo se centra frente a el; con la foto del equipo, que
     es apaisada, el texto sigue arrancando arriba. */
  .seccion-holgada .dividido:has(> div > .hueco),
  .seccion-holgada .dividido:has(> div > .foto),
  .seccion-holgada .dividido:has(> div > .giro){ align-items:center }
  /* El hueco de imagen trae 2,5rem de margen para cuando va suelto entre
     bloques; al lado de un titular tiene que arrancar a su altura. */
  .seccion-holgada .dividido > div > .hueco:first-child,
  .seccion-holgada .dividido > div > .foto:first-child,
  .seccion-holgada .dividido > div > .giro:first-child{ margin-top:0 }
  .seccion-holgada h2{ margin-bottom:1.5rem }
}
@media (max-width:760px){
  /* Apilado, la foto va al final del bloque, detras de la cita. Las dos
     columnas se deshacen con display:contents para que el titular, los
     dos textos y la foto sean hermanos y se puedan ordenar. */
  /* Solo los envoltorios de texto se deshacen: un .hueco o un bloque con
     fondo propio perderia su caja. */
  .seccion-holgada .dividido > div:not(.hueco):not(.caminos){ display:contents }
  /* Deshecho el envoltorio, la foto es hermana del titular: ocupa el
     sitio que tenia el hueco al que sustituye. */
  /* Apilado: primero el titular, luego la imagen y por ultimo el texto.
     La foto del equipo de Valencia es la excepcion —va al final— porque
     ahi cierra el bloque en vez de ilustrarlo. */
  .seccion-holgada .dividido > div > h2{ order:-1 }
  .seccion-holgada .escena-apoyo{ order:1; margin-top:2.25rem }
  /* El video del testimonio va DESPUES de la explicacion, no antes: es
     la prueba de lo que acaba de leerse, y delante solo retrasaria la
     respuesta. Las fotos siguen yendo detras del titular. */
  .seccion-holgada .dividido > div > .pelicula{ order:1; margin-top:2.25rem }
  .seccion-holgada .dividido > div > .hueco,
  .seccion-holgada .dividido > div > .foto,
  .seccion-holgada .dividido > div > .giro{ margin-top:1.75rem }
  .seccion-holgada h2{ margin-bottom:1.5rem }
}
.seccion-holgada .cita-bloque{ border-left-color:var(--resalta);
                               margin:3.25rem 0 0 }
/* Sobre la banda oscura el filete de la cita es negro sobre negro: no se
   ve, y lo unico que queda es la sangria, que parece un error. En
   ordenador el filete pasa al beige; en movil se quita entero y la cita
   se alinea con el resto del texto. */
.banda .cita-bloque{ border-left-color:var(--resalta) }
@media (max-width:760px){
  .banda .cita-bloque{ border-left:0; padding-left:0 }
}

.renglon-respuesta{ display:block; margin-top:3.75rem }
/* La franja se dibuja sola al llegar a la seccion, igual que en la
   portada. El JS marca este h2 con .revelar/.visible porque es hijo
   directo del bloque .dividido. Por defecto la franja va ENTERA: solo
   se encoge cuando el JS ha marcado el titular, para que un fallo deje
   la marca puesta y no invisible. */
.pregunta-caso.revelar .renglon-respuesta .resaltado{ background-size:0 .22em }
.pregunta-caso.revelar.visible .renglon-respuesta .resaltado{
  background-size:100% .22em;
  transition:background-size .85s cubic-bezier(.22,.61,.36,1) .45s }
@media (prefers-reduced-motion:reduce){
  .pregunta-caso.revelar .renglon-respuesta .resaltado{
    background-size:100% .22em; transition:none } }
@media (max-width:760px){
  .renglon-respuesta{ margin-top:3.5rem }
}
.via{ display:flex; justify-content:space-between; gap:1rem;
      align-items:center; flex-wrap:wrap;
      background:var(--grafito); color:var(--papel);
      padding:1.15rem 1.25rem; font-size:var(--t-md) }
.via-etiqueta{ font-size:var(--t-sm); color:#a9a296 }
.via-marca{ background:var(--resalta); color:var(--grafito);
            font-family:var(--sans); font-size:.625rem; font-weight:600;
            letter-spacing:.14em; text-transform:uppercase; padding:.3rem .5rem }

/* Boton de linea dorada, para la banda negra. */
.boton-oro-linea{ background:none; color:var(--resalta);
                  border:1px solid var(--resalta) }
.boton-oro-linea:hover{ background:var(--resalta); color:var(--grafito) }

/* Las cuatro pruebas del «como elegir», sobre lino. */
.factores-lino .factor{ background:var(--hueso); border-color:transparent;
                        padding:1.5rem 1.4rem; gap:.65rem }
.factores-lino .servicio-titulo{ font-size:1.9375rem; color:var(--resalta-texto) }
.factores-lino .servicio-pie{ font-size:var(--t-md) }
@media (max-width:760px){
  /* En dos columnas de 165px, «Certificación» a 31px llegaba al borde. */
  .factores-lino .servicio-titulo{ font-size:1.5rem }
}

/* Lo que un presupuesto puede no incluir: la cruz lo dice antes que el
   texto. */
.chip-no::before{ content:"\2715"; color:var(--resalta-texto);
                  margin-right:.45rem }

/* Aviso con circulo negro, para la advertencia del precio por telefono. */
.aviso-circulo{ display:flex; gap:1rem; align-items:flex-start;
                margin-top:1.25rem }
.aviso-circulo span:first-child{ flex:none; width:30px; height:30px;
                margin-top:.15rem; border-radius:50%; background:var(--grafito);
                color:var(--resalta); display:flex; align-items:center;
                justify-content:center; font-weight:600;
                font-size:var(--t-sm) }
.aviso-circulo p{ margin:0 }

/* La nota media de Google, al lado del titular de opiniones. */
.cabeza-opiniones{ display:flex; justify-content:space-between;
                   align-items:flex-end; gap:1.5rem; flex-wrap:wrap }
/* Las opiniones, al modo de la ficha incrustada de Google: a la
   izquierda la tarjeta con la nota y el enlace a la ficha, a la derecha
   el carrusel de resenas. */
.opiniones-google{ display:grid;
                   grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
                   gap:clamp(1.5rem,3vw,2.5rem); align-items:start;
                   margin-top:clamp(2rem,3.5vw,3rem) }
.ficha-google{ background:var(--hueso); padding:1.75rem;
               display:flex; flex-direction:column; gap:.4rem }
.ficha-google-nombre{ margin:0; font-weight:600; color:var(--grafito);
                      line-height:1.35 }
.ficha-google-nota{ margin:.35rem 0 0; display:flex; align-items:center;
                    gap:.6rem; font-family:var(--serif); font-weight:300;
                    font-size:2rem; line-height:1; color:var(--grafito) }
.ficha-google-estrellas{ color:var(--resalta-texto); font-size:1.125rem;
                         letter-spacing:.1em }
.ficha-google-pie{ margin:0; font-size:var(--t-sm); color:var(--texto-tenue) }
.ficha-google-marca{ margin:0 0 .9rem; font-size:var(--t-xs);
                     letter-spacing:.14em; text-transform:uppercase;
                     color:var(--titanio) }
.ficha-google .boton{ align-self:start }
@media (max-width:760px){
  .opiniones-google{ grid-template-columns:1fr }
}

.nota-google{ background:var(--hueso); padding:1rem 1.25rem; display:flex;
              gap:.9rem; align-items:center }
.nota-google-cifra{ font-family:var(--serif); font-weight:300;
                    font-size:2.25rem; line-height:1 }
.nota-google-pie{ display:flex; flex-direction:column; gap:.15rem;
                  font-size:var(--t-sm); color:var(--texto-tenue) }
.nota-google-estrellas{ color:var(--resalta-texto); letter-spacing:.12em }

/* La franja que manda a Gandia, debajo de la ficha de la sede. */
.franja-sede{ display:flex; gap:1rem 1.5rem; align-items:center;
              flex-wrap:wrap; background:var(--blanco); padding:1.4rem 1.6rem;
              margin-top:1rem; font-size:var(--t-md); line-height:1.6 }
.franja-sede p{ margin:0; flex:1; min-width:16rem }

/* La foto grande de la sede y las tres pequeñas debajo. */
.sede-fotos{ display:grid; gap:.5rem; align-content:start }
/* Tantas columnas como fotos haya: con tres fijas y solo dos fotos
   quedaba un tercio vacio a la derecha. */
.sede-tiras{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
             gap:.5rem }
.sede-tiras .hueco, .sede-tiras .foto{ margin-top:0 }

/* Las dos cajas enfrentadas del "nosotros al reves": la de la derecha va
   en negro, que es la que sostiene el argumento. */
.dos-causas-enfrentadas{ margin-top:2.5rem }
.causa-ficha-negra{ background:var(--grafito); color:var(--papel);
                    border-color:var(--grafito) }
.causa-ficha-negra .rotulo-mini{ color:var(--resalta) }
.causa-ficha-negra p{ color:#cfc8bd }
/* El recuadro del presupuesto lleva filete negro a la izquierda. */
#precio .caja-presupuesto{ border-left:3px solid var(--grafito) }

/* --- sello de lacre ---------------------------------------------------
   El certificado, dibujado como un sello en seco: aro con el texto
   girado, punteado interior y el visto en un circulo negro. Va sin caja
   ni fondo, apoyado en el blanco del hero, para que parezca estampado y
   no un boton mas. */
.sello-lacre{ display:grid; grid-template-columns:auto 1fr; gap:.6rem;
              align-items:center; max-width:34rem; margin-top:2rem;
              padding:0; background:none; border:0; box-shadow:none;
              text-decoration:none; color:var(--texto) }
.sello-lacre::before{ content:none }
.sello-lacre:hover{ background:none; border:0 }
.lacre{ flex:none; width:clamp(60px, 4.7vw, 68px); display:block;
        color:var(--grafito) }
/* Sin sombra: el halo gris que dejaba alrededor del aro se leia como un
   fondo, y el sello va estampado sobre el papel, no flotando. */
.lacre svg{ width:100%; height:auto; display:block }
.lacre-borde{ fill:var(--blanco); stroke:var(--grafito); stroke-width:2 }
.lacre-punteado{ fill:none; stroke:var(--grafito); stroke-width:1.5;
                 stroke-dasharray:1 5; stroke-linecap:round }
.lacre-texto{ font-family:var(--sans); font-size:13.5px; font-weight:600;
              letter-spacing:.16em; fill:var(--grafito) }
.lacre-centro{ fill:var(--grafito) }
.lacre-visto{ fill:none; stroke:var(--papel); stroke-width:8;
              stroke-linecap:round; stroke-linejoin:round }
/* Las tres lineas del sello van juntas: son un solo rotulo a tres
   renglones, no tres parrafos sueltos. */
.sello-lacre .sello-texto{ gap:.04rem }
.sello-lacre .sello-titulo{ font-size:1.25rem; line-height:1.2;
                            font-weight:400 }
.sello-lacre .sello-pie{ font-size:.9375rem; color:var(--texto-tenue) }
.oro-texto{ color:var(--resalta-texto) }
.sello-mas{ margin-top:.55rem; font-family:var(--sans); font-size:var(--t-sm);
            font-weight:600; letter-spacing:.14em; text-transform:uppercase;
            display:inline-flex; gap:.5rem; align-items:center }
.sello-lacre:hover .sello-mas span{ transform:translateX(3px) }
.sello-mas span{ transition:transform .16s ease }
/* En movil el sello sigue al lado del texto, no encima: apilado ocupaba
   188px de alto y partia el hero en dos. Se encoge el sello y el texto
   se estrecha, pero la lectura es la misma. */
@media (max-width:760px){
  .sello-lacre{ grid-template-columns:auto 1fr; gap:.6rem; align-items:center;
                margin-top:3.5rem }
  .lacre{ width:64px }
  .sello-lacre .sello-titulo{ font-size:1.125rem }
  .sello-lacre .sello-pie{ font-size:.9375rem }
}

/* ----------------------------------------------------------------
   El hero de la pagina de Valencia. Es la puerta de entrada del negocio
   local —lo que enlaza la ficha de Google— y va mas suelto que el de las
   paginas de servicio: mas cuerpo en el titular y mas aire entre las
   cuatro piezas, al modo de la portada. */
.hero.hero-valencia h1{ font-size:clamp(2rem, 3.9vw, 3.3125rem) }
/* Los cuatro elementos del hero, con aire de verdad entre ellos: el
   lema arrastra un margen negativo pensado para titulares de dos lineas
   y dejaba el bloque apelmazado. */
.hero.hero-valencia .hero-cuerpo{ margin-top:2.25rem }
.hero.hero-valencia .hero-lema{ margin-top:0; margin-bottom:2rem }
.hero.hero-valencia .hero-acciones{ margin-top:3.25rem }
/* Un enlace dentro del texto que no se marca con la raya: lo que lo
   distingue es la negrita, y al pasar por encima el dorado de marca. */
.hero-cuerpo a.enlace-limpio{ color:inherit; text-decoration:none }
.hero-cuerpo a.enlace-limpio:hover{ color:var(--resalta-texto) }
@media (max-width:760px){
  .hero.hero-valencia{ padding-top:64px; padding-bottom:72px }
  .hero.hero-valencia h1{ font-size:38px }
  .hero.hero-valencia .hero-cuerpo{ margin-top:2.25rem }
  /* El lema arrastra un margen negativo pensado para h1 de dos lineas;
     aqui dejaba solo 11px bajo el titular. */
  .hero.hero-valencia .hero-lema{ margin-top:0; margin-bottom:2.5rem }
  .hero.hero-valencia .hero-acciones{ margin-top:3.25rem }
}

/* El rotulillo del sello, al hilo del resto del bloque. */
.sello-lacre .sello-rotulo{ font-size:.75rem }


/* ================================================================
   BLOG
   El indice y las entradas. Todo lo que hay aqui sale del diseno de
   Claude Design, traducido a los tokens de la casa: ni un color ni un
   tamano sueltos. Va al final del archivo a proposito —las reglas de
   movil de aqui tienen que ganar a las de arriba, y con la misma
   especificidad gana la ultima.
   ================================================================ */

/* --- indice: cabecera --- */
/* La cabecera del blog usa las mismas clases que la de servicios
   complementarios, asi que hereda letra, cuerpo y relleno: el titular
   cae exactamente donde cae el de las demas paginas. */
.hero.blog-hero{ padding-bottom:clamp(2.5rem,4vw,3.5rem) }
/* Centrada: el titular dice de que va y debajo vienen los temas, asi
   que no hay segunda columna que equilibrar. */
.blog-hero-centro{ display:flex; flex-direction:column; align-items:center;
                   text-align:center }
.blog-hero h1{ max-width:22ch }
.blog-hero .blog-extracto{ margin-top:1.4rem; max-width:46ch }
/* La entradilla del blog y la de una entrada son la misma pieza: el
   parrafo grande que resume de que va lo que viene debajo. */
.blog-extracto{ margin:0; font-size:var(--tam-lead); line-height:1.6;
                   color:var(--texto); max-width:34rem; text-wrap:pretty }

/* La seccion del mosaico no necesita el aire completo de `.seccion`
   arriba —viene justo detras del hero— pero algo si: sin los filtros
   por medio, «Ultimos articulos» se quedaba pegado al titular. */
.seccion-blog{ padding-top:clamp(1.25rem, 2.2vw, 2rem) }

/* --- temas ---
   Son enlaces, no botones: cada tema tiene su propia pagina, asi que
   se puede compartir, Google la recorre y funciona sin JavaScript. */
.blog-temas{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
             margin-bottom:clamp(2rem,3.5vw,3rem) }
.chip-tema{ display:inline-block; text-decoration:none; font-family:var(--sans);
            font-size:var(--t-xs); font-weight:500; padding:.45rem .8rem;
            border-radius:var(--radio); border:1px solid var(--borde-tenue);
            background:transparent; color:var(--texto); line-height:1.4 }
.chip-tema:hover{ border-color:var(--grafito); color:var(--grafito) }
.chip-tema[aria-current="page"]{ background:var(--grafito); color:var(--papel);
                                 border-color:var(--grafito) }
/* Una pagina de tema no lleva mosaico: ahi arriba solo estan los temas
   y no hace falta el aire completo de una seccion. */
.seccion-blog-sola{ padding-bottom:0 }

/* --- mosaico de las ultimas --- */
.blog-rotulo-seccion{ margin:0 0 1.5rem; padding-bottom:1rem;
                      border-bottom:1px solid var(--grafito) }
.mosaico{ display:grid;
          grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));
          gap:1.25rem }
.mosaico-lado{ display:grid; grid-auto-rows:1fr; gap:1.25rem }
.ficha-mosaico{ position:relative; display:flex; flex-direction:column;
                justify-content:flex-end; min-height:clamp(26rem,48vw,40rem);
                border-radius:var(--radio); overflow:hidden;
                background:var(--grafito); color:var(--papel);
                text-decoration:none }
.ficha-mosaico-chica{ min-height:clamp(16rem,23vw,19.4rem) }
.ficha-mosaico picture{ position:absolute; inset:0; display:block }
.ficha-mosaico img{ width:100%; height:100%; object-fit:cover }
/* El degradado es lo que hace legible el titular sobre cualquier foto.
   Sin el, un titular blanco sobre una radiografia clara no se lee. */
.ficha-mosaico::after{ content:""; position:absolute; inset:0;
                       background:linear-gradient(to top,
                         rgba(5,5,5,.88) 0%, rgba(5,5,5,.48) 48%,
                         rgba(5,5,5,.08) 85%) }
.ficha-mosaico-texto{ position:relative; z-index:1; display:flex;
                      flex-direction:column; gap:.75rem;
                      padding:clamp(1.5rem,3vw,2.5rem) }
.ficha-mosaico .rotulo{ margin:0 }
.ficha-mosaico-titulo{ margin:0; font-family:var(--serif); font-weight:300;
                       font-size:var(--tam-h2); line-height:1.12;
                       letter-spacing:-.012em; color:inherit; text-wrap:balance }
.ficha-mosaico-chica .ficha-mosaico-titulo{ font-size:clamp(1.5rem,2.6vw,2rem) }
.ficha-mosaico-pie{ font-size:var(--t-sm); font-weight:500 }
.ficha-mosaico:hover .ficha-mosaico-pie{ color:var(--resalta) }

/* --- rejilla de todas --- */
.seccion-todas[hidden]{ display:none }
.rejilla-entradas{ display:grid;
                   grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
                   gap:1.5rem }
.tarjeta-entrada{ display:flex; flex-direction:column; background:var(--blanco);
                  border:1px solid var(--borde); border-radius:var(--radio);
                  overflow:hidden; text-decoration:none; color:inherit }
.tarjeta-entrada:hover{ border-color:var(--grafito) }
.tarjeta-entrada[hidden]{ display:none }
.tarjeta-entrada-foto{ display:block; aspect-ratio:3/2; background:var(--borde);
                       overflow:hidden }
.tarjeta-entrada-foto img{ width:100%; height:100%; object-fit:cover }
.tarjeta-entrada-cuerpo{ flex:1; display:flex; flex-direction:column; gap:.75rem;
                         padding:1.6rem 1.75rem 1.75rem }
.tarjeta-entrada .rotulo{ margin:0 }
.tarjeta-entrada-titulo{ margin:0; font-family:var(--serif); font-weight:300;
                         font-size:var(--s-md); line-height:1.2;
                         letter-spacing:-.012em; color:var(--grafito);
                         text-wrap:balance }
.tarjeta-entrada-texto{ margin:0; font-size:var(--t-sm); line-height:1.6;
                        color:var(--texto-tenue); text-wrap:pretty }
.tarjeta-entrada-pie{ margin-top:auto; padding-top:1.25rem; display:flex;
                      align-items:center; justify-content:space-between;
                      gap:1rem; font-size:var(--t-sm); font-weight:500;
                      color:var(--grafito) }
.tarjeta-entrada-min{ font-weight:400; font-size:var(--t-xs);
                      color:var(--texto-tenue) }
.tarjeta-entrada:hover .tarjeta-entrada-titulo{ color:var(--resalta-texto) }
/* La cuenta hace de titulillo en las paginas donde el H1 ya dice de
   que van: la de un tema y la segunda de la portada. */
.blog-cuenta{ margin:0 0 1.5rem; padding-bottom:1rem;
              border-bottom:1px solid var(--grafito);
              font-size:var(--t-rotulo); font-weight:600; letter-spacing:.2em;
              text-transform:uppercase; color:var(--grafito) }

/* --- paginacion --- */
/* Las tres piezas juntas y en el medio. Repartidas a los extremos de
   1180px quedaban tres islas sueltas debajo de una rejilla de tres
   columnas, que es justo lo que no parecia una paginacion. */
.paginacion{ margin-top:clamp(2rem,3.5vw,3rem); padding-top:1.75rem;
             border-top:1px solid var(--borde); display:flex; flex-wrap:wrap;
             align-items:center; justify-content:center; gap:.75rem 1.75rem }
.paginacion-numeros{ display:flex; flex-wrap:wrap; gap:.4rem }
.pagina-num{ min-width:2.4rem; padding:.45rem .6rem; text-align:center;
             border:1px solid var(--borde-tenue); border-radius:var(--radio);
             font-size:var(--t-xs); font-weight:500; color:var(--texto);
             text-decoration:none }
a.pagina-num:hover{ border-color:var(--grafito); color:var(--grafito) }
.pagina-num[aria-current]{ background:var(--grafito); color:var(--papel);
                           border-color:var(--grafito) }
.pagina-flecha{ font-size:var(--t-xs); font-weight:600; letter-spacing:.06em;
                text-transform:uppercase; color:var(--grafito);
                text-decoration:none; border-bottom:1px solid transparent }
a.pagina-flecha:hover{ border-bottom-color:var(--grafito) }
/* La flecha que no lleva a ningun sitio se queda, apagada: si
   desapareciera, los numeros bailarian de sitio entre paginas. */
.pagina-flecha-muda{ color:var(--texto-tenue); opacity:.45 }

/* ---------------------------------------------------------- entrada */
.articulo-medida{ width:min(100% - 2.5rem, 880px); margin-inline:auto }
.migas .articulo-medida{ display:flex; flex-wrap:wrap; align-items:center;
                        gap:.45rem; font-family:var(--sans);
                        font-size:var(--t-xs); color:var(--texto-tenue) }
/* Mismo relleno que el hero de las paginas de servicio: sin migas ni
   rotulo delante, el titular del articulo cae a la misma altura que el
   de cualquier otra pagina. */
.articulo-cabeza{ padding:clamp(2.5rem, 4.6vw, 4.75rem) 0 clamp(2rem,4vw,3rem) }
.articulo-cabeza h1{ font-family:var(--serif); font-weight:300;
                    font-size:var(--tam-hero); line-height:1.08;
                    letter-spacing:-.015em; color:var(--grafito);
                    margin-bottom:1.4rem }
.articulo-cabeza .blog-extracto{ max-width:42rem }

/* La firma: quien escribe, con que numero de colegiado y cuando se
   reviso. En una web de salud esto no es un adorno. */
.articulo-autor{ display:flex; flex-wrap:wrap; align-items:center;
                gap:1rem 2rem; margin-top:2rem; padding-top:1.4rem;
                border-top:1px solid var(--borde) }
.articulo-autor-quien{ display:flex; align-items:center; gap:.85rem;
                      text-decoration:none; color:inherit }
.articulo-autor-quien img{ width:48px; height:48px; border-radius:50%;
                          object-fit:cover; object-position:50% 20%;
                          background:var(--hueso) }
.articulo-autor-quien > span{ display:flex; flex-direction:column;
                             line-height:1.35 }
.articulo-autor-quien b{ font-size:var(--t-sm); font-weight:600;
                        color:var(--grafito) }
.articulo-autor-quien b + span{ font-size:var(--t-xs); color:var(--texto-tenue) }
.articulo-autor-quien:hover b{ color:var(--resalta-texto) }
.articulo-autor-dato{ display:flex; flex-wrap:wrap; gap:.25rem 1.5rem;
                     margin:0 0 0 auto; font-size:var(--t-xs);
                     color:var(--texto-tenue) }

/* La portada va al ancho de la cabecera del articulo, no al de la
   pagina: a 1180 sobresalia del titular y de la firma y se comia la
   pantalla entera antes de empezar a leer. */
.articulo-portada{ margin:0 }
.articulo-portada picture{ display:block; aspect-ratio:16/9;
                          border-radius:var(--radio); overflow:hidden;
                          background:var(--hueso) }
.articulo-portada img{ width:100%; height:100%; object-fit:cover }

/* --- cuerpo y su indice --- */
.articulo-rejilla{ display:flex; flex-wrap:wrap; align-items:flex-start;
                  gap:3rem clamp(2rem,6vw,5.5rem) }
/* Con nueve o diez titulares el indice es mas alto que la pantalla y
   el boton del final se quedaba fuera de alcance. El que rueda es el
   listado; el boton no se mueve de abajo. */
.articulo-indice{ flex:1 1 14rem; max-width:18rem; position:sticky; top:7.5rem;
                 max-height:calc(100vh - 9.5rem);
                 display:flex; flex-direction:column; gap:.9rem }
.articulo-indice ol{ flex:0 1 auto; min-height:0; overflow-y:auto;
                     overscroll-behavior:contain }
.articulo-indice .rotulo{ margin:0 }
.articulo-indice ol{ list-style:none; margin:0; padding:0;
                    border-top:1px solid var(--borde) }
.articulo-indice li{ border-bottom:1px solid var(--borde) }
/* Solo los enlaces del listado: el boton de abajo tambien es un <a> y
   con un selector suelto se lo comia la rejilla de dos columnas. */
.articulo-indice li a{ display:grid; grid-template-columns:2.2rem 1fr; gap:.4rem;
                   padding:.7rem 0; font-size:var(--t-xs); line-height:1.4;
                   color:var(--texto); text-decoration:none }
.articulo-indice li a:hover{ color:var(--resalta-texto) }
.articulo-indice .num-mono{ color:var(--resalta-texto); background:none;
                           padding:0 }

.articulo-cuerpo{ flex:999 1 30rem; min-width:0; max-width:44rem;
                 text-wrap:pretty }
/* El ritmo del cuerpo del articulo. Con el margen de parrafo de 1,1rem
   que hereda del resto de la web, un articulo de dos mil palabras se
   lee como un muro: ahi los parrafos son dos o tres y aqui son treinta.
   La regla es que el hueco entre parrafos se note menos que el salto
   entre secciones, y que los dos se noten. */
.articulo-cuerpo h2{ margin:3.5rem 0 1.4rem; scroll-margin-top:7.5rem }
.articulo-cuerpo h2:first-child{ margin-top:0 }
.articulo-cuerpo h3{ margin:2.8rem 0 1rem }
.articulo-cuerpo > p{ margin:0 0 1.6rem }
.articulo-cuerpo strong{ font-weight:600; color:var(--grafito) }

.articulo-cita{ margin:1.6rem 0; padding:0 0 0 1.4rem;
               border-left:1px solid var(--grafito); font-family:var(--serif);
               font-weight:300; font-size:clamp(1.5rem,2.6vw,2.1rem);
               line-height:1.25; color:var(--grafito) }

.articulo-clave{ margin:1.8rem 0; padding:clamp(1.5rem,3vw,2.25rem);
                background:var(--hueso); border-radius:var(--radio-md) }
.articulo-clave .rotulo{ margin:0 0 .8rem }
.articulo-clave p:last-child{ margin:0; font-family:var(--serif);
                             font-weight:300; font-size:var(--s-md);
                             line-height:1.35; color:var(--grafito) }

.articulo-lista{ margin:.3rem 0 1.9rem; padding:0; list-style:none }
.articulo-lista li{ position:relative; padding-left:1.5rem;
                   margin-bottom:1.05rem }
.articulo-lista li::before{ content:""; position:absolute; left:0; top:.65em;
                           width:7px; height:7px; border-radius:50%;
                           background:var(--resalta) }
.articulo-pasos{ margin:.6rem 0 1.9rem; padding:0; list-style:none;
                border-top:1px solid var(--borde) }
.articulo-pasos li{ display:grid; grid-template-columns:3rem 1fr; gap:1rem;
                   padding:1.25rem 0; border-bottom:1px solid var(--borde) }
.articulo-pasos-num{ font-family:var(--serif); font-weight:300;
                    font-size:var(--s-md); line-height:1.2;
                    color:var(--resalta-texto) }

/* La comparativa va en dos tarjetas y no en una tabla: a 360px una
   tabla de tres columnas no se lee, y apilada deja de ser comparacion.
   Dos tarjetas se ponen una debajo de otra sin perder nada. */
.articulo-comparativa{ display:grid; gap:1rem; margin:2.4rem 0;
                      grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)) }
.articulo-columna{ background:var(--blanco); border:1px solid var(--borde);
                  border-radius:var(--radio); padding:1.5rem }
.articulo-columna-nuestra{ background:var(--hueso); border-color:var(--resalta) }
.articulo-columna h3{ margin:0 0 1rem; font-size:var(--s-sm) }
.articulo-columna dl{ margin:0 }
.articulo-columna dt{ font-size:var(--t-rotulo); font-weight:600;
                     letter-spacing:.14em; text-transform:uppercase;
                     color:var(--texto-tenue) }
.articulo-columna dd{ margin:.2rem 0 1rem; font-size:var(--t-sm);
                     line-height:1.5; color:var(--texto) }
.articulo-columna dd:last-child{ margin-bottom:0 }

.articulo-relacionado{ display:grid; grid-template-columns:minmax(0,1fr) auto;
                      gap:1rem 2rem; align-items:center; margin:1.8rem 0;
                      padding:1.5rem 1.75rem; background:var(--grafito);
                      color:var(--papel); border-radius:var(--radio-md);
                      text-decoration:none }
.articulo-relacionado:hover{ background:var(--grafito-hondo) }
.articulo-relacionado > span{ display:flex; flex-direction:column; gap:.4rem }
.articulo-relacionado .rotulo{ margin:0 }
.articulo-relacionado-titulo{ font-family:var(--serif); font-weight:300;
                             font-size:var(--s-md); line-height:1.2 }
.articulo-relacionado-flecha{ font-size:var(--s-md); color:var(--resalta) }

.articulo-cta{ margin:2.8rem 0 0; padding:clamp(1.5rem,3vw,2rem);
              border:1px solid var(--borde); border-radius:var(--radio-md);
              display:flex; flex-direction:column; gap:1.1rem;
              align-items:flex-start }
.articulo-cta p{ margin:0; font-family:var(--serif); font-weight:300;
                font-size:var(--s-md); line-height:1.3; color:var(--grafito) }

.articulo-aviso{ margin:3.2rem 0 0; padding-top:1.5rem;
                border-top:1px solid var(--borde); font-size:var(--t-xs);
                line-height:1.6; color:var(--texto-tenue) }

/* Las preguntas de una entrada se ven exactamente igual que las de una
   pagina de tratamiento. Las reglas de alli estan colgadas de
   `.tecnica`; aqui se repiten para `.articulo` en vez de ponerle a la
   entrada una clase que arrastraria otras veinte. */
.articulo .dividido-faq{ grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
                        align-items:start }
.articulo .faq details{ border-top:1px solid var(--borde) }
.articulo .faq summary{ display:flex; gap:1.1rem; align-items:center;
                       padding:1.4rem .5rem }
.articulo .faq summary::after{ content:none }
.articulo .faq summary .faq-texto{ flex:1; font-size:var(--t-md);
                                  font-weight:600; line-height:1.3 }
.articulo .faq .num-mono{ align-self:center }
.articulo .faq .faq-marca{ flex:none; width:30px; height:30px;
                          border:1px solid var(--grafito); border-radius:50%;
                          position:relative }
.articulo .faq .faq-marca::before,
.articulo .faq .faq-marca::after{ content:""; position:absolute; inset:50% 8px auto;
                                 height:1px; background:var(--grafito) }
.articulo .faq .faq-marca::after{ transform:rotate(90deg); transition:transform .16s }
.articulo .faq details[open] .faq-marca::after{ transform:rotate(0) }
.articulo .faq .faq-cuerpo{ padding:0 .5rem 1.6rem 3.4rem }

/* --- quien escribe --- */
.banda-autor-rejilla{ display:grid;
                      grid-template-columns:minmax(0,22rem) minmax(0,2fr);
                      gap:2rem clamp(2rem,5vw,4rem); align-items:center }
.banda-autor-foto picture{ display:block; aspect-ratio:1/1; max-width:22rem;
                           border-radius:var(--radio); overflow:hidden;
                           background:#1E1E1E }
.banda-autor-foto img{ width:100%; height:100%; object-fit:cover }
.banda-autor .rotulo{ margin-bottom:1rem }
.banda-autor h2{ margin-bottom:1.1rem }
.banda-autor p{ color:#C9C9C9 }
.banda-autor .boton-claro{ background:var(--papel); color:var(--grafito);
                           border-color:var(--papel) }
.banda-autor .boton-claro:hover{ background:transparent; color:var(--papel) }
.banda-autor .boton-linea-claro{ background:transparent; color:var(--papel);
                                 border-color:rgba(255,255,255,.45) }
.banda-autor .boton-linea-claro:hover{ background:var(--papel);
                                       color:var(--grafito) }

/* --- sigue leyendo --- */
.sigue-rejilla{ display:grid;
                grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
                gap:0 2.5rem; margin-top:1.5rem;
                border-top:1px solid var(--grafito) }
.sigue-ficha{ display:flex; flex-direction:column; gap:.75rem; padding:1.6rem 0 1.8rem;
              border-bottom:1px solid var(--borde); text-decoration:none;
              color:inherit }
.sigue-ficha .rotulo{ margin:0 }
/* Mas cuerpo que un h3 corriente: aqui el titular es lo unico que hay
   —no lleva entradilla— y a 24px la fila se quedaba en nada. */
.sigue-titulo{ margin:0; font-family:var(--serif); font-weight:300;
               font-size:clamp(1.5rem,2.1vw,1.875rem); line-height:1.2;
               letter-spacing:-.012em; color:var(--grafito); text-wrap:balance }
.sigue-dato{ margin-top:auto; padding-top:.35rem; font-size:var(--t-xs);
             color:var(--texto-tenue) }
.sigue-ficha:hover .sigue-titulo{ color:var(--resalta-texto) }
.sigue-ficha-muda{ cursor:default }
.sigue-ficha-muda:hover .sigue-titulo{ color:var(--grafito) }

/* El pie de las ultimas publicaciones de la portada. */
.lista-entradas-pie{ margin:clamp(1.75rem,3vw,2.5rem) 0 0 }

/* El rotulo en dorado, para cuando va sobre fondo claro. */
.rotulo-oro{ color:var(--resalta-texto) }

/* Maqueta: las tarjetas sin articulo detras. Se ven exactamente igual
   —de eso se trata, de ver el indice lleno— pero no son enlaces, asi
   que ni cambian el cursor ni se encienden al pasar por encima. */
.ficha-mosaico-muda,
.tarjeta-entrada-muda{ cursor:default }
.tarjeta-entrada-muda:hover{ border-color:var(--borde) }
.tarjeta-entrada-muda:hover .tarjeta-entrada-titulo{ color:var(--grafito) }
.ficha-mosaico-muda:hover .ficha-mosaico-pie{ color:var(--papel) }

/* ---------------------------------------------------------- movil */
@media (max-width:760px){
  /* En movil el titular del blog va a la izquierda, como el de todas las
     demas paginas: centrado en una columna estrecha parte en renglones
     cortos y desalineados y se lee peor. */
  .blog-hero-centro{ align-items:flex-start; text-align:left }
  .blog-hero h1{ max-width:none }
  .blog-hero .blog-extracto{ margin-top:1.1rem }
  .mosaico{ gap:1rem }
  .mosaico-lado{ gap:1rem }
  .ficha-mosaico{ min-height:22rem }
  /* En movil el titular ocupa media baldosa y sube hasta donde el
     degradado ya casi no tapa. Sobre una radiografia clara dejaba de
     leerse, asi que la mancha empieza antes. */
  .ficha-mosaico::after{ background:linear-gradient(to top,
                           rgba(5,5,5,.9) 0%, rgba(5,5,5,.62) 58%,
                           rgba(5,5,5,.2) 100%) }
  .ficha-mosaico-chica{ min-height:17rem }
  /* En movil las tres baldosas se apilan y miden lo mismo de ancho: que
     una lleve el titular mas pequeno se lee como un fallo, no como
     jerarquia. Esa diferencia solo tiene sentido en ordenador, donde
     una es el doble de alta que las otras.
     Y las tres bajan a --s-md, el cuerpo que llevan los titulos de
     ficha en el resto de la web: a 30px un titular de tres lineas se
     comia la baldosa entera. */
  .ficha-mosaico-titulo,
  .ficha-mosaico-chica .ficha-mosaico-titulo{ font-size:var(--s-md) }
  .rejilla-entradas{ gap:1.25rem }
  /* En movil los numeros van en su propia linea, centrados entre las
     dos flechas: en una sola fila no caben a partir de cuatro. */
  .paginacion{ justify-content:center; gap:.75rem 1.5rem }
  .paginacion-numeros{ order:-1; width:100%; justify-content:center }
  .tarjeta-entrada-cuerpo{ padding:1.4rem 1.4rem 1.5rem }

  /* El indice del articulo deja de ir pegado al lateral: en movil va
     arriba del todo, como lista de saltos, y no persigue al lector. */
  .articulo-cabeza{ padding-top:56px }
  .articulo-rejilla{ gap:2.5rem }
  /* En movil el indice no persigue al lector: va arriba del todo, como
     lista de saltos, entero y sin barra interior. El alto limitado de
     ordenador existe porque alli esta pegado al lateral. */
  .articulo-indice{ position:static; max-width:none; max-height:none;
                   flex:1 1 100%; order:-1 }
  .articulo-indice ol{ overflow:visible }
  .articulo-cuerpo h2{ margin-top:2.75rem }
  .articulo-cuerpo h3{ margin-top:2.25rem }
  .articulo .dividido-faq{ grid-template-columns:minmax(0,1fr) }
  .articulo-autor-dato{ margin-left:0 }
  .banda-autor-rejilla{ grid-template-columns:1fr }
  .banda-autor-foto picture{ max-width:none; aspect-ratio:4/3 }
  .articulo-relacionado{ padding:1.4rem }
  .articulo-cta{ padding:1.4rem }
}