/* ═══════════════════════════════════════════════════════════════
   E&S ESTUDIO — landing "Papel"
   Hoja rayada, tinta, cinta de papel. Todo con CSS: cero imágenes.

   Nota sobre las transiciones: el estilo pide "sin transiciones",
   pero un cambio de estado a 0 ms es un anti-patrón de interacción.
   Resolvemos con 140 ms — se siente seco, no digital, y avisa.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --papel:  #FAFAF8;
  --papel2: #F3F1EA;
  --blanco: #FFFFFF;
  --tinta:  #1A1A1A;
  --lapiz:  #4A4A4A;
  --kraft:  #C4A77D;
  --kraft-o:#403214;
  --raya:   rgba(26,26,26,.055);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --bd: 1.5px solid var(--tinta);

  --pad: clamp(20px, 5vw, 44px);
  --sec: clamp(58px, 8vw, 96px);
  --t: 140ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--tinta);
  background:var(--papel);
  background-image:repeating-linear-gradient(0deg, transparent 0 31px, var(--raya) 31px 32px);
  font-family:var(--sans); font-size:clamp(16px,1.05vw,17px); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; text-wrap:pretty; }

h1,h2,h3{ margin:0; font-weight:650; letter-spacing:-.035em; line-height:1.08; }
h1{ font-size:clamp(2.3rem,6.2vw,4rem); letter-spacing:-.045em; }
h2{ font-size:clamp(1.65rem,3.4vw,2.4rem); }
h3{ font-size:1.05rem; letter-spacing:-.02em; line-height:1.3; }

/* subrayado de marcador */
h1 u{ text-decoration:none; background:linear-gradient(var(--kraft),var(--kraft))
  no-repeat 0 88% / 100% .26em; padding:0 .04em; }

/* ── "negocio": el sello que cae ──────────────────────────────
   Dos gestos distintos y en orden: primero la palabra se estampa
   sobre la hoja, después el fibrón pasa por "necesita".

   La sombra kraft es la misma sombra dura que tienen los botones y
   las tarjetas, pero acá además cuenta la caída: arranca en 9px
   (la palabra todavía está en el aire) y se cierra a 2px cuando
   toca el papel. El desenfoque inicial es la tinta antes de asentar.

   Todo el efecto es transform + text-shadow, o sea que no ocupa ni
   un pixel de layout: con line-height 1.08 la tinta del título llena
   casi toda la caja de línea y no hay lugar para nada alrededor.
   (Por eso quedó descartado el círculo a mano: en mobile el óvalo
   terminaba a 1.8px de la tinta de "necesita".) */
.sellada{
  display:inline-block;
  transform:rotate(-1.2deg);
  text-shadow:2px 2px 0 var(--kraft);
}
.js h1 .sellada{ opacity:0; }
.js .reveal.in .sellada{ animation:sellar .46s cubic-bezier(.2,.75,.3,1) .28s both; }
@keyframes sellar{
  0%  { opacity:0; transform:rotate(-6deg)   scale(1.3);  filter:blur(2.5px);
        text-shadow:9px 9px 0 var(--kraft); }
  60% { opacity:1; transform:rotate(-1.2deg) scale(.985); filter:blur(0);
        text-shadow:1px 1px 0 var(--kraft); }
  100%{ opacity:1; transform:rotate(-1.2deg) scale(1);    filter:blur(0);
        text-shadow:2px 2px 0 var(--kraft); }
}

/* ── el marcador que pasa solo ────────────────────────────────
   Una sola pasada, no un loop: un loop deja de ser una anotación
   y pasa a ser un cartel. Entra cuando el sello ya cayó. */
.js h1 .marca{ background-size:0 .26em; }
.js .reveal.in .marca{ animation:marcador .48s cubic-bezier(.32,.06,.28,1) .8s forwards; }
@keyframes marcador{ to{ background-size:100% .26em; } }

:focus-visible{ outline:2.5px solid var(--tinta); outline-offset:3px; }
::selection{ background:var(--kraft); color:var(--kraft-o); }

.skip{ position:absolute; left:-9999px; top:10px; z-index:200;
  background:var(--tinta); color:var(--papel); padding:12px 18px; font-weight:600; }
.skip:focus{ left:10px; }

.wrap{ width:100%; max-width:1080px; margin-inline:auto; padding-inline:var(--pad); }
/* Mismo ancho que .wrap: si se centrara en 720px, el borde izquierdo de
   "Quiénes somos" y del formulario saltaría respecto del resto de la página.
   Lo que se angosta es el contenido (.texto, .form), no el contenedor. */
.wrap--tight{ max-width:1080px; }

.sec{ padding-block:var(--sec); border-top:var(--bd); }
.sec--alt{ background:var(--papel2); }

.texto{ color:var(--lapiz); max-width:58ch; margin-top:18px; }
.lead{ font-size:clamp(1.04rem,1.5vw,1.18rem); color:var(--lapiz); max-width:50ch; margin-top:22px; }
.aside{ margin-top:26px; font-family:var(--serif); font-style:italic;
  font-size:1rem; color:var(--lapiz); }

/* ── cinta de papel ─────────────────────────────────────────── */
.tape{
  display:inline-block; transform:rotate(-1.5deg); margin-bottom:22px;
  background:var(--kraft); color:var(--kraft-o);
  padding:6px 16px; font-size:.82rem; font-weight:600; letter-spacing:.02em;
}

/* ── botones (mínimo 48px de alto, dedo cómodo) ─────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 24px; border:var(--bd);
  background:var(--tinta); color:var(--papel);
  font-family:inherit; font-size:.95rem; font-weight:600; cursor:pointer;
  transform:rotate(-.7deg); box-shadow:4px 4px 0 var(--kraft);
  transition:transform var(--t) linear, box-shadow var(--t) linear;
}
.btn:hover{ transform:rotate(-.7deg) translate(-2px,-2px); box-shadow:6px 6px 0 var(--kraft); }
.btn:active{ transform:rotate(-.7deg) translate(2px,2px); box-shadow:1px 1px 0 var(--kraft); }
.btn--sm{ min-height:44px; padding:10px 17px; font-size:.87rem; box-shadow:3px 3px 0 var(--kraft); }
.btn--big{ min-height:56px; padding:17px 30px; font-size:1.05rem; }

/* Este va derecho, y es el único. La inclinación queda bien en un botón
   corto, pero acá el ancho es completo (641px en escritorio): a -0.7° el
   borde de arriba sube 7.8px de punta a punta, o sea que la línea de 1px
   tiene que saltar de fila ocho veces. Un escalón cada 82px sobre un borde
   duro y sobre una sombra sin desenfoque = se ve el serrucho. Los botones
   cortos suben 2px y no llegan a notarse. */
.btn--full{ width:100%; transform:none; }
.btn--full:hover{ transform:translate(-2px,-2px); }
.btn--full:active{ transform:translate(2px,2px); }

/* Dos familias de íconos, y no se mezclan:
   .ic-linea  → dibujados a mano, trazo de tinta, comparten grosor con el logo
   .ic-marca  → logos ajenos (WhatsApp), sólidos y sin tocar: si a una marca
                registrada le cambiás el grosor del trazo, deja de reconocerse */
.ic-linea{ fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.ic-marca{ fill:currentColor; stroke:none; }
.btn svg{ width:20px; height:20px; flex:none; }

/* ── nav ────────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:100; background:var(--papel);
  border-bottom:var(--bd); }
.nav__in{ display:flex; align-items:center; gap:26px; height:64px; }

/* Dos versiones del logo, no una: marca.svg (solo E&S) para la barra,
   donde "estudio" quedaría en 5px e ilegible; logo.svg completo en el pie.
   Al pasar el mouse se endereza, como quien acomoda un sello sobre el papel. */
.logo{ margin-right:auto; display:block; line-height:0; }
.logo img{ height:34px; width:auto;
  transform:rotate(1.2deg); transition:transform var(--t) linear; }
.logo:hover img{ transform:rotate(0deg); }

.nav__links{ display:flex; gap:22px; }
.nav__links a{ position:relative; display:flex; align-items:center; min-height:44px;
  font-size:.92rem; color:var(--lapiz); transition:color var(--t) linear; }
.nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:9px; height:3px;
  background:var(--kraft); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) linear; }
.nav__links a:hover{ color:var(--tinta); }
.nav__links a:hover::after{ transform:scaleX(1); }

.burger{ display:none; width:46px; height:46px; border:var(--bd);
  background:var(--blanco); cursor:pointer; padding:0; box-shadow:3px 3px 0 var(--kraft); }
.burger span{ display:block; width:17px; height:2px; background:var(--tinta); margin:4px auto;
  transition:transform var(--t) linear; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* ── hero ───────────────────────────────────────────────────── */
.hero{ padding-block:clamp(46px,7vw,84px) clamp(46px,7vw,80px); }
.cta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:32px; }
.cta__note{ font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--lapiz); }

/* ── tarjetas de servicio ───────────────────────────────────── */
/* margin-top grande: la cinta sobresale 12px por arriba de la tarjeta */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 20px; margin-top:50px; }
.card{ position:relative; background:var(--blanco); border:var(--bd); padding:32px 22px 26px;
  box-shadow:5px 5px 0 var(--kraft);
  transition:transform var(--t) linear, box-shadow var(--t) linear; }

/* La cinta que pega la nota a la hoja. Las puntas en punta son el corte
   a mano: una cinta cortada con tijera no tiene el borde recto. */
.card::before{
  content:""; position:absolute; top:-12px; left:50%; width:86px; height:23px;
  background:var(--kraft); opacity:.92;
  clip-path:polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
  transition:transform var(--t) linear;
}
.card:nth-child(1){ transform:rotate(-.6deg); }
.card:nth-child(2){ transform:rotate(.5deg); }
.card:nth-child(3){ transform:rotate(-.4deg); }
.card:nth-child(1)::before{ transform:translateX(-50%) rotate(-3.2deg); }
.card:nth-child(2)::before{ transform:translateX(-50%) rotate(2.4deg); }
.card:nth-child(3)::before{ transform:translateX(-50%) rotate(-1.6deg); }
.card:hover{ transform:rotate(0deg) translateY(-4px); box-shadow:8px 8px 0 var(--kraft); }
.card:hover::before{ transform:translateX(-50%) rotate(0deg); }
.card__ic{ width:30px; height:30px; margin-bottom:16px; fill:none; stroke:var(--tinta);
  stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--t) linear; }
.card:nth-child(1) .card__ic{ transform:rotate(-2deg); }
.card:nth-child(2) .card__ic{ transform:rotate(2.5deg); }
.card:nth-child(3) .card__ic{ transform:rotate(-1.5deg); }
.card:hover .card__ic{ transform:rotate(0deg); }
.card h3{ margin-bottom:9px; }
.card p{ font-size:.93rem; color:var(--lapiz); }

/* ── los tres sellos ────────────────────────────────────────── */
/* Sellos de goma golpeados sobre la hoja: torcidos, con sombra dura y
   la tipografía espaciada de un tampón. Van después de las tarjetas
   porque valen para los tres servicios, no para uno. */
.valores{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px 32px;
  margin-top:44px; padding-top:36px; border-top:3px solid var(--tinta);
}
.valores__s{
  display:inline-block; margin-bottom:13px;
  background:var(--kraft); color:var(--kraft-o); border:var(--bd);
  padding:8px 15px; font-size:.79rem; font-weight:700; line-height:1;
  letter-spacing:.13em; text-transform:uppercase;
  box-shadow:3px 3px 0 rgba(26,26,26,.16);
  transition:transform var(--t) linear, box-shadow var(--t) linear;
}
.valores li:nth-child(1) .valores__s{ transform:rotate(-1.8deg); }
.valores li:nth-child(2) .valores__s{ transform:rotate(1.5deg); }
.valores li:nth-child(3) .valores__s{ transform:rotate(-1.1deg); }
.valores li:hover .valores__s{ transform:rotate(0deg); box-shadow:5px 5px 0 rgba(26,26,26,.16); }
.valores p{ font-size:.93rem; color:var(--lapiz); }

/* ── pasos ──────────────────────────────────────────────────── */
.pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:36px; }
.pasos li{ padding-top:18px; border-top:3px solid var(--tinta); }
.pasos__n{ display:grid; place-items:center; width:34px; height:34px; margin-bottom:13px;
  border:var(--bd); border-radius:50%; background:var(--kraft); color:var(--kraft-o);
  font-weight:700; font-size:.95rem; }
.pasos h3{ margin-bottom:6px; }
.pasos p{ font-size:.9rem; color:var(--lapiz); }

/* ── razones ────────────────────────────────────────────────── */
.razones{ display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; margin-top:36px; }
.razones li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
/* el ícono va sobre un bloque kraft, como el & del logo sobre su caja */
.sello{ display:grid; place-items:center; width:40px; height:40px; flex:none;
  background:var(--kraft); transform:rotate(-2deg);
  transition:transform var(--t) linear; }
.razones li:nth-child(even) .sello{ transform:rotate(2deg); }
.razones li:hover .sello{ transform:rotate(0deg); }
.sello svg{ width:23px; height:23px; fill:none; stroke:var(--tinta);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.razones p{ font-size:.93rem; color:var(--lapiz); margin-top:6px; }

/* ── equipo ─────────────────────────────────────────────────── */
.equipo{ display:flex; gap:18px; flex-wrap:wrap; margin-top:34px; }
.quien{ flex:1 1 200px; background:var(--blanco); border:var(--bd); padding:20px 22px;
  transform:rotate(-.5deg); transition:transform var(--t) linear; }
.quien:last-child{ transform:rotate(.6deg); }
.quien:hover{ transform:rotate(0deg); }
.quien__i{ display:grid; place-items:center; width:40px; height:40px; margin-bottom:12px;
  border:var(--bd); background:var(--kraft); color:var(--kraft-o);
  font-family:var(--serif); font-size:1.15rem; font-weight:700; }
.quien p{ font-size:.86rem; color:var(--lapiz); margin-top:3px; }

/* ── cierre / formulario ────────────────────────────────────── */
.final{ background:var(--tinta); color:var(--papel);
  background-image:repeating-linear-gradient(0deg, transparent 0 31px, rgba(250,250,248,.05) 31px 32px); }
.final h2 u{ background:linear-gradient(var(--kraft),var(--kraft)) no-repeat 0 88% / 100% .26em; }
.final .texto{ color:rgba(250,250,248,.75); }
.final .btn{ background:var(--kraft); color:var(--kraft-o); border-color:var(--papel);
  box-shadow:4px 4px 0 var(--papel); }
.final .btn:hover{ box-shadow:6px 6px 0 var(--papel); }
.final .btn:active{ box-shadow:1px 1px 0 var(--papel); }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px; max-width:640px; }
.campo{ display:grid; gap:7px; }
.campo--full{ grid-column:1/-1; }
.campo label{ font-size:.84rem; font-weight:600; color:rgba(250,250,248,.8); }
.campo input,.campo select{
  width:100%; min-height:48px; font:inherit; font-size:.97rem; color:var(--tinta);
  background:var(--papel); border:1.5px solid var(--papel); border-radius:0;
  padding:12px 14px; transition:box-shadow var(--t) linear;
}
.campo input::placeholder{ color:var(--lapiz); }
.campo select option{ background:var(--papel); color:var(--tinta); }
.campo input:focus,.campo select:focus{ outline:none; box-shadow:4px 4px 0 var(--kraft); }
.form .btn{ grid-column:1/-1; }
.form__alt{ grid-column:1/-1; font-size:.9rem; color:rgba(250,250,248,.75); }
.form__alt a{ border-bottom:2px solid var(--kraft); }

/* ── footer ─────────────────────────────────────────────────── */
.foot{ border-top:var(--bd); padding-top:34px; }
.foot__in{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding-bottom:26px; }
.foot .logo{ margin-right:0; }
.foot .logo img{ height:64px; }
.foot__in > p{ font-size:.9rem; color:var(--lapiz); }
.foot__c{ display:flex; gap:18px; margin-left:auto; }
.foot__c a{ display:flex; align-items:center; gap:8px; min-height:44px;
  font-size:.9rem; color:var(--lapiz);
  border-bottom:2px solid transparent; transition:border-color var(--t) linear, color var(--t) linear; }
.foot__c svg{ width:18px; height:18px; flex:none; }
.foot__c a:hover{ border-bottom-color:var(--kraft); color:var(--tinta); }
.foot__bot{ padding-block:14px 24px; border-top:1px solid rgba(26,26,26,.15);
  font-size:.8rem; color:var(--lapiz); }

/* ── aparición ──────────────────────────────────────────────── */
.js .reveal{ opacity:0; }
.js .reveal.in{ opacity:1; transition:opacity .5s ease-out; }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:940px){
  .cards{ grid-template-columns:1fr; }
  /* Bajan acá y no en 720px: entre 720 y 860 las tres columnas entran por
     3px y el sello "Precio competitivo" queda pegado al borde. */
  .valores{ grid-template-columns:1fr; }
  .pasos{ grid-template-columns:1fr 1fr; }
}

@media (max-width:720px){
  .nav__links{ position:fixed; inset:64px 0 auto; display:none; flex-direction:column; gap:0;
    background:var(--papel); border-bottom:var(--bd); padding:8px var(--pad) 18px; }
  .nav__links.open{ display:flex; }
  .nav__links a{ padding:15px 0; font-size:1.05rem; border-bottom:1px solid rgba(26,26,26,.15); }
  .nav__links a::after{ display:none; }
  .nav .btn--sm{ display:none; }
  .burger{ display:block; }

  .pasos,.razones,.form{ grid-template-columns:1fr; }
  .foot__c{ margin-left:0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; }
  /* el sello ya está puesto y el marcador ya pasó: nadie los ve llegar */
  .js h1 .sellada{ opacity:1; animation:none; }
  .js h1 .marca{ background-size:100% .26em; animation:none; }
}