/* =============================================================
   CAUREN · Estrategia digital — hoja de estilo
   -------------------------------------------------------------
   Un solo archivo, sin dependencias ni compilación: se edita y se
   recarga el navegador. Paleta y tipografía salen del manual de
   identidad corporativa (pág. 17 y 18).

   CÓMO ESTÁ ORDENADO
   Primero lo que vale para toda la web (1–5) y después cada
   sección, en el mismo orden en que se ve la página (6–17).

      1. Tokens .................. colores, medidas, tipografía
      2. Reset y base
      3. Utilidades .............. contenedores y micro-etiquetas
      4. Tipografía de página .... titulares y entradillas
      5. Componentes ............. botones y marca

      6. Cabecera y navegación
      7. Portada
      8. Cómo pensamos
      9. Servicios
     10. Nuestro trabajo (proyectos)
     11. Marcas que gestionamos
     12. Contenidos (reels)
     13. Contacto
     14. Pie

     15. Pantalla de entrada
     16. Aparición al hacer scroll
     17. Movimiento reducido .... lo que se apaga si el sistema
                                  del visitante lo pide

   REGLAS DE LA CASA
   · Los colores y las medidas no se escriben a mano: salen de los
     tokens del bloque 1. Si un valor se repite, es que falta token.
   · Las clases describen QUÉ es, no cómo se ve: .reel, .marca,
     .contacto-datos. En español, como el resto.
   · Los estados van con is-: .is-open, .is-revealed, .is-solid.
   · Las clases que empiezan por data- no se tocan desde aquí: son
     los enganches del JavaScript (listado completo en main.js).
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* --- Colores de marca (manual, pág. 17) --- */
  --verde-hondo: #0D3F26;
  --verde-medio: #3B7255;
  --gris-marca:  #CECECE;
  --negro-marca: #0F0F0F;
  --blanco:      #FFFFFF;

  /* Tinte digital del verde de marca: el #3B7255 no tiene contraste
     suficiente sobre negro para texto pequeño, así que se aclara
     manteniendo el mismo tono. Solo para texto y detalles finos. */
  --verde-claro: #7FB79A;

  /* --- Roles --- */
  --bg:        var(--negro-marca);
  --bg-2:      #151715;
  --bg-3:      #1B1E1C;
  --ink:       var(--blanco);
  --ink-2:     var(--gris-marca);
  --ink-3:     #8A908C;
  --accent:    var(--verde-claro);
  --accent-2:  var(--verde-medio);
  --line:      rgba(206, 206, 206, 0.14);
  --line-soft: rgba(206, 206, 206, 0.07);
  --error:     #F0A0A0;

  /* Fondo de los paneles de marca (proyectos y marcas) mientras
     no hay vídeo o captura */
  --panel: linear-gradient(155deg, #16281F 0%, #0D1512 100%);

  /* --- Medidas --- */
  --bleed:   clamp(1.25rem, 5vw, 5.5rem);
  --maxw:    76rem;
  --maxw-txt: 46rem;
  --gap:     clamp(1.5rem, 3vw, 3rem);
  --seccion: clamp(5rem, 11vw, 10rem);
  --radio:   2px;

  /* --- Micro-etiquetas ---
     El texto pequeño en mayúsculas que se repite por toda la web.
     Solo dos tamaños: el de las cabeceras de sección y el pequeño
     de las fichas. Se cambian aquí y cambian en todas partes. */
  --micro:          .69rem;
  --micro-track:    .18em;
  --micro-lg:       .78rem;
  --micro-lg-track: .22em;

  /* --- Tipografía --- */
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Curvas --- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =============================================================
   2. Reset y base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

::selection { background: var(--verde-medio); color: var(--blanco); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radio);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =============================================================
   3. Utilidades
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem;
  background: var(--accent); color: var(--negro-marca);
  font-weight: 600; border-radius: var(--radio);
}
.skip-link:focus { top: 1rem; }

/* Texto que solo leen los lectores de pantalla (títulos de tabla, etc.) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--bleed);
}
.wrap-estrecho {
  width: 100%;
  max-width: calc(var(--maxw-txt) + var(--bleed) * 2);
  margin-inline: auto;
  padding-inline: var(--bleed);
}

.section { position: relative; padding-block: var(--seccion); }

/* Micro-etiquetas: misma forma en toda la web, solo cambia el color
   y dónde se ponen. Si necesitas una nueva, añádela a esta lista. */
.eyebrow,
.kicker,
.svc-why span,
.svc-extra-t,
.proy-espera em,
.proy-meta,
.marca-meta,
.marca-svc-t,
.reel-pie,
.contacto-datos li > span:first-child,
.campo label {
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
}
/* Las dos que encabezan bloque van un punto más grandes */
.eyebrow,
.kicker { font-size: var(--micro-lg); letter-spacing: var(--micro-lg-track); }

.eyebrow {
  color: var(--accent);
  margin-bottom: 1.4rem;
}

.section-head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-note {
  margin-top: 1.5rem;
  max-width: 40ch;
  color: var(--ink-3);
  font-size: 1rem;
}

/* =============================================================
   4. Tipografía de página
   ============================================================= */
.h2 {
  font-size: clamp(2rem, 5.4vw, 4.1rem);
  font-weight: 700;
  max-width: 20ch;
}

.h2 strong { color: var(--accent); font-weight: 700; }

.h2-outline {
  transition: color .5s var(--ease-out), -webkit-text-stroke-color .5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .h2-outline:hover {
    color: transparent;
    -webkit-text-stroke: 1px var(--accent);
  }
}

.lead {
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 42ch;
  margin-top: 2rem;
}
.lead strong { color: var(--ink); font-weight: 600; }
.lead-sm { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.65; max-width: 48ch; color: var(--ink-3); }

/* =============================================================
   5. Componentes
   ============================================================= */

/* --- Botones (efecto elevar) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  background: var(--accent);
  color: var(--negro-marca);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -0.01em;
  border-radius: var(--radio);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background .3s var(--ease-out);
}
.btn:hover {
  transform: translateY(-4px);
  background: #94C7AC;
  box-shadow: 0 22px 44px rgba(0,0,0,.45), 0 10px 22px rgba(59,114,85,.28);
}
.btn:active { transform: translateY(-1px); transition-duration: .12s; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(206,206,206,.06); border-color: var(--accent); box-shadow: none; }

.btn-sm { padding: .7rem 1.25rem; font-size: .9rem; }

/* Botón de WhatsApp: el verde de la marca, no el de la app. Lo que
   lo identifica es el icono; el color sigue siendo el de Cauren. */
.btn-wa { margin-top: clamp(2rem, 3.5vw, 2.8rem); }
.ico-wa { width: 1.2rem; height: 1.2rem; }

/* --- Marca --- */
.brand-logotipo { width: auto; height: 1.35rem; color: var(--ink); }

/* =============================================================
   6. Cabecera y navegación
   ============================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  padding-block: 1.15rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .45s var(--ease-out), border-color .45s var(--ease-out), padding .45s var(--ease-out), backdrop-filter .45s var(--ease-out);
}
.nav.is-solid {
  padding-block: .8rem;
  background: rgba(15,15,15,.92);
  border-bottom-color: var(--line-soft);
}
@supports (backdrop-filter: blur(14px)) {
  .nav.is-solid { background: rgba(15,15,15,.72); backdrop-filter: blur(14px) saturate(150%); }
}

.nav-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--bleed);
  display: flex; align-items: center; gap: 2rem;
}
.nav-brand { margin-right: auto; display: flex; align-items: center; }
.nav-brand .brand-logotipo { height: 1.15rem; }

.nav-links { display: none; gap: 2rem; }
.nav-link {
  position: relative;
  font-size: .92rem; font-weight: 500;
  color: var(--ink-2);
  padding: .25rem 0;
  transition: color .3s var(--ease-out);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-soft);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { display: none; }

.nav-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; margin-right: -10px;
  align-items: flex-end;
}
.nav-burger span {
  display: block; height: 1.5px; width: 26px; background: var(--ink);
  transition: transform .4s var(--ease-out), width .4s var(--ease-out), opacity .3s;
}
.nav-burger span:last-child { width: 18px; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { width: 26px; transform: translateY(-4px) rotate(-45deg); }

.menu-movil {
  position: fixed; inset: 0; z-index: 890;
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  padding: 6rem var(--bleed) 3rem;
  background: var(--bg);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease-out);
}
.menu-movil[hidden] { display: none; }
.menu-movil.is-open { opacity: 1; pointer-events: auto; }
.menu-movil nav { display: flex; flex-direction: column; gap: .35rem; }
.menu-movil nav a {
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink);
  padding-block: .35rem;
  border-bottom: 1px solid var(--line-soft);
}
.menu-movil-cta { margin-top: 2.5rem; align-self: flex-start; }

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger { display: none; }
  .menu-movil { display: none !important; }
}

/* =============================================================
   7. Portada
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: 9rem 5rem;
  overflow: hidden;
  isolation: isolate;
}

/* --- LA FIRMA DE ESTA WEB: la malla verde que sigue al ratón --- */
.mesh {
  position: absolute; inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle 520px at var(--mx, 50%) var(--my, 45%),
      rgba(127,183,154,.30) 0%, transparent 58%),
    radial-gradient(circle 760px at calc(var(--mx, 50%) + 12%) calc(var(--my, 45%) - 12%),
      rgba(59,114,85,.42) 0%, transparent 60%),
    radial-gradient(circle 900px at calc(var(--mx, 50%) - 16%) calc(var(--my, 45%) + 16%),
      rgba(13,63,38,.75) 0%, transparent 62%),
    radial-gradient(circle 1100px at 50% 120%, rgba(13,63,38,.5) 0%, transparent 60%);
  filter: blur(48px) saturate(135%);
  will-change: background;
}
.mesh-baja { inset: -30% -20% -20%; opacity: .8; }

/* Grano fino: quita el aspecto plano de los degradados */
.grano {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.42'/></svg>");
}

.hero-in {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--bleed);
}

.kicker {
  color: var(--accent);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  display: inline-flex; align-items: center; gap: .8rem;
}
.kicker::before {
  content: ""; width: clamp(24px, 5vw, 56px); height: 1px;
  background: var(--accent); opacity: .6;
}

.hero-title {
  font-size: clamp(2.7rem, 8.4vw, 7rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.045em;
  max-width: 15ch;
}
.hero-title em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
}

.hero-cta {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  display: flex; flex-wrap: wrap; gap: .9rem;
}

.hero-meta {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  font-size: .82rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}

.hero-scroll {
  position: absolute; left: 50%; bottom: 2rem;
  transform: translateX(-50%);
  width: 1px; height: 54px;
  background: var(--line);
  overflow: hidden;
}
.hero-scroll span {
  position: absolute; inset: 0;
  background: var(--accent);
  animation: scrollHint 2.6s var(--ease-soft) infinite;
}
/* En móvil el indicador roza la fila de servicios: mejor no mostrarlo */
@media (max-width: 719px) { .hero-scroll { display: none; } }

@keyframes scrollHint {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* =============================================================
   8. Cómo pensamos (clase .manifiesto)
   ============================================================= */
.manifiesto { background: var(--bg); }
.manifiesto .lead:first-of-type { margin-top: 2.4rem; }

/* =============================================================
   9. Servicios (la lista que se despliega)
   ============================================================= */
.servicios { background: var(--bg-2); }

.svc-lista { border-top: 1px solid var(--line); }

.svc { border-bottom: 1px solid var(--line); }
.svc h3 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: normal; }

.svc-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  text-align: left;
  transition: color .4s var(--ease-out);
}

.svc-num {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-3);
  padding-top: .5rem;
  transition: color .4s var(--ease-out);
}

.svc-txt { display: block; }
.svc-title {
  display: block;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--ink);
  transition: color .4s var(--ease-out);
}
.svc-lead {
  display: block;
  margin-top: .5rem;
  font-size: 1rem; font-weight: 300;
  color: var(--ink-3);
  max-width: 44ch;
  line-height: 1.5;
  text-wrap: pretty;
}
@media (min-width: 960px) { .svc-lead { max-width: 62ch; } }

.svc-mas {
  position: relative;
  width: 34px; height: 34px;
  margin-top: .3rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  flex: none;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out), transform .5s var(--ease-out);
}
.svc-mas::before, .svc-mas::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--ink-2);
  transition: transform .45s var(--ease-out), background .4s var(--ease-out);
}
.svc-mas::before { width: 13px; height: 1.5px; transform: translate(-50%,-50%); }
.svc-mas::after  { width: 1.5px; height: 13px; transform: translate(-50%,-50%); }

.svc-head:hover .svc-title { color: var(--accent); }
.svc-head:hover .svc-num { color: var(--accent); }
.svc-head:hover .svc-mas { border-color: var(--accent); }
.svc-head:hover .svc-mas::before,
.svc-head:hover .svc-mas::after { background: var(--accent); }

.svc-head[aria-expanded="true"] .svc-mas { transform: rotate(180deg); border-color: var(--accent); }
.svc-head[aria-expanded="true"] .svc-mas::after { transform: translate(-50%,-50%) scaleY(0); }
.svc-head[aria-expanded="true"] .svc-mas::before { background: var(--accent); }
.svc-head[aria-expanded="true"] .svc-title { color: var(--accent); }

/* Sin JavaScript los paneles se quedan abiertos: el contenido nunca se pierde. */
.svc-panel-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 3rem;
  padding: 0 0 clamp(1.8rem, 3vw, 2.6rem) 0;
}
.js [data-acordeon] .svc-panel {
  display: grid;
  grid-template-rows: 1fr;
}
.js [data-acordeon].is-listo .svc-panel {
  transition: grid-template-rows .55s var(--ease-out), opacity .45s var(--ease-out);
}
.js [data-acordeon] .svc-panel > * { overflow: hidden; }
.js [data-acordeon] .svc-panel.is-closed { grid-template-rows: 0fr; opacity: 0; }
/* El relleno inferior es parte de la caja del panel: si no se apaga,
   un panel cerrado sigue ocupando ~29 px de hueco muerto. */
.js [data-acordeon] .svc-panel.is-closed .svc-panel-in { padding-block-end: 0; }
.js [data-acordeon].is-listo .svc-panel-in { transition: padding-block-end .55s var(--ease-out); }

.svc-items { display: grid; gap: .55rem; }
.svc-items li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1rem; font-weight: 300;
  color: var(--ink-2);
}
.svc-items li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
}

.svc-why {
  align-self: start;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--accent-2);
  background: rgba(59,114,85,.09);
  font-size: .98rem; font-weight: 300;
  color: var(--ink-2);
}
.svc-why span {
  display: block;
  color: var(--accent);
  margin-bottom: .45rem;
}

/* Un bloque de más dentro de un servicio (Presencia local en Google) */
.svc-extra {
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
}
.svc-extra-t { color: var(--accent); margin-bottom: .8rem; }

@media (min-width: 960px) {
  .svc-panel-in {
    grid-template-columns: 1.25fr .9fr;
    padding-left: calc(1.5rem + 2.5rem);
  }
  /* Con bloque extra, el «Para qué» se queda arriba a la derecha */
  .svc-extra + .svc-why { grid-column: 2; grid-row: 1 / span 2; }
}

/* =============================================================
   10. Proyectos
   Cada tarjeta lleva un vídeo del sitio funcionando. Mientras no
   haya archivo, se ve un panel de marca en su lugar: nunca un
   hueco roto.
   ============================================================= */
.proyectos { background: var(--bg); }

.proy-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

.proy-media {
  position: relative;
  /* En el móvil, más alta: se recortan los lados y el sitio se ve más grande.
     De tableta para arriba, 2:1, que es como se graban los recorridos: entra
     la web entera sin recortar nada. */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--panel);
  transition: border-color .45s var(--ease-out);
}
.proy-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
}
.proy-media.is-lista .proy-video { opacity: 1; }

.proy-espera {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: .9rem;
  transition: opacity .5s var(--ease-out);
}
.proy-media.is-lista .proy-espera { opacity: 0; }
.proy-espera svg { width: clamp(34px, 4vw, 46px); height: auto; color: var(--accent-2); }
.proy-espera em {
  font-style: normal;
  color: var(--ink-3);
}

@media (hover: hover) and (pointer: fine) {
  .proy:hover .proy-media { border-color: var(--accent-2); }
  .proy:hover .proy-video { transform: scale(1.035); }
}

.proy-info { padding-top: 1.5rem; }
.proy-t { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.proy-meta {
  margin-top: .55rem;
  color: var(--accent);
}
.proy-que {
  margin-top: .95rem;
  font-size: 1rem; font-weight: 300;
  color: var(--ink-2);
  max-width: 46ch;
}
/* El enlace con flecha: lo comparten proyectos y marcas */
.proy-link,
.marca-link {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.2rem;
  font-size: .95rem; font-weight: 600;
  color: var(--ink);
  transition: color .35s var(--ease-out);
}
.proy-link::after,
.marca-link::after { content: "\2197"; transition: transform .4s var(--ease-out); }
.proy-link:hover,
.marca-link:hover { color: var(--accent); }
.proy-link:hover::after,
.marca-link:hover::after { transform: translate(3px, -3px); }
.proy-link[hidden] { display: none; }

@media (min-width: 720px) { .proy-media { aspect-ratio: 2 / 1; } }

@media (min-width: 960px) {
  .proy-grid { grid-template-columns: repeat(2, 1fr); }

  /* El primer trabajo ocupa el ancho completo: es la carta de presentación.
     Debajo, el título a la izquierda y la explicación a la derecha. */
  .proy--destacado { grid-column: 1 / -1; }
  .proy--destacado .proy-t { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
  .proy--destacado .proy-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    grid-template-areas:
      "titulo texto"
      "meta   texto"
      ".      enlace";
    grid-template-rows: auto auto 1fr;
    row-gap: 0;
    align-content: start;
  }
  .proy--destacado .proy-t    { grid-area: titulo; }
  .proy--destacado .proy-meta { grid-area: meta; }
  .proy--destacado .proy-que  { grid-area: texto; align-self: start; margin-top: .4rem; max-width: 52ch; }
  .proy--destacado .proy-link { grid-area: enlace; align-self: start; justify-self: start; margin-top: 1.1rem; }
}

/* =============================================================
   11. Marcas que gestionamos
   Referencias del trabajo, no casos de éxito: captura del perfil,
   rubro, lo que hace Cauren y el enlace a Instagram. Mientras no
   haya captura (<img class="marca-img">) se ve el isotipo con la
   cuenta: nunca un hueco roto.
   ============================================================= */
.marcas { background: var(--bg-2); }
/* El titular va en dos líneas: «una forma propia de comunicar» entera */
.marcas .h2 { max-width: 26ch; }

.marcas-grid { display: grid; gap: clamp(2.5rem, 4vw, 3.2rem) var(--gap); }

.marca { display: flex; flex-direction: column; }

.marca-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--panel);
  transition: border-color .45s var(--ease-out);
}
/* La captura tapa el panel de espera; se ve desde arriba del perfil */
.marca-img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .9s var(--ease-out);
}

.marca-espera {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: .9rem;
}
.marca-espera svg { width: clamp(30px, 3.4vw, 40px); height: auto; color: var(--accent-2); }
.marca-espera em {
  font-style: normal;
  font-size: .9rem; font-weight: 500;
  color: var(--ink-3);
}

@media (hover: hover) and (pointer: fine) {
  .marca:hover .marca-media { border-color: var(--accent-2); }
  .marca:hover .marca-img { transform: scale(1.035); }
}

/* En columna flexible para que «Ver perfil» quede a la misma altura
   en todas las tarjetas de una fila */
.marca-info { display: flex; flex-direction: column; flex: 1; padding-top: 1.4rem; }
.marca-t { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.marca-meta { margin-top: .55rem; color: var(--accent); }
.marca-svc-t { margin-top: 1.3rem; color: var(--ink-3); }
.marca-svc {
  margin-top: .65rem;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.marca-svc li {
  padding: .3rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem; font-weight: 400;
  color: var(--ink-2);
}
.marca-link { margin-top: auto; padding-top: 1.3rem; align-self: flex-start; }

@media (min-width: 720px)  { .marcas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .marcas-grid { grid-template-columns: repeat(3, 1fr); } }

/* =============================================================
   12. Contenidos (reels)
   Carrusel horizontal en formato reel (9:16), con los mismos tres
   fondos que usa la cuenta: verde, negro y gris claro. Se mueve
   con el dedo, con la rueda o con las dos flechas (main.js).
   ============================================================= */
.reels { background: var(--bg); }

/* --- Barra de arriba: pista para el dedo y flechas --- */
.reels-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  min-height: 2.6rem;
}
.reels-pista {
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.reels-flechas { display: flex; gap: .5rem; margin-left: auto; }
.reels-flechas[hidden] { display: none; }

.flecha {
  display: grid; place-content: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  transition: border-color .35s var(--ease-out), background .35s var(--ease-out),
              color .35s var(--ease-out), opacity .35s var(--ease-out);
}
.flecha svg { width: 1.1rem; height: 1.1rem; }
.flecha:hover { border-color: var(--accent); color: var(--accent); background: rgba(206,206,206,.05); }
.flecha[disabled] { opacity: .3; pointer-events: none; }

/* --- La pista del carrusel --- */
.reels-carrusel {
  display: flex;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Los reels llegan hasta el borde del bloque y asoma el siguiente */
  margin-inline: calc(var(--bleed) * -1);
  padding-inline: var(--bleed);
  padding-bottom: 1.1rem;
  scroll-padding-inline-start: var(--bleed);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-2) var(--line-soft);
}
.reels-carrusel::-webkit-scrollbar { height: 4px; }
.reels-carrusel::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 999px; }
.reels-carrusel::-webkit-scrollbar-thumb { background: var(--accent-2); border-radius: 999px; }

.reel {
  position: relative;
  flex: 0 0 auto;
  width: clamp(13.5rem, 24vw, 17rem);
  /* Formato reel */
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--bg-3);
  transition: transform .45s var(--ease-soft), border-color .45s var(--ease-out),
              box-shadow .45s var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .reel:hover {
    transform: translateY(-4px);
    border-color: var(--accent-2);
    box-shadow: 0 22px 44px rgba(0,0,0,.45);
  }
  .reel:hover .reel-marca { transform: scale(1.06) rotate(-5deg); }
}

/* La portada del reel. Si una imagen no cargara, la tarjeta se queda
   con su color de fondo y la frase: la sección nunca se rompe. */
.reel-portada { position: absolute; inset: 0; z-index: 0; }
.reel--foto .reel-portada {
  background-image: var(--portada, none);
  background-size: cover;
  background-position: center;
}
/* Velo solo en la parte de abajo: lo justo para que se lea «Ver el reel» */
.reel--foto .reel-portada::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15,15,15,.8) 100%);
}

/* El isotipo de marca, como marca de agua */
.reel-marca {
  position: absolute; right: -16%; bottom: -8%; z-index: 0;
  width: 62%;
  color: var(--blanco);
  opacity: .07;
  pointer-events: none;
  transition: transform .8s var(--ease-out);
}
.reel-marca svg { width: 100%; height: auto; }

.reel-gancho {
  position: relative; z-index: 1;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.reel-gancho em { font-style: normal; color: var(--accent); }

.reel-pie {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ink-3);
}
.reel-play { width: 1.05rem; height: 1.05rem; color: var(--accent); }

/* --- Los tres fondos de la cuenta --- */
.reel--verde { background: var(--verde-hondo); border-color: rgba(206,206,206,.1); }
.reel--verde .reel-gancho em { color: var(--verde-claro); }
.reel--verde .reel-pie { color: rgba(255,255,255,.6); }

.reel--negro { background: var(--bg-3); }

.reel--claro { background: #E8E8E6; border-color: rgba(15,15,15,.14); }
.reel--claro .reel-gancho { color: var(--verde-hondo); }
.reel--claro .reel-gancho em { color: var(--verde-medio); }
.reel--claro .reel-pie { color: rgba(15,15,15,.5); }
.reel--claro .reel-play { color: var(--verde-medio); }
.reel--claro .reel-marca { color: var(--verde-hondo); opacity: .12; }
/* Con portada, la frase ya va impresa en la imagen del reel: no se
   repite encima. Se queda en el HTML, invisible, para que el enlace
   tenga nombre en los lectores de pantalla y en los buscadores. */
.reel--foto .reel-gancho {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.reel--foto .reel-marca { display: none; }
.reel--foto .reel-pie { margin-top: auto; color: rgba(255,255,255,.85); }
.reel--foto .reel-play { color: var(--accent); }

.reels-pie {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem;
}
.reels-pie p { font-size: .95rem; font-weight: 300; color: var(--ink-3); max-width: 34ch; }

/* Con el dedo la pista ya se desliza; la nota sobra en pantalla grande */
@media (min-width: 62rem) { .reels-pista { display: none; } }

/* =============================================================
   13. Contacto
   ============================================================= */
.contacto {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.contacto-in {
  display: grid; gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}
/* Columna de texto. El min-width: 0 evita que un correo largo
   ensanche su columna y descuadre el formulario de al lado. */
.contacto-txt { min-width: 0; }
/* En columna estrecha el titular necesita menos cuerpo para no romperse en cinco líneas */
.contacto .h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); max-width: 16ch; }

.mail-grande {
  display: inline-block;
  position: relative;
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
  font-size: clamp(1.3rem, 3.6vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.03em;
  color: var(--ink);
  word-break: break-word;
}
.mail-grande::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.12em;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease-soft);
}
.mail-grande:hover { color: var(--accent); }
.mail-grande:hover::after { transform: scaleX(1); transform-origin: left; }

.contacto-datos {
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
  display: grid; gap: .9rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 1.6rem;
}
.contacto-datos li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem;
  font-size: .95rem; color: var(--ink-2);
}
.contacto-datos li > span:first-child {
  color: var(--ink-3);
  padding-top: .35em;
}
.contacto-datos a:hover { color: var(--accent); }

/* --- Formulario --- */
.formulario {
  display: grid; gap: 1.2rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  background: rgba(206,206,206,.03);
  border-radius: var(--radio);
}
.campo { display: grid; gap: .45rem; }
.campo label { color: var(--ink-3); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .85rem .95rem;
  font: inherit; font-size: .98rem; font-weight: 300;
  color: var(--ink);
  background: rgba(15,15,15,.6);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  transition: border-color .35s var(--ease-out), background .35s var(--ease-out);
}
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--ink-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(15,15,15,.85);
}
.campo select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.campo select option { background: var(--bg-2); color: var(--ink); }
/* Mientras sigue en «Elegí una opción», se lee como un placeholder */
.campo select:invalid { color: var(--ink-3); }

/* Campo obligatorio sin completar: borde y aviso debajo */
.campo [aria-invalid="true"],
.campo [aria-invalid="true"]:focus { border-color: var(--error); }
.campo-error { font-size: .84rem; line-height: 1.4; color: var(--error); }

.form-pie { margin-top: .4rem; }
.btn-form { width: 100%; }
.btn-form[disabled] { opacity: .6; pointer-events: none; }
.form-aviso {
  margin-top: .9rem;
  font-size: .84rem; line-height: 1.5;
  color: var(--ink-3);
}
/* Vacío no ocupa sitio; con mensaje, aparece debajo del aviso */
.form-nota { font-size: .92rem; line-height: 1.5; }
.form-nota:not(:empty) { margin-top: 1rem; }
.form-nota.is-error { color: var(--error); }
.form-nota.is-ok {
  padding: .9rem 1.1rem;
  border-left: 2px solid var(--accent);
  background: rgba(127,183,154,.1);
  color: var(--ink);
}

@media (min-width: 960px) {
  .contacto-in { grid-template-columns: 1fr .85fr; gap: clamp(3rem, 6vw, 6rem); }
  .formulario { position: sticky; top: 6rem; }
}

/* =============================================================
   14. Pie
   ============================================================= */
.pie {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 6vw, 5rem);
}
.pie-in {
  display: grid; gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pie-marca .brand-logotipo { height: 1.3rem; margin-bottom: 1.2rem; }
.pie-marca p { font-size: .95rem; font-weight: 300; color: var(--ink-3); max-width: 32ch; }

.pie-nav { display: grid; gap: .6rem; align-content: start; }
.pie-nav a { font-size: .95rem; color: var(--ink-2); width: fit-content; }
.pie-nav a:hover { color: var(--accent); }

.pie-contacto { display: grid; gap: .6rem; align-content: start; }
.pie-contacto > * { font-size: .95rem; color: var(--ink-2); width: fit-content; }
.pie-contacto a:hover { color: var(--accent); }

.pie-legal {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line-soft);
  font-size: .82rem; color: var(--ink-3);
}
.pie-iso svg { width: 22px; height: auto; color: var(--accent-2); }

@media (min-width: 720px) {
  .pie-in { grid-template-columns: 1.4fr .8fr .8fr; gap: 3rem; }
}

/* =============================================================
   15. Pantalla de entrada
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-content: center; justify-items: center; gap: 1.6rem;
  background: var(--bg);
  /* Seguridad: aunque el JavaScript falle, a los 4,5 s se aparta sola. */
  animation: splashSafety .01s 4.5s forwards;
}
@keyframes splashSafety {
  to { opacity: 0; pointer-events: none; visibility: hidden; }
}
.splash.is-out {
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .7s var(--ease-out), visibility 0s .7s;
}
.splash-mark svg {
  width: clamp(46px, 8vw, 68px); height: auto;
  color: var(--accent);
  animation: splashPulse 1.8s var(--ease-soft) infinite;
}
@keyframes splashPulse {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-6px); }
}
.splash-line {
  display: block; width: 120px; height: 1px;
  background: var(--line);
  overflow: hidden; position: relative;
}
.splash-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  animation: splashBar 1.6s var(--ease-soft) infinite;
}
@keyframes splashBar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* =============================================================
   16. Aparición al hacer scroll
   ============================================================= */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  /* Red de seguridad: si algo falla, a los 5 s aparece igualmente. */
  animation: revealSafety .01s 5s forwards;
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@keyframes revealSafety { to { opacity: 1; transform: none; } }

/* =============================================================
   17. Movimiento reducido
   Solo se apaga lo intrusivo. Las microinteracciones se quedan:
   en Windows esta preferencia viene activada de fábrica y la web
   se vería muerta.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll span { animation: none; }
  .splash-mark svg { animation: none; opacity: 1; }
  .splash-line::after { animation: none; transform: translateX(0); }
}