/* ============================================================
   Opción 6 · Color cálido, basado en proyectos5
   ------------------------------------------------------------
   Punto de partida: los naranjas y rojizos de la camisa de estampado floral
   (la de las fotos de prueba). El verde grisáceo (#d6dcd7) se sustituye por un
   crema muy claro, y aparece un acento naranja-rojizo para destacar términos
   sueltos en los textos. Variables reutilizables para lo que venga después.
   ============================================================ */
:root {
  --cream: #FAF6EF;              /* sustituye al verde grisáceo del hero/proyectos; más
                                     claro que la primera prueba (#F5EEE2) */
  --cream-rgb: 250,246,239;      /* mismo valor en rgb, para el velo del header */
  --sage: #E8ECE8;                /* el verde grisáceo original de la opción 5
                                      (#d6dcd7), aclarado un poco más; fondo de
                                      hero y proyectos */
  --sage-rgb: 232,236,232;        /* mismo valor en rgb, para aplicar con alpha
                                      (marca de agua "Drupal": mucho más tenue
                                      que el fondo, con este mismo tono) */
  --sage-dark: #C7CFC7;           /* fondo del hero */
  --sage-line: #F9FAF9;            /* mismo verde que --sage pero muy aclarado,
                                      casi blanco: líneas separadoras de
                                      proyectos sobre el fondo --sage */
  --accent: #E45B2D;              /* parada INTERMEDIA del degradado; también el
                                      color sólido de reserva si el navegador no
                                      soporta degradado sobre texto (ver .accent) */
  --accent-soft: #E7A15C;         /* tono más claro del mismo acento, por si hace falta */
  --accent-red: #EE1600;          /* rojo vivo: extremo INICIAL del degradado */
  --accent-salmon: #F59D66;       /* salmón/naranja claro: extremo FINAL del degradado */
  --accent-rgb: 228,91,45;        /* --accent en rgb, para aplicarlo con alpha */
  --accent-txt: #B83E15;          /* acento oscurecido para TEXTO PEQUEÑO (numeración,
                                      antetítulos): --accent no llega al contraste
                                      mínimo 4.5:1 sobre blanco ni sobre --sage */

  /* Cuerpo de texto "pequeño": lo comparten pacc__desc, whyd__argtxt,
     whyd__svclista li y svc2__lista li —cuatro sitios distintos que antes
     tenían cada uno su propio clamp() casi idéntico (14.7–17.6px) sin
     compartir nada. Un solo valor de referencia. */
  --fs-body-sm: clamp(.95rem, 1.1vw, 1.08rem);
}

/* Ítems del menú principal: al pasar el cursor, el naranja intermedio en vez
   del atenuado (opacity: .55) que trae opcion-c.css por defecto. */
.nav__links a { transition: color .3s var(--ease); }
.nav__links a:hover { color: var(--accent); opacity: 1; }

/* ============================================================
   Sección 2 · texto línea a línea + servicios
   ------------------------------------------------------------
   proyectos5.js parte el párrafo en líneas reales (según cómo caiga el texto a
   ese ancho) y envuelve cada una. Cada línea es una "ventana" con overflow
   oculto y dentro sube su contenido, escalonado. Se anula la animación en
   bloque que traía .stmt__big desde opcion-c.css: ahora la llevan las líneas.
   ============================================================ */
.stmt__wrap { width: 100%; }
/* text-wrap: balance reparte el texto en líneas de largo parecido, lo que evita
   que la última quede con una palabra suelta. Actúa durante la medición (con las
   palabras aún en línea), así que proyectos5.js recoge ya los cortes balanceados.
   No cubre todos los casos —el navegador deja de balancear a partir de ~6 líneas,
   justo lo que pasa en móvil—, de ahí la salvaguarda del JS. */
.stmt__big { opacity: 1; transform: none; transition: none; text-wrap: balance; }
.stmt__big.is-visible { transition: none; }
.stmt__big .ln { display: block; overflow: hidden;
  padding-bottom: .12em; margin-bottom: -.12em; }   /* aire para no cortar las colas de p/g/j */
.stmt__big .ln > span { display: block; transform: translateY(115%); opacity: 0;
  transition: transform 1.15s var(--ease), opacity 1.15s var(--ease); }
.stmt__big.is-visible .ln > span { transform: none; opacity: 1;
  transition-delay: calc(var(--l) * .11s); }
/* Palabras destacadas dentro del enunciado ("15 años", "conceptualización",
   "diseño", "desarrollo"). Las marca proyectos6.js AL REBALANCEAR las líneas
   (partir()), porque el algoritmo de equilibrado reescribe el HTML entero cada
   vez —también al redimensionar—, así que el color no puede ir fijo en el HTML
   de origen: se perdería en el primer recálculo. Solo color, sin negrita ni
   cambio de tamaño, para no alterar el ancho medido de cada palabra. */
/* Blanco por defecto; el degradado se revela solo cuando la sección "toca" el
   header fijo (clase .is-pinned en .stmt, puesta por proyectos6.js), y no de
   golpe: barrido de izquierda a derecha, un poco más tarde en cada palabra
   (--wi = su orden de aparición en el párrafo, lo pone proyectos6.js).
   Técnica de "máscara deslizante" SOBRE EL PROPIO TEXTO (nada de duplicarlo
   con un ::after superpuesto: eso dejaba un desfase de un par de píxeles
   entre las dos capas y se veía el blanco asomando por debajo). Dos fondos
   apilados, recortados a la forma del texto: arriba una máscara al doble de
   ancho (mitad transparente / mitad blanca, EN ESE ORDEN) que se desliza con
   background-position, abajo el degradado fijo. En reposo la máscara está en
   100% → su mitad blanca es la que cae dentro del texto → tapa el degradado
   entero → texto blanco. Al llevarla a 0% la mitad transparente entra desde
   la IZQUIERDA y va empujando a la blanca hacia la derecha, así el degradado
   se descubre de izquierda a derecha (si el orden de la máscara o el sentido
   de estos dos valores se invierte, el barrido sale al revés). */
.stmt__big .accent {
  color: var(--white);
  transition: color .5s var(--ease);
  transition-delay: calc(var(--wi, 0) * .18s);
}
/* Reserva para navegadores sin soporte de degradado sobre texto: cambio de
   color sólido, sin barrido (el @supports de abajo lo sustituye por el
   degradado + máscara deslizante donde sí hay soporte). */
.stmt.is-pinned .stmt__big .accent { color: var(--accent); }
/* Degradado rojo → naranja → salmón claro. Cada palabra/frase resaltada tiene
   SU PROPIO degradado (no uno continuo compartido entre todas): así "15 años"
   recorre las tres paradas dentro de esa frase, y "diseño" hace lo mismo
   dentro de la suya, en vez de un degradado único que dependería de la
   posición de cada palabra. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .stmt__big .accent {
    background-image:
      linear-gradient(90deg, transparent 0%, transparent 50%, var(--white) 50%, var(--white) 100%),
      linear-gradient(90deg, var(--accent-red) 0%, var(--accent) 50%, var(--accent-salmon) 100%);
    background-size: 200% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0, 0 0;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    transition: background-position .5s var(--ease);
    transition-delay: calc(var(--wi, 0) * .18s);
  }
  .stmt.is-pinned .stmt__big .accent { background-position: 0 0, 0 0; }
}

/* --- Servicios: tres columnas, texto mucho menor que el enunciado ---------- */
.svc2 { display: grid; grid-template-columns: 1.25fr 1fr 1fr;
  gap: clamp(1.5rem,4vw,3.5rem); margin-top: clamp(2.5rem,7vw,5.5rem); }
.svc2__intro { font-size: clamp(1.05rem,1.5vw,1.45rem); line-height: 1.5;
  color: rgba(var(--white-rgb), .7); max-width: 32ch; }
.svc2__tit { display: block; font-family: var(--disp); letter-spacing: -0.02em;
  font-size: clamp(1rem,1.35vw,1.3rem); margin-bottom: .9rem; color: var(--accent); }
.svc2__lista { list-style: none; }
.svc2__lista li { font-size: var(--fs-body-sm); color: rgba(var(--white-rgb), .85);
  padding: .55em 0; border-bottom: 1px solid rgba(var(--white-rgb), .14); }

/* Entrada escalonada: primero las columnas, y dentro cada línea de la lista */
.svc2__col { opacity: 0; transform: translateY(30px);
  transition: opacity .85s var(--ease), transform 1s var(--ease); }
.svc2.is-in .svc2__col { opacity: 1; transform: none; }
.svc2.is-in .svc2__col:nth-child(1) { transition-delay: .05s; }
.svc2.is-in .svc2__col:nth-child(2) { transition-delay: .18s; }
.svc2.is-in .svc2__col:nth-child(3) { transition-delay: .31s; }
.svc2__lista li { opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .7s var(--ease); }
.svc2.is-in .svc2__lista li { opacity: 1; transform: none; }
.svc2.is-in .svc2__col:nth-child(2) li:nth-child(1) { transition-delay: .30s; }
.svc2.is-in .svc2__col:nth-child(2) li:nth-child(2) { transition-delay: .37s; }
.svc2.is-in .svc2__col:nth-child(2) li:nth-child(3) { transition-delay: .44s; }
.svc2.is-in .svc2__col:nth-child(2) li:nth-child(4) { transition-delay: .51s; }
.svc2.is-in .svc2__col:nth-child(2) li:nth-child(5) { transition-delay: .58s; }
.svc2.is-in .svc2__col:nth-child(3) li:nth-child(1) { transition-delay: .43s; }
.svc2.is-in .svc2__col:nth-child(3) li:nth-child(2) { transition-delay: .50s; }
.svc2.is-in .svc2__col:nth-child(3) li:nth-child(3) { transition-delay: .57s; }
.svc2.is-in .svc2__col:nth-child(3) li:nth-child(4) { transition-delay: .64s; }
.svc2.is-in .svc2__col:nth-child(3) li:nth-child(5) { transition-delay: .71s; }
.svc2.is-in .svc2__col:nth-child(3) li:nth-child(6) { transition-delay: .78s; }

@media (max-width: 860px) {
  .svc2 { grid-template-columns: 1fr; gap: clamp(1.8rem,6vw,2.5rem); }
}
/* Movimiento reducido: entran con fundido, sin subir */
@media (prefers-reduced-motion: reduce) {
  .stmt__big .ln > span, .svc2__col, .svc2__lista li { transform: none !important; transition-duration: 1.2s !important; }
}

/* ============================================================
   Sección "Por qué Drupal"
   ------------------------------------------------------------
   En claro, para cortar con la sección oscura anterior. La palabra "Drupal"
   gigante actúa de marca de agua al fondo (data-mark le da el parallax
   horizontal que ya hace opcion-c.js). El contenido va en z-index superior.
   ============================================================ */
.whyd { position: relative; overflow: hidden; background: var(--bg); color: var(--ink);
  padding: clamp(4rem,10vh,7rem) var(--pad);
  --colgap: clamp(2.5rem,7.5vw,7rem); }   /* separación keypoints ↔ bloque de servicios */

/* Marca de agua: metida bastante hacia la derecha, gran parte fuera de la
   pantalla (recortada por el overflow:hidden de la sección). El empuje base va
   en % del ANCHO PROPIO del span (translateX con %, no vw): a este tamaño
   "Drupal" ocupa casi el 100% del viewport, así que un vw fijo es poco fiable
   —cambia mucho según el ancho de pantalla—, mientras que un % relativo a su
   propio ancho se mantiene proporcional siempre.
   El --markx (en vw, lo actualiza proyectos6.js con el scroll) es un AVANCE
   pequeño y lento sobre ese empuje base: la palabra se descubre un poco más a
   medida que se recorre la sección, sin llegar nunca cerca del otro extremo ni
   distraer. Ya NO lleva data-mark (ese atributo disparaba el parallax genérico
   de opcion-c.js, que pelearía por el mismo transform). */
.whyd__mark { position: absolute; right: 0; top: 50%;
  transform: translateY(-50%) translateX(calc(20% + var(--markx, 0px)));
  z-index: 0; pointer-events: none; user-select: none; }
.whyd__mark span { display: block; font-family: var(--disp); white-space: nowrap;
  font-size: min(24vw, 46vh); line-height: .9; letter-spacing: -0.04em;
  color: rgba(var(--sage-rgb), .4); }

.whyd__grid { position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: clamp(2.5rem,6vw,4.5rem); }

/* Dos columnas: argumentos apilados a la izquierda, servicios apilados a la derecha */
.whyd__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--colgap);
  align-items: start; }

/* Cabecera: logo oficial + enunciado */
.whyd__head { display: flex; flex-direction: column; gap: clamp(1.2rem,3vw,2rem);
  align-items: flex-start; }
.whyd__logo { width: clamp(150px,17vw,250px); height: auto; }
/* El enunciado ocupa exactamente el ancho de la primera columna: líneas más
   largas en pantallas anchas y su borde derecho cuadra con el de los keypoints. */
.whyd__title { font-family: var(--sans); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(1.7rem,3.6vw,3.4rem); line-height: 1.06;
  max-width: calc((100% - var(--colgap)) / 2); }

/* Argumentos apilados en su columna */
.whyd__args { list-style: none; display: flex; flex-direction: column;
  gap: clamp(1.4rem,3vw,2.2rem); }
.whyd__args li { display: flex; flex-direction: column; gap: .5rem;
  padding-top: clamp(.9rem,2vw,1.3rem); border-top: 1px solid var(--line); }
.whyd__num { font-size: .78rem; font-weight: 500; color: var(--accent-txt); }   /* toque de acento en la sección Drupal */
/* Sans en bold, no la display: Archivo Black manchaba demasiado a este tamaño */
.whyd__argtit { font-family: var(--sans); font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(1.05rem,1.6vw,1.5rem); line-height: 1.15; }
.whyd__argtxt { color: var(--soft); font-size: var(--fs-body-sm); line-height: 1.55; }

/* Servicios Drupal: dos columnas — lo que hago y con qué lo hago */
.whyd__svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,3vw,2.5rem); }
/* Son <button> para poder funcionar como pestañas en móvil; en desktop se
   presentan como simples rótulos (ambas listas están siempre visibles). */
/* Mismo tamaño y letter-spacing que "Diseño" / "Desarrollo web" en la sección 2,
   pero en el gris oscuro de siempre —aquí no hay acento naranja, la sección es
   clara y ya tiene bastante color con la marca de agua.
   OJO: NO usar var(--disp) (Archivo Black) aquí. Esa fuente solo trae un único
   peso, muy negro por diseño, así que cualquier font-weight que se le ponga
   (incluido 700) se renderiza igual de "extrabold" —es justo el bug que
   arrastraba esto. Con var(--sans) (Inter, que sí tiene un 700 real cargado)
   el font-weight se aplica de verdad y da una negrita normal. */
.whyd__svctit { display: block; font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1rem,1.35vw,1.3rem); color: var(--ink);
  margin-bottom: clamp(1rem,2vw,1.4rem);
  background: none; border: 0; padding: 0; text-align: left; cursor: default; }
.whyd__svclista { list-style: none; }   /* apilados, uno debajo de otro */
.whyd__svclista li { font-size: var(--fs-body-sm); padding: .7em 0;
  border-bottom: 1px solid var(--line); }

/* Entrada escalonada (la clase la pone proyectos5.js al asomar) */
.whyd__logo, .whyd__title, .whyd__args li, .whyd__svctit, .whyd__svclista li {
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s var(--ease), transform 1.05s var(--ease); }
.whyd__grid.is-in .whyd__logo,
.whyd__grid.is-in .whyd__title,
.whyd__grid.is-in .whyd__args li,
.whyd__grid.is-in .whyd__svctit,
.whyd__grid.is-in .whyd__svclista li { opacity: 1; transform: none; }
.whyd__grid.is-in .whyd__logo { transition-delay: 0s; }
.whyd__grid.is-in .whyd__title { transition-delay: .12s; }
.whyd__grid.is-in .whyd__args li:nth-child(1) { transition-delay: .30s; }
.whyd__grid.is-in .whyd__args li:nth-child(2) { transition-delay: .40s; }
.whyd__grid.is-in .whyd__args li:nth-child(3) { transition-delay: .50s; }
.whyd__grid.is-in .whyd__args li:nth-child(4) { transition-delay: .60s; }
.whyd__grid.is-in .whyd__svctit { transition-delay: .68s; }
.whyd__grid.is-in .whyd__svclista li:nth-child(1)  { transition-delay: .72s; }
.whyd__grid.is-in .whyd__svclista li:nth-child(2)  { transition-delay: .77s; }
.whyd__grid.is-in .whyd__svclista li:nth-child(3)  { transition-delay: .82s; }
.whyd__grid.is-in .whyd__svclista li:nth-child(4)  { transition-delay: .87s; }
.whyd__grid.is-in .whyd__svclista li:nth-child(5)  { transition-delay: .92s; }
.whyd__grid.is-in .whyd__svclista li:nth-child(6)  { transition-delay: .97s; }
.whyd__grid.is-in .whyd__svclista li:nth-child(7)  { transition-delay: 1.02s; }
.whyd__grid.is-in .whyd__svclista li:nth-child(8)  { transition-delay: 1.07s; }
.whyd__grid.is-in .whyd__svclista li:nth-child(9)  { transition-delay: 1.12s; }
.whyd__grid.is-in .whyd__svclista li:nth-child(n+10) { transition-delay: 1.17s; }

@media (max-width: 860px) {
  /* Mismo padding vertical que Proyectos, que ya estaba bien. Antes stmt usaba
     8vh (65px) y whyd 10vh (81px); ahora los tres comparten la misma regla. */
  .stmt, .whyd { padding-block: clamp(3rem, 7vw, 6rem); }
  /* En desktop .stmt se centra a pantalla completa (min-height:100svh +
     align-items:center, de opcion-c.css); eso es lo que dejaba tanto aire arriba
     y abajo del texto en móvil, aunque el padding ya fuera igual al de las demás
     secciones. Aquí se anula: fluye como el resto, alto = contenido + padding. */
  .stmt { min-height: 0; display: block; }

  .whyd__cols { grid-template-columns: 1fr; gap: clamp(2rem,8vw,3rem); }
  .whyd__title { max-width: none; }            /* el intro, a todo el ancho */
  /* Marca de agua bien arriba: pegada al intro, casi tocando el keypoint 01
     (medido para que ni suba a pisar el título ni baje hasta el keypoint 02;
     la superposición con "01" es intencionada, es un fondo translúcido). */
  .whyd__mark { top: 25%; }
  .whyd__mark span { font-size: 34vw; }

  /* --- "Por qué Drupal": tarjetas deslizables en horizontal (proyectos6.js pone .is-tarjetas)
     con scroll-snap. La siguiente asoma por la derecha para invitar a deslizar y
     los puntos de debajo marcan la posición (y llevan a cada tarjeta). --- */
  /* Todas a la altura de la más larga (align-items: stretch) */
  .whyd__args.is-tarjetas { flex-direction: row; align-items: stretch; gap: .75rem;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
    scrollbar-width: none; }
  .whyd__args.is-tarjetas::-webkit-scrollbar { display: none; }
  .is-tarjetas li { flex: 0 0 86%; scroll-snap-align: start; gap: .55rem;
    padding: 1.2rem 1.15rem 1.35rem; border: 1px solid rgba(var(--ink-rgb), .14); border-radius: var(--r-sm);
    background: rgba(var(--white-rgb), .78); }   /* blanco algo translúcido: deja intuir la marca de agua */
  /* Puntos centrados bajo las tarjetas; el activo, en naranja. Cada botón es más
     grande que su punto (área táctil) y su padding hace de separación. El margen
     negativo anula el hueco de la rejilla .whyd__cols para pegarse a las tarjetas. */
  .whyd__dots { display: flex; justify-content: center; margin-top: calc(.7rem - clamp(2rem,8vw,3rem)); }
  .whyd__dot { display: grid; place-items: center; height: 1.5rem; padding: 0 .4rem;
    background: none; border: 0; cursor: pointer; }
  .whyd__dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%;
    background: rgba(var(--ink-rgb), .22); transition: background-color .35s var(--ease); }
  .whyd__dot.is-on::before { background: var(--accent); }

  /* --- Pestañas: en móvil no caben dos listas en paralelo. Se eligen pestañas y
     no un carrusel deslizable porque ambas opciones son visibles de golpe (no hay
     que descubrir que se puede arrastrar), no dependen de escuchar el scroll y el
     contenido oculto no ocupa espacio. display:contents saca los títulos y las
     listas de sus columnas para colocarlos en la misma rejilla. --- */
  .whyd__svc { grid-template-columns: auto auto; justify-content: start;
    column-gap: clamp(1.2rem,5vw,2rem); row-gap: clamp(1rem,3vw,1.4rem); }
  .whyd__svccol { display: contents; }
  .whyd__svctit { grid-row: 1; margin-bottom: 0; cursor: pointer;
    padding-bottom: .45rem; border-bottom: 2px solid transparent; color: var(--soft);
    transition: color .3s var(--ease), border-color .3s var(--ease); }
  .whyd__svctit.is-active { color: var(--ink); border-bottom-color: var(--accent); }
  #whyd-t1 { grid-column: 1; }
  #whyd-t2 { grid-column: 2; }
  .whyd__svclista { grid-row: 2; grid-column: 1 / -1; display: none; }
  /* El cambio de display no es animable, así que la entrada se hace con una
     animación (sí se dispara al pasar de none a block) en vez de una transición. */
  /* Las listas, como etiquetas en varias columnas en vez de una por fila */
  .whyd__svclista.is-active { display: flex; flex-wrap: wrap; gap: .5rem; animation: whydTab .5s var(--ease) both; }
  .whyd__svclista li { padding: .5em .95em; border: 1px solid var(--line); border-radius: var(--r-pill); line-height: 1.2; }
  .whyd__svclista.is-active li { animation: whydTabLi .45s var(--ease) both; }
  .whyd__svclista.is-active li:nth-child(1) { animation-delay: .06s; }
  .whyd__svclista.is-active li:nth-child(2) { animation-delay: .10s; }
  .whyd__svclista.is-active li:nth-child(3) { animation-delay: .14s; }
  .whyd__svclista.is-active li:nth-child(4) { animation-delay: .18s; }
  .whyd__svclista.is-active li:nth-child(5) { animation-delay: .22s; }
  .whyd__svclista.is-active li:nth-child(6) { animation-delay: .26s; }
  .whyd__svclista.is-active li:nth-child(n+7) { animation-delay: .30s; }
}

@keyframes whydTab   { from { opacity: 0; } to { opacity: 1; } }
@keyframes whydTabLi { from { opacity: 0; transform: translateY(12px); }
                       to   { opacity: 1; transform: none; } }

/* Servicios (sección 2): desde ~400px ya caben Diseño y Desarrollo web en paralelo;
   el texto de intro se queda a todo el ancho por encima. */
@media (min-width: 400px) and (max-width: 860px) {
  .svc2 { grid-template-columns: 1fr 1fr; }
  .svc2__col:first-child { grid-column: 1 / -1; }
}
/* Movimiento reducido: entran con fundido, sin subir; las pestañas también */
@media (prefers-reduced-motion: reduce) {
  .whyd__logo, .whyd__title, .whyd__args li, .whyd__svctit, .whyd__svclista li { transform: none !important; transition-duration: 1.2s !important; }
  @keyframes whydTabLi { from { opacity: 0; } to { opacity: 1; } }
}

/* ============================================================
   Footer "cortina": se revela por debajo de la sección anterior
   ------------------------------------------------------------
   El footer va FIJO al fondo del viewport, detrás del contenido. main es opaco y
   va por encima; proyectos5.js le pone un margin-bottom = alto del footer, que
   crea el recorrido de scroll en el que main sube y lo destapa. Solo aplica en
   esta página (este CSS solo lo carga proyectos5).
   ============================================================ */
main { position: relative; z-index: 1; background: var(--bg); }

/* Menú hamburguesa + capa: solo existen en móvil (ver @media max-width:860px
   más abajo). Ocultos aquí por defecto para que en desktop no aparezcan
   —el <button> y el <div> se muestran igual que cualquier elemento si no se
   ocultan explícitamente. */
.nav__burger, .nav__drawer { display: none; }
body.nav-open { overflow: hidden; }   /* bloquea el scroll de fondo con la capa abierta */

/* Primer toque de color: crema muy claro en la sección de entrada.
   Fondo un poco más oscuro que --sage (solo aquí, no se toca la variable
   porque --sage se reutiliza en proyectos, degradados, etc.). */
.hero { background: var(--sage-dark); }

/* "Diseño. Desarrollo. Drupal." (y el nombre con el que alterna al hacer
   scroll, mismo tamaño en opcion-c.css) y el saludo del hero, un poco más
   pequeños que en el resto de opciones.
   Antes eran dos valores fijos (30px aquí / 19px en el media query de abajo)
   con un salto brusco justo en el punto de corte de 860px. Un solo clamp()
   fluido cubre todo el rango sin ese escalón: 19px hacia los 300px de ancho,
   30px a partir de ~1400px, y una rampa suave en medio (tablets incluidas). */
.nav__tag { font-size: clamp(19px, 1rem + 1vw, 30px); }
.hero__statement { font-size: clamp(1.2rem, 2vw, 32px); }

/* Marquesinas del hero (las tres tiras que cruzan detrás/delante de la foto), un
   poco más pequeñas en desktop —a modo de prueba—; en móvil siguen su propio
   tamaño (ver @media max-width:860px más abajo). Mismos componentes que en
   opcion-c.css escalados ~15%: menos vw, más divisor en el término de altura y
   topes más bajos. */
.mqtrack { font-size: clamp(2.1rem, min(18vw, calc((100vh - 260px) / 3.2)), 15rem); }

/* Prueba: palabras de la marquesina en blanco (heredaban --ink, casi negro),
   sin la opacity: .9 que trae opcion-c.css por defecto (.v-c .mqtrack span). */
.hero__mq { color: var(--white); }
.v-c .mqtrack span { opacity: 1; }

/* ============================================================
   Botón principal (.boton) · hero, "¿Tienes un proyecto en mente?" y cierre
   de los casos de estudio
   ------------------------------------------------------------
   Píldora negra con círculo de flecha; al pasar el cursor, el degradado de la
   marca entra desde la izquierda y la flecha gira hacia arriba.
   ============================================================ */
.boton { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 1.1rem;
  font: 600 clamp(1.15rem,1.7vw,1.5rem)/1 var(--sans); letter-spacing: -.01em;
  padding: 1.35rem 1.6rem 1.35rem 2.2rem; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); }
.boton::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-red), var(--accent) 50%, var(--accent-salmon));
  transform: translateX(-101%); transition: transform .6s var(--ease); }
.boton:hover::before, .boton:focus-visible::before { transform: none; }
.boton__flecha { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--bg); color: var(--ink); font-size: 1.1rem; transition: transform .5s var(--ease); }
.boton:hover .boton__flecha, .boton:focus-visible .boton__flecha { transform: translateX(.3rem) rotate(-45deg); }

/* Saludo del hero: el h1 hereda la tipografía de .hero__statement y el botón
   va debajo, en versión algo más compacta */
.hero__statement { max-width: min(880px, 54vw); }
.hero__saludo { font: inherit; }
.hero__cta { margin-top: clamp(1rem, 1.8vw, 1.6rem); gap: .9rem;
  font-size: clamp(1rem, 1.25vw, 1.2rem); padding: .55rem .6rem .55rem 1.6rem; }
.hero__cta .boton__flecha { width: 2.3rem; height: 2.3rem; font-size: 1rem; }
/* Móvil: el botón grande pasa a la talla compacta del hero */
@media (max-width: 760px) {
  .boton { gap: .9rem; font-size: 1.05rem; padding: .5rem .55rem .5rem 1.5rem; }
  .boton .boton__flecha { width: 2.3rem; height: 2.3rem; font-size: 1rem; }
}

/* ============================================================
   Hero en MÓVIL: pila vertical
   ------------------------------------------------------------
   En vez de superponer marquesinas, foto y texto (como en desktop), en móvil se
   apilan: tiras arriba, saludo debajo y la foto al fondo. La foto es más alta que
   el hueco que queda, así que el overflow del hero la CORTA en seco contra el
   borde inferior; por eso se retira el difuminado que traía opcion-c.css.
   ============================================================ */
@media (max-width: 860px) {
  /* Header en una sola fila: "Diseño. Desarrollo. Drupal." a la izquierda (tal
     cual en desktop, el .nav de opcion-c.css ya es flex + space-between) y la
     hamburguesa a la derecha, en el hueco que antes ocupaba el menú inline. El
     nombre (cambio al hacer scroll) no necesita override: sigue el mismo
     left:0 absoluto de opcion-c.css, ahora que el rótulo vuelve a ir a la
     izquierda como en desktop. */
  .nav { padding-block: clamp(1.1rem, 4.5vw, 1.6rem); }
  /* .nav__tag ya no necesita override aquí: el clamp() de arriba cubre todo
     el rango, móvil incluido. */
  .nav__links { display: none; }        /* el menú inline pasa a la capa de abajo */

  /* Botón hamburguesa, mismo trazo (1.5px, currentColor) que la X de cerrar de
     los proyectos: tres líneas que, al abrir, colapsan en X (la del medio se
     desvanece, las otras dos rotan ±45deg). */
  .nav__burger { display: block; position: relative; width: 26px; height: 18px;
    padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
    z-index: 501; }
  .nav__burger-line { position: absolute; left: 0; width: 100%; height: 1.5px;
    background: currentColor; border-radius: 1px;
    transition: top .35s var(--ease), transform .35s var(--ease), opacity .25s var(--ease); }
  .nav__burger-line:nth-child(1) { top: 0; }
  .nav__burger-line:nth-child(2) { top: 50%; margin-top: -.75px; }
  .nav__burger-line:nth-child(3) { top: 100%; margin-top: -1.5px; }
  .nav__burger.is-open .nav__burger-line:nth-child(1) { top: 50%; margin-top: -.75px; transform: rotate(45deg); }
  .nav__burger.is-open .nav__burger-line:nth-child(2) { opacity: 0; }
  .nav__burger.is-open .nav__burger-line:nth-child(3) { top: 50%; margin-top: -.75px; transform: rotate(-45deg); }

  /* Capa del menú: mismo gris oscuro que el preloader de entrada (.pre,
     var(--ink)) en vez del sage. Además de fundido, entra deslizándose desde
     arriba (eco del propio preloader, que se repliega hacia arriba al
     terminar la carga) + los enlaces subiendo uno a uno. visibility, con
     retardo SOLO al cerrar, evita que la capa invisible intercepte taps
     cuando is-open se quita (mismo truco que .pacc__panel/.pacc__more). */
  .nav__drawer { position: fixed; inset: 0; z-index: 480;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(1.1rem, 5vw, 1.8rem);
    background: var(--ink);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6%);
    transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s linear .4s; }
  .nav__drawer.is-open { opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s linear 0s; }
  .nav__drawer a { font-family: var(--disp); font-size: clamp(1.8rem, 8vw, 2.6rem);
    letter-spacing: -0.02em; color: var(--bg);
    opacity: 0; transform: translateY(16px);
    transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .nav__drawer.is-open a { opacity: 1; transform: none; }
  .nav__drawer.is-open a:nth-child(1) { transition-delay: .08s; }
  .nav__drawer.is-open a:nth-child(2) { transition-delay: .14s; }
  .nav__drawer.is-open a:nth-child(3) { transition-delay: .2s; }
  .nav__drawer.is-open a:nth-child(4) { transition-delay: .26s; }

  /* height fija (no min-height): si el contenido sobra, el hero NO crece y el
     overflow recorta la foto contra el borde inferior, que es lo que se busca.
     El padding-top crece con el header, que ahora ocupa más espacio. */
  .hero { display: flex; flex-direction: column; height: 100svh;
    padding-top: clamp(2.6rem, 7.2vh, 4rem); }   /* ~10px menos: separa aún más el conjunto de la foto */
  .hero::after { display: none; }              /* fuera el degradado sobre la foto */

  /* En el HTML la foto va antes del saludo (lo necesita el apilado de desktop);
     aquí se reordena para que el saludo quede en medio. */
  .hero__mq { order: 1; }
  .hero__statement { order: 2; }
  .hero__photo { order: 3; }

  /* flex:0 0 auto en tiras y saludo: sin esto encogen al ser hijos de un flex de
     altura fija y las letras salen recortadas. Quien debe ceder es la foto. */
  /* padding-top: con line-height .9 la caja de línea es más corta que el glifo y
     la tilde de la Ñ (DISEÑO) sobresale ~3px por arriba; al empezar la fila 1 justo
     en el borde del contenedor, que recorta, se cortaba. Este respiro la salva. */
  .hero__mq { position: static; inset: auto; height: auto; flex: 0 0 auto;
    padding-top: 2vw;
    gap: clamp(.05rem, .4vh, .3rem); margin-bottom: clamp(.5rem, 1.6vh, 1rem); }   /* acerca el saludo/botón a las marquesinas */
  /* El tamaño se fija en la PISTA, no en el span: así el punto separador, que se
     dimensiona en em, encoge en la misma proporción. */
  .mqtrack { font-size: clamp(1.2rem, 10vw, 3rem); }   /* un poco más pequeñas todavía */
  .mqtrack span { font-size: inherit; }

  /* Entrada más rápida SOLO en móvil (en desktop, opcion-c.css calibra la
     duración a la distancia real para que la velocidad sea constante entre
     entrada y bucle; aquí se prioriza que entren rápido aunque el bucle
     arranque con un pelín más de velocidad que el resto de la animación
     infinita —apenas se nota, es un solo instante). Mismo desfase relativo
     entre filas (día .1/.25/.4s) y mqscroll arranca justo cuando mqenter
     termina, para que no haya salto de posición. */
  body.loaded .mqrow[data-row="1"] .mqtrack { animation: mqenter 4.3s linear .1s both, mqscroll 35.49s linear 4.4s infinite, mqfade .5s linear .1s both; }
  body.loaded .mqrow[data-row="2"] .mqtrack { animation: mqenter 4s linear .25s both, mqscroll 25.76s linear 4.25s infinite, mqfade .5s linear .25s both; }
  body.loaded .mqrow[data-row="3"] .mqtrack { animation: mqenter 3.7s linear .4s both, mqscroll 28.98s linear 4.1s infinite, mqfade .5s linear .4s both; }

  /* Tamaño ajustado para que "…especializado en Drupal." quepa en una sola línea
     (medido: 328px de los 343 disponibles a 375px de pantalla). */
  .hero__statement { position: static; left: auto; bottom: auto; flex: 0 0 auto;
    margin: 0 var(--pad); max-width: none; text-align: center;
    font-size: clamp(1rem, 4.4vw, 1.4rem); line-height: 1.4; }

  .hero__photo { position: static; transform: none; align-self: center;
    margin-top: auto;                          /* empuja la foto al fondo */
    width: min(64%, 300px); height: auto; flex: 0 0 auto; }   /* más pequeña: menos protagonismo, más aire alrededor */
}

/* Tablets (iPad mini/Air/Pro 11", medido contra 820×1180): mismo hero apilado
   de arriba, pero con bastante más alto y ancho de sobra —los tamaños
   calibrados para un móvil se quedaban cortos. Marquesina y foto crecen; el
   saludo se estrecha para que reparta el texto en dos líneas más parejas (si
   se deja a max-width:none, la 2ª línea se queda con una sola palabra). */
@media (min-width: 600px) and (max-width: 860px) {
  .mqtrack { font-size: clamp(2rem, 8vw, 5rem); }
  .hero__photo { width: min(48%, 480px); }
  /* margin:auto (no el "0 var(--pad)" heredado de la regla móvil): esa caja
     ahora es más angosta que el hero, y sin auto se quedaba pegada a la
     izquierda —el texto se veía centrado DENTRO de una caja descentrada. */
  .hero__statement { max-width: min(62vw, 480px); margin-left: auto; margin-right: auto; }
}

/* ============================================================
   Header: barra esmerilada al hacer scroll
   ------------------------------------------------------------
   Arriba del todo se deja como estaba (mix-blend-mode: difference, que invierte
   el color según lo que tenga detrás). En cuanto se hace scroll, el nombre queda
   sobre marquesinas, foto y secciones de distinto color, y ahí la inversión no
   garantiza legibilidad: se cambia a barra translúcida con blur y color fijo.
   El blend y un fondo propio son incompatibles —el blend afectaría también al
   fondo—, así que al activarse se anula.
   ============================================================ */
/* .is-solid (no .is-scrolled): dispara mucho antes —ver proyectos5.js—, así el
   fondo ya está puesto antes de que la marquesina pase por debajo del header. */
.nav.is-solid { mix-blend-mode: normal; color: var(--ink); }
/* Header simple: blur + fondo semitransparente parejo en todo el alto del nav,
   sin degradado ni máscara (eso daba una doble transición — corte + difuminado —
   que se notaba demasiado). */
.nav.is-solid {
  background: rgba(var(--sage-rgb), .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color .45s var(--ease); }
.foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
.foot.is-tapado { opacity: 0; }         /* ver proyectos6.js: no cuenta como pintado mientras main lo tapa */
/* --- KHIUSTIN a ancho completo, revelado letra a letra ---------------------
   Las letras son flex items con space-between: el hueco entre ellas es el que
   sobra del ancho, así la palabra ocupa SIEMPRE el 100% (letter-spacing fluido).
   El revelado lo gobierna --rev (0→1), que proyectos5.js actualiza con el avance
   del scroll sobre el footer. Cada letra abre su opacidad al pasar su turno:
   con el factor 9 y --i de 0 a 7, la última se completa justo al final.
   Por defecto --rev vale 1 → sin JS, el footer se ve entero. */
.foot {
  --rev: 1;
  --marca-fs: min(13.4vw, 25vh);              /* tamaño de las letras de KHIUSTIN */
  /* Aire lateral del glifo: la caja de la K/N es más ancha que su tinta (0.074em
     medidos sobre Archivo Black). Sirve para cuadrar las columnas con la palabra. */
  --marca-aire: calc(var(--marca-fs) * 0.074);
  --hueco: clamp(2.5rem, 5vw, 4rem);          /* mismo hueco que el superior del footer */
}
.foot__mark { display: flex; justify-content: space-between; align-items: flex-end;
  overflow: visible; margin-bottom: clamp(1rem,2.5vw,2rem); }
.foot__mark span { display: block; font-family: var(--disp); line-height: .8;
  letter-spacing: normal;                     /* el hueco lo da space-between */
  font-size: var(--marca-fs); color: var(--sage);
  opacity: clamp(0, calc(var(--rev) * 9 - var(--i)), 1); }

/* --- Columnas: entrada tras las letras ------------------------------------- */
.foot__cols > .fcol { opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .9s var(--ease); }
.foot.is-revealed .foot__cols > .fcol { opacity: 1; transform: none; }
.foot.is-revealed .fcol:nth-child(1) { transition-delay: .05s; }
.foot.is-revealed .fcol:nth-child(2) { transition-delay: .17s; }
.foot.is-revealed .fcol:nth-child(3) { transition-delay: .29s; }
/* Las tres columnas, todas alineadas a la izquierda. El bloque se mete hacia dentro
   el aire del glifo, así la 1ª cuadra con el arranque de la K y el borde derecho de
   la 3ª con el final de la N (si no, quedaría desplazado ese medio dedo de aire). */
.foot__cols { padding-inline: var(--marca-aire); }
/* stretch (no flex-start) para que cada línea ocupe el ancho de su columna: así el
   border-bottom marca la retícula. El texto sigue a la izquierda por text-align. */
.fcol { align-items: stretch; text-align: left; gap: 0; }
.fcol > a, .fcol > .fcol__big {
  padding: .45em 0 .3em;
  border-bottom: 1px solid rgba(var(--white-rgb), .16);   /* discreto: solo insinúa el ancho */
}
/* Enlaces del footer, algo más pequeños que el tamaño original del sitio */
.fcol a, .fcol__big { font-size: clamp(1.15rem, 2vw, 1.9rem); }

/* Línea de estado bajo KHIUSTIN: repartida de extremo a extremo (space-between),
   cuadrada con la tinta de la palabra igual que las columnas. */
.foot__estado { display: flex; justify-content: space-between; gap: 1rem;
  padding-inline: var(--marca-aire); margin-bottom: clamp(.5rem,1.5vw,1rem);
  font-family: var(--sans); font-weight: 500; letter-spacing: -0.015em;
  font-size: clamp(1rem,2.1vw,1.7rem); color: rgba(var(--white-rgb), .78); }
/* fadeIn escalonado al destaparse la línea (la clase la pone proyectos5.js) */
.foot__estado span { opacity: 0; transition: opacity .8s var(--ease); }
.foot.is-estado .foot__estado span { opacity: 1; }
.foot.is-estado .foot__estado span:nth-child(1) { transition-delay: 0s; }
.foot.is-estado .foot__estado span:nth-child(2) { transition-delay: .18s; }
.foot.is-estado .foot__estado span:nth-child(3) { transition-delay: .36s; }

/* El botón ocupa ahora la tercera columna, con altura normal y centrado en ella */
.fcol--btn { justify-content: center; }
.foot__hablamos { display: flex; align-items: center; justify-content: center; width: 100%;
  padding: clamp(.85rem,1.5vw,1.15rem) 1.5rem;
  border: 1px solid rgba(var(--white-rgb), .35); border-radius: var(--r-pill);
  font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; text-align: center;
  font-size: clamp(1.1rem,2.2vw,1.8rem); color: var(--bg);
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .9s var(--ease),
              background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
.foot__hablamos:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.foot.is-revealed .foot__hablamos { opacity: 1; transform: none; transition-delay: .41s; }

/* Barra de copyright: se separa con un gris algo más claro en vez de con una línea.
   Los márgenes negativos la llevan a sangre (bordes y fondo del footer). */
.foot__bar { border-top: 0; background: var(--grafito);
  margin-inline: calc(-1 * var(--pad));
  margin-bottom: calc(-1 * clamp(1.5rem,3vw,2rem));   /* anula el padding inferior del footer */
  padding: clamp(1rem,2vw,1.4rem) var(--pad); }

/* Móvil: columnas 1 y 2 en paralelo y el botón debajo, a todo el ancho.
   (opcion-c.css las apila a 1 columna por debajo de 860px; aquí se recupera el par.) */
@media (max-width: 860px) {
  .foot__cols { grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,4vw,2rem); }
  .fcol--btn { grid-column: 1 / -1; margin-top: clamp(.5rem,2vw,1rem); }
  .foot__hablamos { min-height: 0; }
  .foot__estado { font-size: clamp(.7rem,2.6vw,.95rem); gap: .5rem; }
  /* Copyright y "Volver arriba" apilados y centrados, no en extremos opuestos */
  .foot__bar { flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
}

/* Movimiento reducido: las letras del pie siguen apareciendo con opacidad (no se
   mueven); columnas, botón y menú móvil entran con fundido, sin desplazarse. */
@media (prefers-reduced-motion: reduce) {
  .foot__cols > .fcol, .foot__hablamos { transform: none !important; }
  .foot__cols > .fcol { transition-duration: 1.2s !important; }
  .nav__drawer, .nav__drawer a { transform: none !important; }
}

/* Crédito "Hecho con ♥ por Khiustin": centrado en la barra de copyright.
   Rejilla de 3 columnas para que quede centrado de verdad aunque los extremos
   midan distinto. El corazón late una vez al pasar por encima. */
.foot__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.foot__bar .foot__top-link { justify-self: end; }
.foot__credit { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
.foot__heart { width: .95em; height: .95em; fill: var(--accent); flex: none;
  transform-origin: 50% 60%; }
.foot__credit:hover .foot__heart { animation: foot-latido .9s var(--ease) 1; }
@keyframes foot-latido {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.3); }
  40% { transform: scale(.95); }
  60% { transform: scale(1.18); }
}
@media (max-width: 860px) {
  .foot__bar { display: flex; }
  .foot__bar .foot__top-link { justify-self: auto; }
}
@media (prefers-reduced-motion: reduce) { .foot__credit:hover .foot__heart { animation: none; } }

/* ============================================================
   Accesibilidad y semántica
   ============================================================ */
/* Texto solo para lectores de pantalla (títulos de sección que el diseño no
   muestra, p. ej. "Sobre mí") */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* "Saltar al contenido": invisible hasta que recibe el foco con el teclado */
.skip { position: fixed; top: .75rem; left: .75rem; z-index: 2000;
  padding: .7rem 1rem; border-radius: var(--r-pill); background: var(--ink); color: var(--bg);
  font-weight: 600; transform: translateY(-200%); transition: transform .3s var(--ease); }
.skip:focus { transform: none; }
/* Foco visible con teclado en todo el sitio */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Los rótulos que ahora son h3 conservan el aspecto que tenían */
.svc2__tit { font-weight: 400; }          /* Archivo Black solo tiene un peso: sin negrita sintética */
.whyd__svccab { font: inherit; }
@media (max-width: 860px) { .whyd__svccab { display: contents; } }