/* ============================================================
   COMANDAS · landing
   ============================================================
   El esqueleto es el mismo que estrellas-amarillas.codeland.com.ar:
   tipografía enorme en mayúsculas de peso 900 con el tracking cerrado,
   kickers chiquitos muy espaciados, y secciones a sangre que alternan color.

   Lo que cambia es la paleta. Ahí el amarillo era el símbolo de la causa;
   acá manda una paleta de restorán: espresso, lino y páprika. El verde
   aparece SOLO donde hay capturas, porque es el color de la interfaz de la
   app y así las pantallas no parecen pegadas de otro sitio.
   ============================================================ */

:root{
  --ink:#17110C;          /* espresso: casi negro, pero cálido */
  --ink-2:#241B14;
  --paper:#F6F0E3;        /* mantel de lino */
  --paper-2:#EDE4D2;
  --paper-3:#E2D7C1;
  --ember:#C4441C;        /* páprika: el acento que manda */
  --ember-2:#E05A2E;
  --gold:#E0A03A;         /* brasa: acento secundario */
  --muted:#7B7166;

  /* Los dos de la app, para la sección de capturas y el celular. */
  --verde:#28BE7E;
  --noche:#070908;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Outfit', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
/* `height:auto` no es opcional: las capturas llevan width y height en el HTML
   para que el navegador reserve el lugar y la página no salte al cargar, pero
   sin esto esa altura manda y la imagen sale estirada. */
img{ max-width:100%; height:auto; display:block; }

/* ------------------------------------------------------------
   BARRA SUPERIOR
   ------------------------------------------------------------ */
.topbar{
  height:86px; position:absolute; z-index:20; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4.5vw; color:var(--paper);
  border-bottom:1px solid rgba(246,240,227,.16);
}
.brand{ display:flex; align-items:center; gap:12px; line-height:.85; letter-spacing:.09em; }
.brand-mark{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  background:var(--ember); color:var(--paper); border-radius:12px;
  font-size:22px; font-weight:900; letter-spacing:0;
}
.brand b{ font-size:16px; display:block; font-weight:800; }
.brand small{ font-size:9px; font-weight:700; letter-spacing:.22em; opacity:.62; }

nav{ display:flex; gap:32px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
nav a{ opacity:.8; transition:.2s; }
nav a:hover{ opacity:1; color:var(--gold); }

.nav-app{ display:flex; align-items:center; gap:7px; color:var(--gold); opacity:1; }
.nav-app i{ width:6px; height:6px; border-radius:50%; background:var(--gold); animation:navDot 2.4s infinite; }
@keyframes navDot{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }

.nav-cta{
  border:1px solid rgba(246,240,227,.42); padding:13px 17px;
  text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.08em;
  transition:.25s;
}
.nav-cta:hover{ background:var(--ember); border-color:var(--ember); }
.nav-cta span,.button span{ margin-left:18px; }

/* ------------------------------------------------------------
   BOTONES Y TIPOGRAFÍA COMPARTIDA
   ------------------------------------------------------------ */
.button{
  display:inline-flex; align-items:center; justify-content:space-between;
  min-width:225px; padding:18px 21px;
  text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.08em;
  transition:.25s; border-radius:2px;
}
.button:hover{ transform:translateY(-3px); }
.primary{ background:var(--ember); color:var(--paper); }
.primary:hover{ background:var(--ember-2); }
.ghost{ border:1px solid rgba(246,240,227,.45); color:var(--paper); }
.ghost:hover{ border-color:var(--paper); }
.black{ background:var(--ink); color:var(--paper); }

.eyebrow,.kicker{
  font-size:11px; letter-spacing:.23em; font-weight:800; text-transform:uppercase; margin:0;
}
.eyebrow{ display:flex; align-items:center; gap:10px; color:var(--paper); }
.eyebrow i{ width:28px; height:3px; background:var(--ember); flex:none; }
.kicker.dark{ color:var(--ink); opacity:.72; }

.manifesto h2,.section-heading h2,.actions h2,.cta-section h2,.symbol-copy h2{
  font-size:clamp(46px,5.3vw,83px); line-height:.93; letter-spacing:-.055em;
  margin:20px 0; font-weight:900; text-transform:uppercase;
}
.manifesto h2 span,.section-heading h2 span,.actions h2 span{ color:var(--muted); }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero{
  min-height:780px; height:100vh; position:relative; overflow:hidden;
  color:var(--paper);
  background:radial-gradient(120% 100% at 15% 20%, var(--ink-2) 0%, var(--ink) 55%, #0C0805 100%);
  display:grid; grid-template-columns:1fr .95fr; align-items:center; gap:2vw;
  padding:0 0 0 8vw;
}
/* Trama de mantel: la misma idea que las líneas de ruta del sitio original,
   pero en grilla, que es como se ve un salón desde arriba. */
.hero-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(224,160,58,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(224,160,58,.05) 1px,transparent 1px);
  background-size:92px 92px;
  mask-image:radial-gradient(70% 60% at 40% 50%,#000 20%,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 40% 50%,#000 20%,transparent 100%);
}
.road-line{ position:absolute; width:1px; height:170%; background:rgba(196,68,28,.28); transform:rotate(22deg); top:-25%; }
.road-line-one{ right:31%; }
.road-line-two{ right:36%; }

.hero-content{ position:relative; z-index:3; max-width:720px; padding:96px 0 0; }
.hero h1{
  font-size:clamp(58px,6.6vw,112px); line-height:.85; margin:30px 0 26px;
  letter-spacing:-.07em; font-weight:900; text-transform:uppercase;
}
.hero h1 em{ color:var(--ember-2); font-style:normal; }
.hero-copy{ max-width:560px; font-size:18px; line-height:1.6; color:rgba(246,240,227,.72); margin:0; }
.hero-actions{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }

/* La captura sangra por la derecha: se ve que es una pantalla real y de paso
   sugiere que hay más sistema del que entra en la foto. */
.hero-shot{
  position:relative; z-index:2; margin:0;
  transform:perspective(1800px) rotateY(-14deg) rotateX(3deg);
}
.hero-shot img{
  width:125%; max-width:none; border-radius:14px 0 0 14px;
  border:1px solid rgba(246,240,227,.14); border-right:none;
  box-shadow:-40px 50px 110px rgba(0,0,0,.7);
}

/* Va al margen izquierdo y no al derecho como en el sitio original: acá la
   captura sangra por la derecha y el texto rotado le quedaba encima. */
.hero-side-note{
  position:absolute; z-index:4; left:2.2vw; top:50%;
  display:flex; gap:48px; transform:rotate(-90deg) translateX(-50%);
  transform-origin:left center;
  font-size:9px; text-transform:uppercase; letter-spacing:.2em;
  color:rgba(246,240,227,.38); white-space:nowrap;
}

/* ------------------------------------------------------------
   MANIFIESTO
   ------------------------------------------------------------ */
.manifesto{
  padding:135px 8vw 110px;
  display:grid; grid-template-columns:.25fr 1.05fr .9fr; gap:5vw; position:relative;
}
.section-number{ font-size:11px; border-top:1px solid var(--paper-3); padding-top:10px; font-weight:700; letter-spacing:.1em; }
.manifesto-copy{ padding-top:40px; }
.manifesto-copy p{ font-size:17px; line-height:1.75; color:#544C43; margin:0 0 18px; }
.manifesto-copy a{
  display:inline-flex; margin-top:18px; border-bottom:2px solid var(--ember);
  padding-bottom:7px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
}
.manifesto-copy a span{ margin-left:22px; }
.manifesto-quote{
  grid-column:2/4; margin-top:70px; border-top:1px solid var(--paper-3);
  padding:35px 0 0; display:flex; gap:24px; align-items:flex-start;
}
.manifesto-quote .mark{ color:var(--ember); font-size:64px; line-height:.7; font-family:Georgia,serif; }
.manifesto-quote blockquote{
  margin:0; max-width:800px; font-family:Georgia,serif;
  font-size:clamp(22px,2.3vw,31px); line-height:1.35; font-style:italic; color:#332C25;
}

/* ------------------------------------------------------------
   LA PLATA
   ------------------------------------------------------------ */
.symbol-section{
  background:var(--ember); color:var(--paper);
  min-height:600px; padding:105px 9vw;
  display:grid; grid-template-columns:1fr 1.2fr; align-items:center; gap:4vw;
  position:relative; overflow:hidden;
}
.symbol-star{ position:relative; width:360px; height:360px; display:grid; place-items:center; }
.symbol-star .glyph{
  font-size:300px; line-height:1; color:var(--paper); position:relative; z-index:2;
  font-weight:900; letter-spacing:-.04em;
}
.pulse{ position:absolute; border:1px solid rgba(246,240,227,.3); border-radius:50%; inset:15px; animation:pulse 3s infinite; }
.p2{ inset:-35px; animation-delay:1.5s; }
@keyframes pulse{ 0%{transform:scale(.8);opacity:0} 45%{opacity:1} 100%{transform:scale(1.25);opacity:0} }

.symbol-copy h2{ font-size:clamp(48px,5.6vw,86px); }
.symbol-copy .kicker.dark{ color:var(--paper); opacity:.75; }
.symbol-copy>p:not(.kicker){ font-size:18px; line-height:1.7; max-width:600px; color:rgba(246,240,227,.85); }
.symbol-line{ border-top:2px solid var(--paper); margin-top:36px; padding-top:20px; display:flex; flex-direction:column; gap:7px; }
.symbol-line b{ text-transform:uppercase; font-size:13px; letter-spacing:.1em; }
.symbol-line span{ font-family:Georgia,serif; font-size:19px; font-style:italic; opacity:.9; }
.symbol-index{ position:absolute; right:20px; bottom:32px; transform:rotate(-90deg); font-size:9px; letter-spacing:.18em; opacity:.6; }

/* ------------------------------------------------------------
   MÓDULOS
   ------------------------------------------------------------ */
.pillars{ padding:130px 6vw; background:var(--paper-2); }
.section-heading{ display:flex; justify-content:space-between; align-items:end; gap:4vw; margin:0 2vw 65px; }
.section-heading>p{ max-width:420px; line-height:1.7; color:#6A6156; margin:0; }
.pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); min-height:540px; }
.pillar{ position:relative; padding:35px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.pillar.ember{ background:var(--ember); color:var(--paper); }
.pillar .glyph{ font-size:120px; align-self:center; margin:20px 0; line-height:1; }
.pillar.ember .glyph{ color:rgba(246,240,227,.9); }
.pillar-no{ font-size:10px; letter-spacing:.15em; border-top:1px solid currentColor; padding-top:8px; font-weight:700; }
.pillar h3{ font-size:38px; margin:0 0 12px; letter-spacing:-.04em; line-height:.95; font-weight:900; }
.pillar p{ max-width:340px; line-height:1.65; font-size:15px; margin:0; }
.pillar a{
  display:flex; justify-content:space-between; border-top:1px solid currentColor;
  margin-top:24px; padding-top:16px; text-transform:uppercase; font-size:10px;
  letter-spacing:.12em; font-weight:800;
}
.photo-card{ color:var(--paper); background:var(--noche); }
.photo-card img,.card-overlay{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-card img{ opacity:.5; }
.card-overlay{ background:linear-gradient(0deg,rgba(7,9,8,.96) 25%,rgba(7,9,8,.35)); }
.photo-card>*:not(img):not(.card-overlay){ position:relative; }
.dark-card{ background:var(--ink); color:var(--paper); }
.dark-card .glyph{ color:var(--gold); }

/* ------------------------------------------------------------
   ROLES
   ------------------------------------------------------------ */
.actions{ background:var(--ink); color:var(--paper); display:grid; grid-template-columns:1.05fr .95fr; min-height:800px; }
.actions-image{ position:relative; min-height:650px; overflow:hidden; }
.actions-image img{ width:100%; height:100%; object-fit:cover; object-position:left top; opacity:.85; }
.actions-image span{
  position:absolute; bottom:30px; left:30px; background:var(--ember); color:var(--paper);
  padding:11px 15px; font-size:9px; text-transform:uppercase; letter-spacing:.16em; font-weight:800;
}
.actions-copy{ padding:100px 7vw; }
.actions h2{ font-size:clamp(46px,5vw,78px); }
.actions-copy>p:not(.kicker){ color:rgba(246,240,227,.62); font-size:17px; line-height:1.7; }
.actions .kicker{ color:var(--gold); }
.actions ul{ list-style:none; padding:0; margin:42px 0; }
.actions li{ border-top:1px solid rgba(246,240,227,.14); padding:17px 0; display:flex; justify-content:space-between; gap:20px; }
.actions li b{ color:var(--ember-2); text-transform:uppercase; font-size:12px; letter-spacing:.1em; flex:none; }
.actions li span{ color:rgba(246,240,227,.5); font-size:13px; text-align:right; }

/* ------------------------------------------------------------
   GALERÍA DE CAPTURAS
   ------------------------------------------------------------ */
.gallery{ padding:130px 6vw; background:var(--paper); }
.shot-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.shot{ margin:0; background:var(--noche); border:1px solid var(--paper-3); border-radius:4px; overflow:hidden; }
.shot.wide{ grid-column:1/3; }
.shot img{ width:100%; height:auto; }
.shot figcaption{ display:flex; align-items:baseline; gap:14px; padding:18px 20px; background:var(--ink); color:var(--paper); flex-wrap:wrap; }
.shot figcaption b{ font-size:11px; letter-spacing:.16em; color:var(--gold); flex:none; }
.shot figcaption span{ font-size:13.5px; color:rgba(246,240,227,.55); line-height:1.5; }

/* ------------------------------------------------------------
   CARTA PÚBLICA
   ------------------------------------------------------------ */
.app-section{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 78% 12%, #11201A 0%, var(--noche) 60%, #040605 100%);
  color:var(--paper); padding:130px 6vw 120px;
  display:grid; grid-template-columns:1.06fr .94fr; gap:6vw; align-items:center;
}
.app-grid-bg{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(40,190,126,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(40,190,126,.06) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(75% 65% at 60% 45%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(75% 65% at 60% 45%,#000 30%,transparent 100%);
}
.app-copy{ position:relative; z-index:2; }
.kicker.light{ display:flex; align-items:center; gap:10px; color:var(--verde); }
.kicker.light i{ width:28px; height:3px; background:var(--verde); flex:none; }
.app-section h2{
  font-size:clamp(44px,4.4vw,70px); line-height:.95; letter-spacing:-.06em;
  margin:22px 0 24px; font-weight:900; text-transform:uppercase;
}
.app-section h2 span{ color:var(--verde); }
.app-lead{ max-width:600px; font-size:18px; line-height:1.7; color:rgba(246,240,227,.74); margin:0; }
.app-features{ list-style:none; padding:0; margin:42px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:2px 34px; }
.app-features li{ display:flex; gap:14px; align-items:flex-start; border-top:1px solid rgba(246,240,227,.13); padding:15px 0; }
.app-features .ico{
  flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  background:rgba(40,190,126,.14); color:var(--verde); font-size:13px;
}
.app-features b{ display:block; font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.app-features span{ font-size:13px; line-height:1.5; color:rgba(246,240,227,.55); }
.app-actions{ display:flex; align-items:center; gap:28px; margin-top:42px; flex-wrap:wrap; }
/* El único botón con halo del sitio: en una sección llena de datos es lo que
   tiene que ganar la mirada. */
.app-cta{ animation:appPulse 2.8s infinite; }
@keyframes appPulse{
  0%{ box-shadow:0 0 0 0 rgba(196,68,28,.5) }
  70%{ box-shadow:0 0 0 18px rgba(196,68,28,0) }
  100%{ box-shadow:0 0 0 0 rgba(196,68,28,0) }
}
.app-note-inline{ font-size:13px; color:rgba(246,240,227,.45); max-width:230px; line-height:1.6; }

.app-device{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:26px; }
.phone{
  width:300px; border-radius:38px; padding:11px;
  background:linear-gradient(160deg,#2A3A33,#0A0F0D);
  box-shadow:0 40px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(246,240,227,.08);
}
.phone img{ border-radius:28px; width:100%; }
.device-caption{ text-align:center; font-size:11px; line-height:1.7; text-transform:uppercase; letter-spacing:.1em; color:rgba(246,240,227,.45); }
.device-caption span{ color:var(--verde); }

/* ------------------------------------------------------------
   DATOS DUROS
   ------------------------------------------------------------ */
.facts{
  background:var(--ink); color:var(--paper);
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(246,240,227,.12);
}
.fact{ padding:52px 34px; border-right:1px solid rgba(246,240,227,.12); }
.fact:last-child{ border-right:none; }
.fact b{ display:block; font-size:64px; line-height:1; font-weight:900; letter-spacing:-.05em; color:var(--gold); }
.fact span{ display:block; margin-top:14px; font-size:13px; line-height:1.55; color:rgba(246,240,227,.55); }

/* ------------------------------------------------------------
   TESTIMONIO
   ------------------------------------------------------------
   Va sobre lino, entre dos secciones oscuras: el respiro claro hace que
   la cita pese más que si fuera un bloque más de la seguidilla.

   En Georgia itálica, como las otras citas del sitio. Es la única voz que
   no es la nuestra, y la serif la separa del resto sin decirlo. */
.testimonio{
  background:var(--paper); color:var(--ink);
  padding:120px 8vw 110px;
  max-width:1500px; margin:0 auto;
  position:relative;
}
.testimonio .kicker{ color:var(--ember); margin-bottom:34px; }

.testimonio blockquote{
  margin:0; position:relative;
  font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:clamp(27px,3.5vw,54px); line-height:1.22; letter-spacing:-.02em;
  max-width:1180px;
}
/* La comilla vive fuera del margen del texto: si entra en el flujo, la
   primera línea arranca corrida y la caja deja de leerse como un bloque. */
.testimonio .comilla{
  position:absolute; left:-.52em; top:-.28em;
  font-size:2.1em; line-height:1; color:var(--ember); opacity:.35;
}
.testimonio blockquote em{ font-style:italic; color:var(--ember); }

.firma{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:52px; padding-top:30px; border-top:1px solid var(--paper-3);
}
.firma-mark{
  width:52px; height:52px; flex:none; display:grid; place-items:center;
  background:var(--ember); color:var(--paper); border-radius:50%;
  font-size:16px; font-weight:800; letter-spacing:.04em;
}
.firma-quien{ display:flex; flex-direction:column; gap:3px; }
.firma-quien b{ font-size:19px; letter-spacing:-.01em; }
.firma-quien span{ font-size:13px; color:var(--muted); letter-spacing:.02em; }
.firma-ig{
  margin-left:auto; display:inline-flex; align-items:center; gap:14px;
  border:1px solid var(--paper-3); border-radius:2px; padding:13px 17px;
  font-size:11px; font-weight:800; text-transform:lowercase; letter-spacing:.04em;
  transition:.25s;
}
.firma-ig span{ text-transform:none; }
.firma-ig:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ------------------------------------------------------------
   PRECIO
   ------------------------------------------------------------ */
.cta-section{ background:var(--gold); color:var(--ink); text-align:center; padding:110px 5vw; position:relative; }
.cta-star .glyph{ font-size:44px; }
.cta-section h2{ margin:25px auto; max-width:1000px; }
.cta-section h2 span{ font-family:Georgia,serif; font-style:italic; font-weight:400; text-transform:none; letter-spacing:-.02em; }
.cta-section>p:not(.kicker){ font-size:17px; max-width:640px; margin:0 auto; line-height:1.7; }
.cta-buttons{ display:flex; justify-content:center; align-items:center; gap:35px; margin-top:35px; flex-wrap:wrap; }
.text-link{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid; padding-bottom:6px; }
.text-link span{ margin-left:20px; }

/* ------------------------------------------------------------
   PIE
   ------------------------------------------------------------ */
footer{ background:#0B0806; color:var(--paper); padding:75px 6vw 24px; }
.footer-main{ display:grid; grid-template-columns:1.4fr 1fr .8fr .9fr; gap:60px; padding-bottom:65px; }
.footer-brand{ display:flex; gap:18px; }
.footer-brand b{ font-size:19px; line-height:1.15; letter-spacing:.06em; }
.footer-brand p{ color:#8A8177; line-height:1.6; font-size:13px; margin:8px 0 0; }
.footer-col{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; font-size:13px; color:#C7BFB4; }
.footer-col h3{ color:var(--gold); font-size:10px; letter-spacing:.17em; margin:0 0 13px; }
.footer-col a:hover{ color:var(--gold); }
.footer-col p{ line-height:1.6; margin:4px 0; color:#8A8177; }
.footer-app{ color:var(--ember-2); font-weight:700; }
.footer-bottom{
  border-top:1px solid #241E19; padding-top:20px; display:flex; justify-content:space-between;
  color:#6E665D; font-size:9px; text-transform:uppercase; letter-spacing:.12em; gap:12px; flex-wrap:wrap;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media(max-width:1100px){
  .hero{ grid-template-columns:1fr; height:auto; padding:0 0 90px; }
  .hero-content{ padding:150px 25px 0; max-width:none; }
  .hero-shot{ transform:none; margin-top:52px; padding-left:25px; }
  .hero-shot img{ width:100%; border-radius:12px; border-right:1px solid rgba(246,240,227,.14); }
  .hero-side-note{ display:none; }
  .road-line-one{ right:14%; } .road-line-two{ right:19%; }
}

@media(max-width:900px){
  .topbar{ height:72px; padding:0 20px; }
  .topbar nav{ display:none; }
  .nav-cta{ padding:11px 13px; }
  .hero h1{ font-size:clamp(48px,13vw,86px); }
  .hero-copy{ font-size:16px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }

  .manifesto{ padding:90px 25px; grid-template-columns:1fr; gap:0; }
  .manifesto .section-number{ display:none; }
  .manifesto-copy{ padding-top:24px; }
  .manifesto-quote{ grid-column:auto; margin-top:35px; }

  .symbol-section{ grid-template-columns:1fr; padding:75px 25px; }
  .symbol-star{ width:220px; height:220px; margin:0 auto 30px; }
  .symbol-star .glyph{ font-size:190px; }

  .pillars{ padding:85px 20px; }
  .section-heading{ display:block; margin:0 0 40px; }
  .section-heading>p{ margin-top:20px; }
  .pillar-grid{ grid-template-columns:1fr; }
  .pillar{ min-height:440px; }

  .actions{ grid-template-columns:1fr; }
  .actions-image{ min-height:340px; }
  .actions-copy{ padding:70px 25px; }
  .actions li{ display:block; }
  .actions li span{ display:block; margin-top:8px; text-align:left; }

  .gallery{ padding:85px 20px; }
  .shot-grid{ grid-template-columns:1fr; gap:18px; }
  .shot.wide{ grid-column:auto; }

  .app-section{ grid-template-columns:1fr; padding:85px 25px 90px; gap:56px; }
  .app-features{ grid-template-columns:1fr; margin-top:34px; }
  .app-actions{ flex-direction:column; align-items:stretch; gap:18px; }
  .app-note-inline{ max-width:none; text-align:center; }

  .facts{ grid-template-columns:1fr 1fr; }
  .fact{ padding:38px 24px; border-bottom:1px solid rgba(246,240,227,.12); }
  .fact:nth-child(2n){ border-right:none; }

  .testimonio{ padding:80px 25px 75px; }
  .testimonio .comilla{ position:static; display:block; font-size:2.6em; margin-bottom:-.42em; }
  .firma{ margin-top:38px; }
  .firma-ig{ margin-left:0; width:100%; justify-content:space-between; }

  .cta-section{ padding:80px 22px; }
  .cta-buttons{ flex-direction:column; gap:22px; }

  .footer-main{ grid-template-columns:1fr; gap:38px; }
  .footer-bottom{ flex-direction:column; gap:10px; }
  .brand b{ font-size:13px; } .brand small{ font-size:8px; }
}

@media(max-width:520px){
  .nav-cta{ font-size:0; padding:11px; }
  .nav-cta:before{ content:'PRECIO'; font-size:10px; font-weight:800; letter-spacing:.08em; }
  .nav-cta span{ display:none; }
  .hero h1{ font-size:15vw; }
  .button{ width:100%; }
  .symbol-copy h2,.manifesto h2,.section-heading h2,.actions h2,.cta-section h2,.app-section h2{ font-size:12.5vw; }
  .phone{ width:100%; max-width:280px; }
  .fact b{ font-size:48px; }
}

@media(prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}