/* ============================================================
   mision.html — «Nuestra misión»

   Traducida de una exportación de Claude Design (Misión Hipatia.dc.html),
   igual que se hizo con precios.html. Del original solo se conserva el
   contenido y la composición: la sintaxis del runtime en vivo (x-dc,
   <sc-if>, <sc-for>, {{ }}, style-hover, class Component extends DCLogic)
   no existe fuera de su editor y aquí está resuelta de forma estática —
   las dos condiciones (showManifesto, showContact) venían con valor por
   defecto true, así que sus secciones se quedan siempre visibles, y el
   bucle de correos son los dos <a> de .mis-cta__acciones.

   El original traía TODO el color en hexadecimales dentro de atributos
   style="". Aquí va con las variables de :root, que es lo que pide el
   proyecto. Equivalencias aplicadas:
     #F0E4D0 → --sand    #FAF3E7 → --cream   #3D4127 → --deep
     #636B2F → --olive   #D9DCC0 → --pale
     #B4BC8E → --sage    (es el valor RETIRADO de --sage; docs/colores.html
                          documenta que se unificó en #BAC095)
     #E3E0C3 → --pale    (círculo decorativo del hero)
     #4E5626 → --olive   (no está en la paleta; --olive es el más cercano)
   ============================================================ */

/* La barra entra con navDrop y sus <li> con itemIn, dos animaciones
   encadenadas a la intro de la portada: 1,94s de espera antes de asomar.
   Aquí no hay intro a la que esperar, así que la barra tiene que estar
   puesta desde el primer fotograma. transform:none no es de adorno: la
   regla base de .nav deja el elemento en translateY(-160%) y era la propia
   animación (fill both) la que lo traía a su sitio, así que quitándola sin
   más la barra se quedaría fuera de pantalla. Mismo apaño que ya llevan
   contacto.css, portfolio.css y presupuesto.css. */
.nav{animation:none;transform:none}
.nav__menu li{animation:none;opacity:1;transform:none}
/* .nav__mark lleva pointer-events:none en estilos.css (ahí es solo decorativo,
   un SVG suelto); aquí la marca es un enlace al inicio, así que hay que
   devolverle los clics a la propia <a>. Y el ancho va sobre <img>, porque la
   regla de estilos.css apunta a .nav__mark svg y esta página usa una imagen.
   Mismas tres líneas que en servicios.css, contacto.css, portfolio.css y
   presupuesto.css. */
.nav__mark a{pointer-events:auto;display:block}
.nav__mark img{width:198px;height:auto;display:block}
@media (max-width:820px){.nav__mark img{width:150px}}

.page>.jardin{position:fixed;inset:0;width:100vw;height:100vh;margin:0;z-index:0;overflow:hidden}
.mis{position:relative;z-index:1}

/* text-align:left explícito en toda la página. La base global es
   body{text-align:justify}, y aquí hay titulares grandes de pocas palabras
   por línea que SÍ envuelven (el h1 va a 17ch): justify estira los huecos
   entre palabras de todas las líneas menos la última y se nota muchísimo.
   Es el mismo fallo que ya apareció en precios.html; se corrige por página,
   nunca tocando la base global. */
/* Un único hueco entre bloques, pedido explícito. Antes cada sección traía
   su propia separación —los paddings de .mis-dos, los márgenes de .mis-metodo,
   de la frase y de .mis-pareja— y los saltos salían de 40, 72, 104, 144 y hasta
   184px según el par de bloques que tocara. Ahora la separación la pone solo la
   página, con --hueco, y es la misma en todas partes. El valor de partida fue
   el salto que había del 03 al 04 —clamp(40px,6vw,72px), que venía del
   padding-bottom de .mis-dos— y de ahí se ha pedido la mitad dos veces, así
   que va por la cuarta parte de aquello. Los tres valores del clamp se
   dividen siempre, no solo el máximo, para que el hueco quede igual de
   apretado en las pantallas intermedias y no solo en escritorio.
   Para reafinar el ritmo de la página entera se toca aquí y en ningún sitio más;
   los bloques no llevan margen ni padding vertical propios, con una sola
   excepción: el 02 se cierra a medio hueco (ver .mis-metodo), y lo hace por
   calc sobre --hueco para no salirse de este ritmo. */
.mis{--hueco:clamp(10px,1.5vw,18px);
  max-width:1200px;margin-inline:auto;padding-bottom:96px;text-align:left}
.mis>*{margin-bottom:var(--hueco)}
.mis>*:last-child{margin-bottom:0}
.mis h1,.mis h2,.mis h3,.mis p,.mis li,.mis blockquote,.mis figcaption{text-align:left}

/* etiqueta numerada de cada bloque (01 · El desfase) */
.mis-num{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
         color:var(--olive);margin-bottom:14px}

.mis-h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;line-height:1.12;
        letter-spacing:-.03em;text-wrap:balance}
.mis-h2--corta{max-width:18ch}
.mis-h3{font-size:clamp(23px,2.5vw,30px);font-weight:800;line-height:1.15;
        letter-spacing:-.02em;margin-bottom:16px;text-wrap:balance}

/* ============ portada ============ */
.mis-hero{position:relative;padding:clamp(56px,9vw,112px) 0 0}
/* el círculo de fondo va en --pale y detrás de todo; pointer-events:none
   para que no se coma ningún clic del texto que tiene encima */
.mis-hero__blob{position:absolute;top:4%;right:-4%;z-index:0;pointer-events:none;
  width:clamp(180px,26vw,340px);height:clamp(180px,26vw,340px);
  border-radius:var(--r-pill);background:var(--pale)}
.mis-hero__in{position:relative;z-index:1}
/* la píldora del antetítulo: --deep sobre --pale da 7,5 de contraste */
.mis-tag{display:inline-flex;align-items:center;font-size:12px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--deep);
  background:var(--pale);padding:8px 18px;border-radius:var(--r-pill);margin-bottom:26px}
.mis-hero__title{font-size:clamp(40px,7vw,88px);font-weight:800;line-height:1.18;
  letter-spacing:-.04em;max-width:17ch;text-wrap:balance}
.mis-hero__vuelta{color:var(--olive)}
.mis-hero__lead{font-size:clamp(18px,2vw,21px);line-height:1.6;margin-top:34px;
  max-width:56ch;color:rgba(61,65,39,.8);text-wrap:pretty}

/* ============ bloque de dos columnas (se repite en 01, 02 y 03) ============ */
.mis-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(24px,4vw,64px);align-items:start}
/* separa la intro del 02 de sus dos cajas. Va con --hueco, el mismo de la
   página: tenía un valor propio (hasta 44px) y, al quedarse el resto en 18,
   era el único salto grande que quedaba; leyendo la página de arriba abajo
   parecía que separaba el 02 del 03, cuando en realidad estaba DENTRO del 02. */
.mis-dos--ajustada{margin-bottom:var(--hueco)}
.mis-dos__titular{font-size:clamp(24px,2.9vw,34px);font-weight:800;line-height:1.18;
  letter-spacing:-.025em;text-wrap:balance}
/* el padding-top alinea ópticamente esta columna con la primera línea del
   titular de al lado, que es bastante más grande */
.mis-dos__texto{font-size:17px;line-height:1.7;padding-top:33px;
  color:rgba(61,65,39,.85);max-width:54ch;text-wrap:pretty}

/* ============ citas firmadas (01 y 03) ============ */
/* Las dos citas van en tarjeta y del mismo color, pedido explícito: son el
   bloque que tiene que resaltar sobre el arena del resto de la página. Ese
   color es ahora --deep con la letra en --cream —9,1 de contraste—, y vive
   aquí, en la base, no en .mis-cita--grande: lo pidió primero la frase de
   Vicente y después la de Alejandra, así que ha dejado de ser cosa del
   modificador. Todo por variables y ningún hexadecimal suelto: si algún día se
   retoca la paleta, esto la sigue. (Antes fue --pale, y antes de eso un azul
   claro que NO estaba en :root ni en docs/colores.html.)
   El borde también se va: era un verde al 14% pensado para el fondo claro y
   sobre --deep no llegaba a dibujar nada.
   El <figure> solo envuelve la cita y su firma: el texto conserva
   .mis-dos__texto para no duplicar la tipografía de esa columna. */
.mis-cita{background:var(--deep);border:0;
  border-radius:22px;padding:clamp(24px,3vw,34px);max-width:58ch;
  box-shadow:0 20px 44px -28px rgba(61,65,39,.55)}
/* dentro de la tarjeta sobra el padding-top de .mis-dos__texto: ese hueco
   estaba para alinear ópticamente su primera línea con el titular de al
   lado, y aquí quien pone el aire es el padding de la propia tarjeta. El
   texto va en --cream sólido (fuera de la tarjeta el cuerpo va al 85% de
   --deep) y sube un punto de cuerpo. */
.mis-cita .mis-dos__texto{padding-top:0;max-width:none;color:var(--cream);
  font-size:clamp(18px,1.9vw,20px);font-weight:600}
.mis-cita__firma{margin-top:14px;font-size:14px;font-weight:700;
  color:rgba(250,243,231,.72);letter-spacing:.01em}

/* ============ la frase (el catch) ============ */
/* La cita de Vicente es el catch de la página y va a lo ancho, en el hueco
   donde antes estaba el manifiesto: hereda su geometría (radio 36 y el mismo
   padding) y su escala de cuerpo, pero con el
   aspecto de tarjeta de las citas. Aquí vivía la regla del manifiesto, que se
   ha ido con su <section>: esta era la única página que la usaba. El color ya
   no vive aquí: --deep con la letra en crema es el de las dos citas y lo pone
   .mis-cita; este modificador se queda solo con la geometría y la escala. */
.mis-cita--grande{max-width:none;border-radius:36px;
  padding:clamp(36px,6vw,80px)}
.mis-cita--grande .mis-dos__texto{font-size:clamp(26px,3.8vw,48px);font-weight:800;
  line-height:1.12;letter-spacing:-.03em;max-width:34ch}
.mis-cita--grande .mis-cita__firma{margin-top:22px;font-size:16px}

/* ============ 02 · el método ============ */
/* El salto del 02 al 03 va a la mitad del hueco de la página, pedido explícito.
   Es el único bloque que cierra con tarjetas —las dos .mis-caja de .mis-reparto,
   con hasta 36px de relleno propio abajo—, así que a los 18px de fuera se les
   sumaba ese aire de dentro y el salto se leía más largo que los demás. Va por
   calc sobre --hueco y no por un valor suelto: si se reafina el ritmo de la
   página, este salto lo sigue. Tiene que quedar DESPUÉS de .mis>*, que es de la
   misma especificidad y gana el último. */
.mis-metodo{margin-bottom:calc(var(--hueco)/2)}
.mis-reparto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(20px,3vw,32px)}
.mis-caja{border-radius:32px;padding:clamp(24px,3vw,36px)}
.mis-caja--borde{border:1px solid rgba(61,65,39,.16)}
.mis-caja--crema{background:var(--cream)}
.mis-caja__t{font-size:19px;font-weight:800;color:var(--olive);margin-bottom:20px}
.mis-lista{list-style:none;display:flex;flex-direction:column;gap:12px;
  font-size:16px;line-height:1.5;color:rgba(61,65,39,.85)}
/* el punto de cada línea se dibuja con ::before en vez de con un <span>
   vacío como en el original: no es contenido, es decoración */
.mis-lista li{display:flex;gap:12px;align-items:baseline}
.mis-lista li::before{content:'';width:7px;height:7px;flex:none;
  border-radius:var(--r-pill);background:var(--sage)}
.mis-lista--oscura li::before{background:var(--olive)}

/* ============ 04 · el compromiso ============ */
.mis-compromiso{background:var(--cream);border-radius:36px;
  padding:clamp(30px,5vw,64px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(24px,4vw,64px);align-items:start}
.mis-compromiso .mis-h2{margin-bottom:18px}
.mis-compromiso__texto{font-size:17px;line-height:1.7;
  color:rgba(61,65,39,.85);text-wrap:pretty}
.mis-nota{background:var(--sand);border-radius:26px;padding:clamp(22px,3vw,34px)}
.mis-nota__t{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(61,65,39,.55);margin-bottom:14px}
.mis-nota p:not(.mis-nota__t){font-size:16px;line-height:1.7;
  color:rgba(61,65,39,.85);text-wrap:pretty}
.mis-nota p:not(.mis-nota__t):first-of-type{margin-bottom:14px}

/* ============ 05 / 06 ============ */
.mis-pareja{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(24px,3vw,40px)}
.mis-tarjeta{border-radius:36px;padding:clamp(28px,4vw,48px)}
.mis-tarjeta p:not(.mis-num){font-size:16px;line-height:1.7;text-wrap:pretty}
.mis-tarjeta--clara{background:var(--pale)}
.mis-tarjeta--clara p:not(.mis-num){color:rgba(61,65,39,.85)}
/* tarjeta oscura: --sand sobre --deep da 8,4 */
.mis-tarjeta--oscura{background:var(--deep);color:var(--sand)}
.mis-tarjeta--oscura .mis-num{color:var(--sage)}
.mis-tarjeta--oscura p:not(.mis-num){color:rgba(240,228,208,.82)}

/* ============ hablemos ============ */
/* La tarjeta va en --cream con el texto en --deep, pedido explícito: 9,1 de
   contraste. El antetítulo pierde .mis-num--clara (era --pale, pensado para el
   olivo de antes; sobre crema se quedaba en 1,4) y vuelve al --olive normal de
   .mis-num, que da 5,2. Esa clase no la usaba nadie más y se ha ido con él.
   Sobre el --sand de la página el crema es un tono apenas más claro, igual que
   .mis-compromiso del 04: la tarjeta se lee por el radio y el relleno, no por
   el color. */
.mis-cta{background:var(--cream);color:var(--deep);border-radius:36px;
  padding:clamp(32px,5vw,72px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(24px,4vw,56px);align-items:center}
.mis-cta__title{font-size:clamp(28px,3.6vw,46px);font-weight:800;line-height:1.08;
  letter-spacing:-.03em;margin-bottom:14px;text-wrap:balance}
.mis-cta__lead{font-size:16px;line-height:1.6;color:rgba(61,65,39,.85);
  max-width:44ch;text-wrap:pretty}
.mis-cta__acciones{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
/* el style-hover="..." del original (atributo propio de Claude Design) es
   aquí una regla :hover normal */
/* los correos se invierten con la tarjeta: en --sand sobre crema el botón
   desaparecía (1,1 entre los dos fondos), así que van sólidos en --deep con
   letra --cream: 9,1 de contraste, el mismo par que la tarjeta al revés. El
   :hover aclara a --pale en vez de oscurecer, que es lo que hace el
   .btn--solid del sitio: partiendo de --deep no queda hacia dónde bajar. Al
   aclarar tanto, la letra tiene que girar con el fondo —crema sobre --pale se
   queda en 1,2— y vuelve a --deep, que sobre --pale da 7,5. Por eso el color
   entra también en la transición: si no, el texto saltaría de golpe. */
.mis-correo{display:inline-flex;align-items:center;gap:10px;background:var(--deep);
  color:var(--cream);font-weight:800;font-size:16px;text-decoration:none;
  padding:15px 28px;border-radius:var(--r-pill);
  transition:background .2s ease,color .2s ease}
.mis-correo:hover{background:var(--pale);color:var(--deep)}

/* ============ pie ============ */
/* mismo mecanismo que .svc-footer en servicios.css: .panel__in>* arranca en
   opacity:0 en estilos.css y solo sube a 1 con un ancestro .drawer.open, que
   en una página suelta no existe — sin esta regla el pie sería invisible */
.mis-footer{margin-top:clamp(60px,8vw,110px)}
.mis-footer .panel{border-radius:34px 34px 0 0}
.mis-footer .panel__in{padding-top:40px}
.mis-footer .panel__in>*{opacity:1!important;transform:none!important}

@media (max-width:820px){
  /* sin dos columnas no hay nada con lo que alinear ópticamente */
  .mis-dos__texto{padding-top:0}
  .mis-cta__acciones{align-items:stretch}
  .mis-correo{justify-content:center}
}

@media (max-width:600px){
  .mis-correo{padding-inline:12px;font-size:14px;overflow-wrap:anywhere}
  .mis-cta{padding-inline:22px}
}