/*
 * laempresariamultimillonaria.com — el móvil primero.
 *
 * ── POR QUÉ ESTE FICHERO EXISTE Y POR QUÉ USA !important ─────────────────
 *
 * El diseño vino de Claude Design con **229 estilos en línea y ni una media
 * query**: está hecho para una pantalla ancha. Un estilo en línea gana a
 * cualquier hoja externa, así que la única forma de corregirlo sin reescribir
 * el diseño aprobado —y reescribirlo es como se desvía— es `!important`.
 *
 * Se usa **sólo aquí y sólo para estructura**: rejillas, tamaños, espaciado y
 * dirección. **Ni un color, ni una tipografía, ni un borde.** El sitio se ve
 * igual; lo que cambia es dónde cae cada cosa.
 *
 * ── LO QUE FALLÓ EN EL PRIMER INTENTO ────────────────────────────────────
 *
 * La primera versión sólo corregía las rejillas escritas con `repeat(…)`. Pero
 * el diseño tiene **cuatro rejillas escritas con fracciones** —`1.05fr 0.95fr`
 * en la cabecera, `0.9fr 1.1fr`, `0.85fr 1.15fr`, `1fr 1fr`— y ésas se
 * quedaban en dos columnas. Resultado en un móvil: el texto de la cabecera
 * apretado en media pantalla y **su retrato en una tira estrecha y cortada**,
 * con el fondo beige del contenedor asomando por los lados.
 *
 * Por eso ahora la regla es por PROPIEDAD y no por valor: toda rejilla se
 * apila, y la única excepción se nombra a mano.
 */

/* ═══════════════════════════════════════════════════════════════════════
   MÓVIL Y TABLETA — hasta 900 px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Nada se sale de la pantalla ──────────────────────────────────── */
  /* Ojo: la red contra desbordes va con `clip`, no con `hidden`, y está más
     abajo con el porqué. `hidden` aquí rompía la barra pegajosa. */
  img, video, iframe { max-width: 100% !important; }

  /* ── TODA rejilla, a una columna ──────────────────────────────────── */
  /* Por propiedad, no por valor: así entran también las de fracciones.
   *
   * Y va `minmax(0, 1fr)` y no `1fr`, que **no es lo mismo aunque lo parezca**:
   * `1fr` es en realidad `minmax(auto, 1fr)`, y ese `auto` impide que la
   * columna baje del ancho mínimo de su contenido. Con un correo de 38
   * caracteres sin espacios dentro de un párrafo —`info@laempresaria…`— la
   * columna se plantaba en 391 px dentro de una pantalla de 375 y **todo el
   * documento legal se salía por la derecha**. El `0` es lo que le da permiso
   * para encoger y dejar que el texto parta la línea. */
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  /* Y lo mismo para los hijos: un elemento de rejilla tampoco encoge por
     debajo de su contenido si no se le dice. */
  [style*="grid-template-columns"] > * { min-width: 0 !important; }

  /* La única excepción: las cuatro cantidades de café. En 2×2 se siguen
     comparando de un vistazo, que es para lo que están; en una columna
     habría que bajar hasta el final para ver la de 25 $. */
  [style*="repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* ═══════════════════════════════════════════════════════════════════
     LA CABECERA EN MÓVIL: ella de fondo, el texto encima
     ═══════════════════════════════════════════════════════════════════

     En escritorio son dos columnas: el texto a la izquierda, ella a la
     derecha. Apiladas en un móvil quedaban como dos bloques sueltos —texto,
     y debajo una foto recortada—, y la portada perdía a la persona que la
     protagoniza. Ricardo, 5 ago 2026: que salga **de fondo, con el texto
     encima y sin perder ni una palabra**.

     ── Cómo se hace legible, que es lo difícil ────────────────────────
     Su retrato es ella **sobre gris oscuro y con traje crema**. Sobre eso,
     el texto original —tinta #2C2521— no se lee: es oscuro sobre oscuro.
     Hay dos salidas y sólo una respeta la foto:

       · Velo crema y texto oscuro → hay que subirlo al 85 % para que se
         lea, y a ese nivel ella queda lavada. Se pide verla, no adivinarla.
       · Velo oscuro y texto claro → el degradado deja **su cara limpia
         arriba** y sólo oscurece la mitad de abajo, que es donde va el
         texto. Se la ve entera y se lee todo.

     Se usa el segundo. **Es la única parte del sitio donde esta hoja toca
     colores**, y se toca porque sin tocarlos la petición es imposible: un
     texto ilegible no es un texto. En escritorio no cambia nada.

     ── Y nada se corta ────────────────────────────────────────────────
     La altura es `min-height`, nunca `height`: si el texto crece —otro
     idioma, un párrafo más largo, la letra grande del sistema— la cabecera
     crece con él. La foto va detrás en `position: absolute`, así que
     estirarse no le cuesta nada a nadie. */

  /* La altura se cuenta **descontando la barra**, y ése era el fallo: la
     cabecera medía 94 vh y la barra se le sumaba encima, así que el segundo
     botón —«Contrátame para tu evento»— caía por debajo del filo de la
     pantalla y no se veía. Con `100svh − 66px` la cabecera ocupa exactamente
     lo que queda, y como el texto va pegado abajo con 44 px de aire, el
     último botón termina 44 px por encima del filo. En cualquier teléfono.

     `svh` y no `vh`: en el móvil `vh` mide la pantalla **con la barra del
     navegador escondida**, que es un tamaño que casi nunca se está viendo. */
  header#inicio {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: calc(100vh - 66px) !important;
    min-height: calc(100svh - 66px) !important;
  }

  /* La caja del retrato deja de ser una columna y pasa a ser el fondo. */
  header#inicio > div:nth-child(2) {
    position: absolute !important;
    inset: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    z-index: 0 !important;
  }
  /* ── QUE SE LA VEA: se recorta el vacío y se acerca ────────────────
     El retrato es de cuerpo entero y trae **un palmo de gris vacío por
     encima de su cabeza**. Metido tal cual en la cabecera, su cara ocupaba
     112 px de 746 —el 15 %— y quedaba pequeña y en medio de la nada:
     Ricardo, 5 ago 2026, «apenas y se ve a María José».

     La foto no se puede «acercar» con `object-position`, que sólo mueve el
     encuadre cuando algo sobra. Se acerca dándole al `<img>` **más alto que
     su caja** —118 %— y subiéndolo un 5 %: lo que se recorta es justo ese
     gris de arriba, su cara crece un 16 % y sube hasta la zona limpia del
     velo. Su pelo arranca en el píxel 40, justo por debajo del rótulo.

     Y el realce: ella está sobre un gris de estudio y va de crema. Sin él,
     todo —fondo, traje y velo— cae en la misma masa parda. Es poco a
     propósito; esto es subir la luz de una foto, no maquillarla. */
  header#inicio > div:nth-child(2) img {
    height: 118% !important;
    top: -5% !important;
    bottom: auto !important;
    object-position: center !important;
    filter: brightness(1.08) contrast(1.05) saturate(1.03) !important;
  }

  /* ── El velo va MEDIDO EN PÍXELES DESDE ABAJO, no en porcentajes ────
     El primer intento lo puso en porcentajes de la cabecera, calculados con
     un teléfono de 812 px de alto. En uno de 640 el texto ocupa casi toda la
     cabecera y esos mismos porcentajes lo dejaban medio texto sobre la parte
     clara: ilegible en el teléfono de otra persona.

     Ahora el degradado se pinta **sobre el bloque de texto y anclado a su
     borde inferior**, con una altura fija de 600 px: los 460 de abajo son
     opacos —que es lo que mide el texto— y los 140 de arriba son el
     desvanecido. Como el texto también está pegado abajo, el velo lo cubre
     entero **mida lo que mida la pantalla**, y lo que sobra por arriba se
     queda limpio para su cara. Ésa es la diferencia entre que funcione en un
     teléfono y que funcione en todos. */
  header#inicio > div:first-child {
    position: relative !important;
    z-index: 2 !important;
    justify-content: flex-end !important;
    min-height: calc(100vh - 66px) !important;
    min-height: calc(100svh - 66px) !important;
    padding: 96px 20px 30px !important;
    gap: 16px !important;
    /* El desvanecido, apretado a propósito en una franja estrecha —del 14 %
       al 28 % de los 560 px, o sea 78 px— que cae **entre su barbilla y el
       antetítulo**. Estirado como estaba antes, para tapar el texto tenía que
       empezar a oscurecer ya en su cara. Apretado, su barbilla queda en 0,12
       y el antetítulo en 0,75. */
    background-image: linear-gradient(
      180deg,
      rgba(26, 22, 19, 0)    0%,
      rgba(26, 22, 19, 0.05) 13%,
      rgba(26, 22, 19, 0.35) 18%,
      rgba(26, 22, 19, 0.78) 22%,
      rgba(26, 22, 19, 0.92) 27%,
      rgba(26, 22, 19, 0.97) 100%
    ) !important;
    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    background-size: 100% 560px !important;
  }

  /* Los colores del texto, invertidos sólo aquí. */
  header#inicio h1 { color: #F7F2EA !important; }
  header#inicio h1 span { color: #E0BE8E !important; }
  header#inicio p { color: #E3D9CE !important; }
  header#inicio > div:first-child > div:first-child { color: #D8C6AE !important; }
  header#inicio > div:first-child > div:first-child span[style*="background"] {
    background: #C9A26A !important;
  }

  /* Los dos botones. El oscuro sobre fondo oscuro desaparece: se invierte.
     El de contorno pasa a contorno claro. */
  header#inicio a[href="#cafe"] {
    background: #F7F2EA !important;
    color: #2C2521 !important;
  }
  header#inicio a[href="#charlas"] {
    border-color: rgba(247, 242, 234, 0.55) !important;
    color: #F7F2EA !important;
  }

  /* El rótulo del retrato —«1 metro de estatura…»— vivía pegado abajo, que
     ahora es justo donde caen los botones. Sube arriba del todo, sobre la
     parte clara de la foto, y se lee mejor que antes. **No se quita**: es
     suyo y dice en una línea lo que el sitio cuenta en toda la página. */
  header#inicio > div:nth-child(2) > div[style*="bottom: 0"] {
    top: 0 !important;
    bottom: auto !important;
    z-index: 2 !important;
    padding: 8px 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    border-bottom-right-radius: 3px !important;
  }

  /* ── La navegación ────────────────────────────────────────────────── */
  /* Va pegada arriba (`position: sticky`), así que cada píxel que ocupe lo
     pierde el contenido **en toda la página**, no sólo al principio. Dos
     filas —la marca y los cuatro enlaces— y ni una más. */
  /* En el marcado los cuatro enlaces viven dentro de un `<div>`, así que la
     marca queda sola en una fila y los cuatro en otra — y los cuatro no caben
     seguidos, así que se iban a tres filas: 167 px de barra fija.
     `display: contents` **disuelve ese div**: sus cuatro enlaces pasan a ser
     hijos directos de la barra y se pueden repartir. Hereda igual el tipo y
     las versalitas, que es justo lo que el div aportaba. */
  nav {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    padding: 10px 18px !important;
  }
  nav > div { display: contents !important; }

  /* Fila 1: la marca y el botón de café, que es el que convierte y por eso es
     el que se queda a la vista mientras se baja. Fila 2: las tres secciones.
     **Todo esto va dentro de `.con-menu`**, y el motivo es un fallo real: sin
     esa condición, el `order: 1` de la marca se aplicaba también a la barra
     del centro legal —que tiene otros dos enlaces y ningún desplegable— y le
     daba la vuelta: «← Volver al inicio» a la izquierda y la marca a la
     derecha, al revés de como está escrita. */
  .con-menu nav > a:first-child { order: 1 !important; min-height: 40px !important; }
  /* El dominio debajo de su nombre sobra **estando dentro del dominio**, y son
     los 65 px que decidían si el botón de café cabe en la primera fila. */
  nav > a:first-child > span:last-child { display: none !important; }

  nav a[href="#cafe"]  { order: 2 !important; margin-left: auto !important; }

  /* El salto de fila, hecho a mano. Un `::after` del propio `<nav>` **sí es un
     elemento flexible más**, así que con `order` se cuela entre el botón y los
     enlaces y ocupa el ancho entero: la fila se corta ahí y punto.
     Sin esto el corte dependía de si sobraba sitio, y en una tableta de 768
     «Historia» se subía a la primera fila y salía de 389 px. */
  /* `:has(> div)` acota el salto a la barra que de verdad tiene el bloque de
     los cuatro enlaces, que es la de la portada. La del centro legal son dos
     enlaces sueltos y este `::after` le añadía una fila vacía de más. */
  nav:has(> div)::after {
    content: '' !important;
    flex: 0 0 100% !important;
    height: 0 !important;
    order: 3 !important;
  }

  nav > div a:not([href="#cafe"]) {
    order: 4 !important;
    /* Con `!important` y ganando en especificidad al `min-height: 46px` de los
       botones grandes: aquí 46 son 8 px de barra fija en toda la página. */
    min-height: 38px !important;
    /* Un tercio cada uno **fuerza el salto**: tras la marca y el botón no
       queda un tercio libre, así que los tres bajan juntos y en su sitio. En
       vez de depender de lo que mida cada palabra, que cambia con el texto. */
    flex: 1 0 calc(33.333% - 8px) !important;
  }
  nav a { font-size: 13px !important; }
  nav > div a { min-height: 38px !important; }
  nav a[href="#cafe"] { padding: 9px 16px !important; min-height: 38px !important; }

  /* ── La barra de menú de verdad ───────────────────────────────────── */
  /* Todo lo de arriba es el **respaldo sin JavaScript**. Cuando el script
     arranca pone `con-menu` en el `<html>` y manda esto otro: marca a la
     izquierda, botón a la derecha, y los cuatro enlaces en un desplegable.
     Así la barra baja de 115 px a 60 y deja de repetir el botón de café que
     está justo debajo, en la portada. */
  .con-menu nav {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 9px 14px !important;
  }
  .con-menu nav::after { content: none !important; }

  /* La marca se va de la barra. En un móvil, «MARÍA JOSÉ» arriba y «María
     José Villavicencio» a dos dedos por debajo, en el titular, son lo mismo
     dicho dos veces — y lo de arriba es la versión pequeña. Ricardo, 5 ago
     2026: «María José en móviles es redundante… no debes repetir lo mismo
     que ya está abajo». En escritorio se queda: allí la barra tiene ancho de
     sobra y el titular no se ve al bajar. */
  .con-menu nav > a:first-child { display: none !important; }

  /* El desplegable cuelga de la barra, que ya es `position: sticky` y por eso
     sirve de referencia sin tocarle la posición. */
  .con-menu nav > div {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 4px 18px 14px !important;
    background: #F7F2EA !important;
    border-bottom: 1px solid rgba(44, 37, 33, 0.12) !important;
    box-shadow: 0 14px 28px rgba(44, 37, 33, 0.10) !important;
  }
  .con-menu nav.abierto > div { display: flex !important; }

  .con-menu nav > div a {
    order: 0 !important;
    flex: none !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: 54px !important;
    justify-content: flex-start !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(44, 37, 33, 0.08) !important;
  }
  .con-menu nav > div a:last-child { border-bottom: none !important; }
  /* El café sí se queda en el menú —es una sección más—, pero ahí dentro es
     un enlace de la lista, no un botón que compita con el de la portada. */
  .con-menu nav a[href="#cafe"] {
    background: none !important;
    color: #7A5A32 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* `order: 0` es lo que tenía por defecto, y por eso salía a la IZQUIERDA:
     los enlaces de la barra llevan `order: 1` y superiores, así que el botón
     se colaba delante de todos. Va el último y pegado a la derecha. */
  .con-menu nav [data-menu] {
    order: 9 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: #2C2521 !important;
    cursor: pointer !important;
  }
  /* La marca no necesita los 40 px de zona de toque de antes: al lado ya no
     hay nada que se pueda pulsar por error. */
  .con-menu nav > a:first-child { min-height: 42px !important; }

  /* ── NADA SE QUEDA CLAVADO DENTRO DE UNA SECCIÓN ──────────────────── */
  /* El diseño usa `position: sticky` para columnas que **acompañan** a otra
     mientras se lee: en la sección del café, el bloque «03 — Apoyo · Invítame
     a un café» se queda quieto a la izquierda mientras el panel de pago sube
     por la derecha. En dos columnas es una idea buena.

     Apiladas en un móvil deja de haber un al lado: el bloque se clava en los
     110 px y **el panel de pago le pasa por encima**. Medido antes de tocar
     nada, se montaban en las cuatro posiciones de desplazamiento probadas.
     Ricardo, 5 ago 2026: «en la parte de donaciones o café, el texto se
     monta».

     Va por propiedad y para toda sección, no sólo para ésta: cualquier
     columna que el diseño decida fijar mañana tendrá el mismo problema el día
     que se apile. La barra de arriba y el selector del centro legal no entran
     aquí —no están dentro de un `<section>`— y siguen fijos, que es lo que se
     pidió de ellos. */
  section [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }

  /* ── Los bloques de dos lados se apilan ───────────────────────────── */
  [style*="display: flex"][style*="justify-content: space-between"]:not(nav):not([data-cookies]) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }

  /* ── Aire: 64 px de margen lateral en 375 de ancho es un tercio ───── */
  /* Primero la red de seguridad, y va por PROPIEDAD: cualquier sección o pie
     con 64 px a los lados se estrecha a 20, escriba lo que escriba el resto
     del atributo. Así no vuelve a escaparse ninguno —se escaparon
     `100px 64px` y `56px 64px 40px 64px`, que estaban a la vista— ni se
     escapará el que añada el diseño mañana. */
  /* `header` entra aquí por la página de legales, que tiene una cabecera con
     `76px 64px 44px`. En la portada la cabecera es la rejilla del retrato y va
     sin relleno, así que este selector no la toca. */
  /* `div` entró aquí por el centro legal: su rejilla de dos columnas —el
     índice y el documento— es un `<div>` con `56px 64px 110px`, y como la red
     sólo miraba `section`, `footer` y `header`, **todo el documento se salía
     de la pantalla**. La regla mira la propiedad, no la etiqueta. */
  section[style*="px 64px"], footer[style*="px 64px"],
  header[style*="px 64px"], div[style*="px 64px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Y después el alto, que sí hay que decir uno por uno. */
  [style*="padding: 118px 64px"],
  [style*="padding: 108px 64px"],
  [style*="padding: 100px 64px"],
  [style*="padding: 88px 64px"] { padding: 52px 20px !important; }
  [style*="padding: 56px 64px 40px 64px"] { padding: 44px 20px 32px !important; }
  [style*="padding: 76px 64px 44px 64px"] { padding: 44px 20px 32px !important; }
  [style*="padding: 34px"] { padding: 22px 18px !important; }
  [style*="padding: 42px 32px"] { padding: 26px 20px !important; }
  [style*="padding: 24px 0"]    { padding: 18px 0 !important; }
  [style*="padding: 20px 26px"] { padding: 14px 16px !important; }
  [style*="padding: 16px 40px"] { padding: 12px 18px !important; }

  /* ── Tipografía: que quepa sin dejar de ser el diseño ─────────────── */
  /* `clamp` con el tamaño original arriba: en escritorio no cambia nada. */
  h1, [style*="font-size: 76px"], [style*="font-size: 72px"], [style*="font-size: 68px"] {
    font-size: clamp(36px, 10.5vw, 68px) !important;
    line-height: 1.04 !important;
  }
  h2, [style*="font-size: 56px"], [style*="font-size: 52px"] {
    font-size: clamp(30px, 8.5vw, 52px) !important;
    line-height: 1.08 !important;
  }
  h3, [style*="font-size: 29px"], [style*="font-size: 27px"], [style*="font-size: 25px"] {
    font-size: clamp(20px, 5.6vw, 27px) !important;
  }
  [style*="font-size: 40px"] { font-size: 32px !important; }
  [style*="font-size: 19px"], [style*="font-size: 18px"], [style*="font-size: 17px"] {
    font-size: 16px !important;
  }

  /* Una palabra larga —«multimillonaria»— no puede empujar la página. */
  h1, h2, h3, p, a, div { overflow-wrap: break-word !important; }

  /* Los párrafos con ancho de lectura fijo se quedan cortos en móvil. */
  [style*="max-width: 44ch"], [style*="max-width: 46ch"], [style*="max-width: 68ch"] {
    max-width: 100% !important;
  }

  /* ── Los botones se pulsan con el dedo, no con el ratón ───────────── */
  /* Por debajo de 44 px se falla y se pulsa el de al lado — y aquí el de al
     lado es «pagar». */
  button, [data-stripe] { min-height: 46px !important; }
  [data-stripe] { padding: 15px 18px !important; font-size: 15px !important; }

  /* En un enlace, `min-height` no hace nada mientras sea `inline`. */
  nav a, footer a, a[href^="#"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
  }
  /* Los dos botones grandes de la cabecera, a lo ancho: se aciertan sin mirar.
     **Van con `header` delante y no es un adorno**: sin él la regla cogía
     también los mismos dos enlaces de la barra de navegación, los ponía a
     339 px cada uno y la barra —que está pegada arriba— crecía hasta 237 px.
     Un cuarto de la pantalla de menú, en todas las pantallas. */
  header a[href="#cafe"], header a[href="#charlas"] {
    width: 100% !important;
    padding: 16px 22px !important;
  }

  /* ── Los campos, a 16 px. No es estética: es iOS ──────────────────── */
  /* Safari en iPhone **hace zoom solo** al tocar un campo de menos de 16 px, y
     luego no lo deshace: la página se queda de lado y hay que pellizcar para
     volver. Los cinco campos venían a 15. Con 16 no pasa nada de eso.
     El del importe, además, medía 21 px de alto: se falla al tocarlo, y lo que
     hay debajo es «pagar». */
  input, textarea, select { font-size: 16px !important; }
  input[type="number"], input[type="text"], input[type="email"] {
    min-height: 44px !important;
  }
  textarea { min-height: 88px !important; }

  /* ── EL CENTRO LEGAL ──────────────────────────────────────────────── */

  /* ── El índice de documentos: un desplegable, no una lista de 344 px ──
     En escritorio es una columna de 260 px al lado del texto y funciona. En un
     móvil se apilaba y el documento no empezaba hasta el píxel 915.

     Sin JavaScript se queda como estaba —cinco enlaces, sin pegar— y sigue
     navegándose. Con JavaScript, el script pone `con-docmenu` y manda esto. */
  aside {
    position: static !important;
    top: auto !important;
  }
  aside > a { padding: 12px 14px !important; }

  .con-docmenu aside {
    position: sticky !important;
    /* Justo debajo de la barra, y la altura la mide el script: escribirla a
       mano aquí es cómo se desajusta el día que la barra cambie. */
    top: var(--alto-barra, 66px) !important;
    z-index: 40 !important;
    margin: 0 0 22px 0 !important;
    gap: 0 !important;
  }

  .con-docmenu [data-doc-menu] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 13px 16px !important;
    border: 1px solid rgba(44, 37, 33, 0.18) !important;
    border-radius: 6px !important;
    background: #F2EBE0 !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 14.5px !important;
    text-align: left !important;
    color: #2C2521 !important;
    cursor: pointer !important;
  }
  .con-docmenu [data-doc-menu] svg {
    flex: none !important;
    transition: transform 0.18s ease !important;
  }
  .con-docmenu aside.abierto [data-doc-menu] svg { transform: rotate(180deg) !important; }

  /* El panel cae por encima del texto, no lo empuja: si empujara, elegir un
     documento movería toda la página bajo el dedo. */
  .con-docmenu [data-doc-panel] {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 8px !important;
    border: 1px solid rgba(44, 37, 33, 0.14) !important;
    border-radius: 8px !important;
    background: #FFFDF9 !important;
    box-shadow: 0 18px 34px rgba(44, 37, 33, 0.14) !important;
  }
  .con-docmenu aside.abierto [data-doc-panel] { display: flex !important; }
  .con-docmenu [data-doc-panel] > a { min-height: 48px !important; align-items: center !important; }
  /* La caja del correo de privacidad se queda dentro del desplegable: en el
     documento ya está el mismo dato, dos veces, y en móvil no hay sitio para
     repetirlo tres. */
  .con-docmenu [data-doc-panel] > div { margin-top: 10px !important; }

  /* Menos aire abajo: 110 px de relleno al final de un documento largo es
     una pantalla en blanco antes del pie. */
  div[style*="110px"] { padding-bottom: 56px !important; }

  /* ── Las tablas de los documentos legales ─────────────────────────── */
  /* Tres columnas en 375 px son tres columnas de 110: ilegibles. Se apilan,
     y para que sigan entendiéndose se hace lo mismo que hace una tabla bien
     hecha en papel: **la cabecera se quita** —repetir «Dato / Valor / Para
     qué» encima de cada fila no ayuda a nadie— y en cada fila el primer dato
     hace de título de su propio bloque. */
  [style*="1.1fr 1.6fr 0.8fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  [style*="1.1fr 1.6fr 0.8fr"][style*="#EFE5D6"] { display: none !important; }
  [style*="1.1fr 1.6fr 0.8fr"] > div:first-child {
    padding: 14px 16px 2px !important;
    font-weight: 600 !important;
  }
  [style*="1.1fr 1.6fr 0.8fr"] > div:nth-child(2) { padding: 2px 16px 6px !important; }
  [style*="1.1fr 1.6fr 0.8fr"] > div:last-child {
    padding: 0 16px 14px !important;
    font-size: 13px !important;
  }

  /* ── El banner de cookies ─────────────────────────────────────────── */
  /* Llegó a tapar el 64 % de la pantalla: eso no es un banner, es un muro. */
  [data-cookies] {
    padding: 10px !important;
    align-items: flex-end !important;
    background: none !important;
  }
  [data-cookies] > div {
    max-height: 42vh !important;
    overflow-y: auto !important;
    padding: 16px 15px !important;
    border-radius: 12px !important;
  }
  [data-cookies] p, [data-cookies] div { font-size: 13px !important; line-height: 1.5 !important; }
  [data-cookies] h2, [data-cookies] h3 { font-size: 18px !important; margin-bottom: 6px !important; }
  /* Aceptar y rechazar, del mismo tamaño: rechazar no puede costar más. */
  [data-cookies] [style*="display: flex"][style*="gap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [data-cookies] button { width: 100% !important; min-height: 44px !important; font-size: 14px !important; }
  [data-cookies-panel] > div { flex-direction: column !important; gap: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MÓVIL ESTRECHO — hasta 400 px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  [style*="repeat(4"] { gap: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PANTALLAS BAJAS — el móvil apaisado y los teléfonos pequeños
   ═══════════════════════════════════════════════════════════════════════

   Con 640 px de alto —o con el teléfono de lado— el texto de la cabecera no
   cabe entero por encima del filo, y entonces el segundo botón vuelve a
   quedarse fuera. Se aprieta lo que se puede apretar sin que deje de leerse:
   el titular, el aire entre bloques y el relleno de los botones. El texto no
   se toca: quitar palabras para que quepa es la solución fácil y equivocada. */
@media (max-width: 900px) and (max-height: 700px) {
  /* Aquí el reparto va a cuchillo: en 320 × 568 la cabecera son 503 px y el
     texto pedía 374, así que **empezaba en el píxel 129 y su barbilla estaba
     en el 138**. Se pisaban, y por eso el velo la borraba de media cara para
     abajo. Apretando el párrafo a 13,5 px y los aires, el texto empieza en el
     181 y deja su cara entera por encima.

     Es la letra más pequeña del sitio y sólo sale en pantallas de menos de
     700 px. Ahí, o se aprieta el cuerpo del texto o se pierde una de las dos
     cosas que se han pedido — y el texto no se recorta. */
  header#inicio > div:first-child {
    padding-top: 36px !important;
    padding-bottom: 24px !important;
    gap: 10px !important;
    background-size: 100% 440px !important;
  }
  /* Y su cara se acerca más todavía, porque aquí el hueco libre por encima
     del texto son unos 140 px y su cara tiene que caber en ellos. */
  header#inicio > div:nth-child(2) img {
    height: 132% !important;
    top: -20% !important;
  }

  header#inicio h1 { font-size: clamp(30px, 8vw, 44px) !important; }
  header#inicio p  { font-size: 13.5px !important; line-height: 1.42 !important; }
  header#inicio a[href="#cafe"], header#inicio a[href="#charlas"] {
    padding: 12px 20px !important;
    min-height: 44px !important;
  }
  header#inicio > div:first-child > div:last-child { gap: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EL TELÉFONO DE LADO — ancho de sobra y alto que no llega
   ═══════════════════════════════════════════════════════════════════════

   Medido en 812 × 375: apretando todo lo apretable, el texto seguía pidiendo
   395 px y el segundo botón caía 19 px por debajo del filo. **Aquí no falta
   alto, sobra ancho**: los dos botones uno al lado del otro caben de sobra
   —423 px de los 772 disponibles— y son justo los 52 px que faltaban.

   Y la foto se reencuadra: con esta proporción, `cover` amplía tanto que
   anclada abajo sólo se le verían las piernas. Al 20 % su cara queda dentro. */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  /* Vuelve la rejilla de dos columnas del diseño. Con el fondo a pantalla
     completa **su cara ocupaba del píxel 78 al 291 de una cabecera de 318**,
     o sea toda: el velo que hace legible el texto la borraba entera. Ningún
     ajuste del degradado arregla eso, porque el texto y su cara ocupan
     exactamente el mismo sitio. En dos columnas no se pisan. */
  header#inicio {
    display: grid !important;
    grid-template-columns: 1.02fr 0.98fr !important;
    align-items: stretch !important;
  }
  header#inicio > div:nth-child(2) {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
  }
  /* En dos columnas la foto vuelve a ocupar su caja exacta: el acercamiento
     del retrato es cosa del fondo a pantalla completa, y aquí no lo hay. */
  header#inicio > div:nth-child(2) img {
    height: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    object-position: center 14% !important;
    filter: none !important;
  }
  header#inicio > div:nth-child(2)::after { content: none !important; }
  /* El rótulo del retrato vuelve abajo, que es su sitio en dos columnas. */
  header#inicio > div:nth-child(2) > div[style*="bottom: 0"] {
    top: auto !important;
    bottom: 0 !important;
  }

  /* Todo apretado a la medida de los 310 px que deja la pantalla girada.
     Medido: 16+16 de relleno + 20 del antetítulo + 54 del titular + 105 del
     párrafo + 42 de los botones + 24 de aires = 293. Entra, y con holgura
     para que quepa una línea más si el texto crece. */
  header#inicio > div:first-child {
    background-image: none !important;
    min-height: 0 !important;
    justify-content: center !important;
    padding: 16px 20px !important;
    gap: 8px !important;
  }
  header#inicio h1 { font-size: 26px !important; line-height: 1.04 !important; }
  header#inicio p  { font-size: 13px !important; line-height: 1.45 !important; }
  header#inicio > div:nth-child(2) > div[style*="bottom: 0"] {
    padding: 8px 12px !important;
    font-size: 9px !important;
  }

  /* Sin velo, la tinta original vuelve a ser la que se lee. */
  header#inicio h1        { color: #2C2521 !important; }
  header#inicio h1 span   { color: #7A5A32 !important; }
  header#inicio p         { color: #4A403A !important; max-width: 46ch !important; }
  header#inicio > div:first-child > div:first-child { color: #8B7D70 !important; }
  header#inicio > div:first-child > div:first-child span[style*="background"] {
    background: #7A5A32 !important;
  }
  header#inicio a[href="#cafe"] {
    background: #2C2521 !important;
    color: #F7F2EA !important;
  }
  header#inicio a[href="#charlas"] {
    border-color: rgba(44, 37, 33, 0.28) !important;
    color: #7A5A32 !important;
  }
  /* Los dos botones, en una fila. A 13 px sumaban 385 y la columna da 350,
     así que se iban a dos filas y el segundo se salía por abajo. A 12 px con
     menos relleno suman 323 y entran los dos. */
  header#inicio a[href="#cafe"], header#inicio a[href="#charlas"] {
    width: auto !important;
    flex: 0 1 auto !important;
    padding: 9px 13px !important;
    min-height: 40px !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
  }
  header#inicio > div:first-child > div:last-child { gap: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LA BARRA SE QUEDA ARRIBA — EN MÓVIL Y EN ESCRITORIO
   ═══════════════════════════════════════════════════════════════════════

   La barra siempre llevó `position: sticky; top: 0` del diseño, y **nunca
   funcionó en ningún tamaño**: medido, al bajar 1600 px se iba a −1600.

   La causa es el `<div>` que el diseño pone alrededor de toda la página, con
   `overflow-x: hidden`. Un `overflow` distinto de `visible` **convierte a ese
   div en el contenedor de desplazamiento** de todo lo que hay dentro, y un
   elemento pegajoso se pega a su contenedor, no a la ventana. Como ese div
   mide lo que mide la página y nunca se desplaza por dentro, la barra no se
   pegaba a nada.

   `clip` hace lo mismo que `hidden` —recortar lo que se salga— pero **no crea
   contenedor de desplazamiento**: existe exactamente para esto. Con eso la
   barra vuelve a pegarse a la ventana sin tocar el marcado.

   Va fuera de toda media query porque el fallo era de los dos lados. */
body > div[style*="overflow-x: hidden"] {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* La misma trampa, y esta la puse yo: era la red de seguridad contra
   desbordes laterales en móvil. Medida en los seis tamaños, no desborda nada,
   así que la red se queda —por si acaso— pero en su versión que no rompe. */
@media (max-width: 900px) {
  html, body { overflow-x: clip !important; overflow-y: visible !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EL BOTÓN DE MENÚ NO EXISTE EN ESCRITORIO
   ═══════════════════════════════════════════════════════════════════════

   El JavaScript lo añade siempre, porque no sabe de anchos; quien decide si
   se ve es esta hoja. **Fuera de toda media query y escondido por defecto**:
   así, en escritorio, donde los cuatro enlaces caben en la barra, no aparece
   un icono de tres rayas al lado de unos enlaces que ya están a la vista. Se
   enciende sólo dentro del bloque de ≤ 900 px. */
nav [data-menu] { display: none; }

/* Y lo mismo con el selector de documento del centro legal: en escritorio el
   índice se ve entero en su columna y un botón para desplegarlo sobraría. */
aside [data-doc-menu] { display: none; }

/* Al meter los enlaces en un contenedor para poder desplegarlos, dejaron de
   ser hijos directos del `<aside>` y perdieron su `gap: 4px`. Se lo devuelve
   el contenedor, y así en escritorio se ven exactamente igual que antes. */
aside [data-doc-panel] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD — en todos los tamaños
   ═══════════════════════════════════════════════════════════════════════ */

/* Se ve por dónde vas con el teclado. El diseño no lo traía, y sin esto el
   sitio no se puede usar sin ratón. */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid #7A5A32 !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}