/* =========================================================
   CRITERIO — home (agenciacriterio.com)
   Usa los colores y componentes de base.css (.cta, .tag) y lo común de style.css (nav, formulario, filas).
   ========================================================= */
:root{--crema:#faf7f2;--crema-2:#f3eee6}
body{background:#fff}
.centro{text-align:center}
.red{color:var(--red)}

/* ---------- Franja de beneficio ---------- */
.franja{background:var(--red);color:#fff;font-size:.88rem}
.franja-in{max-width:1240px;margin:0 auto;padding:10px 28px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center}
.franja-chip{background:var(--ink);color:#fff;font-weight:800;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.franja-run{display:contents}
.franja-txt{font-weight:400}
.franja-txt strong{font-weight:800}
.franja-link{color:#fff;font-weight:800;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.6);padding-bottom:1px}
.franja-link:hover{border-bottom-color:#fff}

/* ---------- Nav: fija arriba, debajo de la franja ---------- */
.nav{position:sticky;background:rgba(250,247,242,.92)}

/* ---------- Portada ---------- */
.portada{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:
    radial-gradient(60% 55% at 85% -5%,rgba(255,34,0,.55),transparent 70%),
    radial-gradient(45% 40% at 5% 105%,rgba(255,34,0,.28),transparent 70%),
    var(--ink);
  padding:clamp(48px,7vw,80px) 0 clamp(56px,8vw,96px);
}
.portada::before{content:"";position:absolute;top:-180px;right:-180px;width:clamp(280px,40vw,520px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.12);border-top-color:var(--red);animation:gira 40s linear infinite}
.portada-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.portada-badge{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);font-weight:600;font-size:.88rem;text-decoration:none;padding:9px 18px;border-radius:999px;box-shadow:0 8px 24px -12px rgba(0,0,0,.5);transition:transform .2s}
.portada-badge:hover{transform:translateY(-2px)}
.portada-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:punto 2.2s infinite}

.portada-marco{width:min(560px,100%);margin:34px auto 38px;background:#1a1a1a;border:5px solid var(--red);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(255,34,0,.55);text-align:left;animation:sube .9s cubic-bezier(.2,.7,.2,1) both .1s}
.marco-barra,.marco-pie{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:.74rem;color:#d6d6d6}
.marco-vivo{display:inline-flex;align-items:center;gap:7px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:#fff}
.marco-vivo i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:punto-rojo 1.6s infinite}
.marco-ventana{display:flex;gap:5px}
.marco-ventana i{width:8px;height:8px;border-radius:50%;background:#3a3a3a}
.marco-piezas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 6px}
.marco-piezas figure{aspect-ratio:4/5;overflow:hidden;border-radius:8px;background:#2a2a2a}
.marco-piezas img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);mix-blend-mode:luminosity}
.marco-piezas figure:nth-child(2){background:var(--red)}
.marco-ok{color:#4ade80;font-weight:700}

.portada h1{font-weight:900;text-transform:uppercase;font-size:clamp(2.3rem,7vw,5rem);line-height:.98;letter-spacing:-.02em;max-width:16ch;animation:sube .9s cubic-bezier(.2,.7,.2,1) both .25s}
.portada h1 em{font-style:normal;color:#fff}
.subraya{position:relative;display:inline-block;white-space:nowrap}
.subraya::after{content:"";position:absolute;left:2%;right:2%;bottom:-.08em;height:.12em;background:var(--red);border-radius:99px;transform-origin:left;animation:raya 1s cubic-bezier(.2,.7,.2,1) both .7s}
.portada-lead{color:#cfcfcf;font-weight:300;font-size:clamp(1rem,1.6vw,1.12rem);max-width:600px;margin:24px auto 30px;animation:sube .9s cubic-bezier(.2,.7,.2,1) both .4s}
.portada-cta{min-width:min(300px,100%);animation:sube .9s cubic-bezier(.2,.7,.2,1) both .5s,cta-pulso 2.4s infinite 1.6s}
.portada-micro{margin-top:14px;color:#bdbdbd;font-size:.85rem;font-weight:400}
.portada-micro span{color:var(--red);font-weight:800;margin-right:4px}

/* ---------- Bloques y encabezados centrados ---------- */
.bloque{padding:clamp(64px,8vw,104px) 0}
.bloque--crema{background:var(--crema)}
.ojo{display:inline-block;background:var(--soft);color:var(--red);font-weight:800;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.cabeza{text-align:center;max-width:760px;margin:0 auto 48px}
.cabeza h2,.bloque-h2{font-weight:800;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.05;letter-spacing:-.025em;margin-top:16px}
.cabeza h2 em,.bloque-h2 em,.bloque-intro em{font-style:normal;color:var(--red)}
.cabeza p{color:var(--muted);font-weight:300;font-size:1.05rem;margin-top:14px}
.link-flecha{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:700;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.link-flecha span{transition:transform .2s}
.link-flecha:hover span{transform:translateX(4px)}

/* ---------- Prueba social ---------- */
.bloque-intro{text-align:center;font-weight:700;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.015em;line-height:1.2;max-width:620px;margin:0 auto 40px}
.opiniones{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.opinion{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;transition:transform .25s,box-shadow .25s}
.opinion{margin:0}
.opinion blockquote{margin:0;flex:1;display:flex}
.opinion figcaption{display:flex;align-items:center;gap:12px}
.opinion header{display:flex;align-items:center;gap:12px}
.opinion figcaption strong{display:block;font-size:.98rem}
.opinion figcaption div span{display:block;font-size:.8rem;color:var(--muted)}
.opinion-avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:.85rem}
.opinion blockquote p{font-size:.95rem;line-height:1.6;color:#2a2a2a;flex:1}
.opinion-tag{align-self:flex-start;background:var(--crema-2);font-size:.74rem;font-weight:700;padding:5px 12px;border-radius:999px}

.rubros-tit{text-align:center;color:var(--muted);font-size:.85rem;margin:56px 0 18px}
.cinta{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cinta-track{display:inline-flex;align-items:center;gap:34px;white-space:nowrap;animation:marq 30s linear infinite;will-change:transform}
.cinta-track span{font-weight:900;font-size:clamp(1.1rem,2.4vw,1.5rem);text-transform:uppercase;letter-spacing:.04em;color:#b9b2a8}
.cinta-track i{width:9px;height:9px;border-radius:50%;background:var(--red)}

.numeros{display:grid;grid-template-columns:repeat(3,1fr);max-width:760px;margin:56px auto 30px;border-block:1px solid var(--line)}
.numeros div{padding:22px 10px;text-align:center}
.numeros div+div{border-left:1px solid var(--line)}
.numeros strong{display:block;font-weight:900;font-size:clamp(2rem,4.5vw,2.8rem);line-height:1}
.numeros div>span{display:block;color:var(--muted);font-size:.85rem;margin-top:8px}

/* ---------- Servicios (formatos) ---------- */
.formatos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.formato{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;transition:transform .25s,box-shadow .25s}
.formato-ojo{color:var(--red);font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.formato h3{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin:6px 0 18px}
.checks{list-style:none;display:grid;gap:14px;margin-bottom:26px;flex:1}
.checks li{position:relative;padding-left:28px;font-size:.95rem;line-height:1.5;font-weight:300;color:#2a2a2a}
.checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--red);font-weight:800}
.checks strong{font-weight:700;color:var(--ink)}
.formato .cta{align-self:flex-start}

/* ---------- Casos ---------- */
.rubros{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px}
.rubro{display:flex;flex-direction:column;gap:14px;background:var(--crema);border-radius:18px;padding:16px;transition:transform .25s,box-shadow .25s}
.rubro h3{font-size:1.05rem;font-weight:700;padding:2px 4px 0}
.rubro-foto{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:12px;background:var(--red)}
.rubro-foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rubro-tag{align-self:center;background:#fff;border:1px solid var(--line);font-size:.76rem;font-weight:700;padding:7px 14px;border-radius:999px}

/* ---------- Cómo trabajamos (bento) ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:40px}
.caja{display:flex;flex-direction:column;gap:22px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.caja--ancha{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
.caja-num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font-weight:800;font-size:.8rem}
.caja h3{font-size:1.3rem;font-weight:800;letter-spacing:-.01em;margin:14px 0 6px}
.caja p{font-size:.93rem;font-weight:300;color:#3a3a3a;line-height:1.55}
.maqueta{background:var(--crema);border-radius:16px;padding:18px;margin-top:auto}
.caja--ancha .maqueta{margin-top:0}

.mq-lista{list-style:none;display:grid;gap:8px}
.mq-lista li{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:10px 12px;font-size:.86rem;font-weight:600}
.mq-lista li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--line)}
.mq-lista li.is-ok::before{content:"✓";display:grid;place-items:center;background:var(--red);color:#fff;font-size:.66rem;font-weight:900}
.mq-lista li.is-curso::before{border:2px solid var(--red);background:#fff;box-sizing:border-box;animation:gira 2.4s linear infinite;border-right-color:transparent}
.mq-lista em{margin-left:auto;font-style:normal;font-size:.7rem;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.08em}

.mq-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.mq-chips span{background:var(--ink);color:#fff;font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px}
.mq-pilares{display:grid;gap:8px}
.mq-pilares span{position:relative;display:block;background:#fff;border-radius:8px;padding:7px 10px;font-size:.78rem;font-weight:700;overflow:hidden;z-index:0}
.mq-pilares span::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:#ffd9d0;z-index:-1;border-right:3px solid var(--red)}

.mq-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.mq-cal b{font-size:.62rem;color:var(--muted);font-weight:700}
.mq-cal span{aspect-ratio:1;border-radius:6px;background:#fff;position:relative}
.mq-cal span.p::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--ink)}
.mq-cal span.r{background:var(--soft)}
.mq-cal span.r::after{background:var(--red)}

.mq-pieza{display:flex;gap:14px;align-items:center;background:#fff;border-radius:14px;padding:12px}
.mq-pieza img{flex:none;width:86px;height:86px;object-fit:cover;border-radius:10px;filter:grayscale(1)}
.mq-pieza strong{display:block;font-size:.9rem}
.mq-pieza span{display:block;font-size:.78rem;color:var(--muted)}
.mq-botones{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mq-botones span{white-space:nowrap;font-size:.74rem;font-weight:800;color:var(--ink);border:1.5px solid var(--ink);padding:5px 12px;border-radius:999px}
.mq-botones span.si{background:var(--red);border-color:var(--red);color:#fff}

.mq-barras{display:flex;align-items:flex-end;gap:8px;height:110px}
.mq-barras span{flex:1;height:var(--h);background:var(--ink);border-radius:6px 6px 2px 2px;transform-origin:bottom}
.mq-barras span.r{background:var(--red)}

.mq-chat{display:flex;flex-direction:column;gap:8px;font-size:.84rem}
.mq-chat span{max-width:85%;padding:9px 13px;border-radius:14px;line-height:1.35}
.mq-chat .yo{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.mq-chat .ellos{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}

/* ---------- Nosotros ---------- */
.nosotros-txt{font-size:1.1rem;font-weight:300;line-height:1.7;margin-top:18px}
.nosotros-photo .frame{border-radius:20px;border:none}
.nosotros-photo::before{border-radius:20px}

/* ---------- Contacto ---------- */
#contacto .contact-grid{margin-top:0}
.contact-card{border-radius:20px;border:1px solid var(--line);border-top:1px solid var(--line);box-shadow:0 24px 50px -30px rgba(0,0,0,.25)}
.field input,.field textarea{border-radius:12px}
.service-picker label{border-radius:999px}
#contacto .cta[type="submit"]{width:100%}

/* ---------- FAQ ---------- */
.faq-list{max-width:780px;margin:0 auto;display:grid;gap:12px}
.faq-item{background:var(--crema);border-radius:16px;padding:0 22px;transition:background .2s}
.faq-item[open]{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.faq-q{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:700;font-size:1.02rem}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;font-size:1.1rem;transition:transform .25s}
.faq-item[open] .faq-q::after{transform:rotate(45deg)}
.faq-a{padding:0 0 20px;color:#3a3a3a;font-weight:300;line-height:1.65}

/* ---------- Pie ---------- */
.pie{background:var(--red);color:#fff;padding:72px 0 32px}
.pie-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px}
.pie-marca img{width:min(190px,60%);height:auto}
.pie-marca p{color:rgba(255,255,255,.88);font-weight:300;margin:18px 0 22px;max-width:34ch}
.pie-col{display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.pie-col strong{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;opacity:.85}
.pie-col a,.pie-col span{color:#fff;text-decoration:none;opacity:.92}
.pie-col a:hover{opacity:1;text-decoration:underline}
.pie-legal{margin-top:52px;padding-top:20px;border-top:1px solid rgba(255,255,255,.3);font-size:.78rem;opacity:.8}

/* ---------- Movimiento ---------- */
@keyframes sube{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes raya{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes punto{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@keyframes punto-rojo{50%{opacity:.35}}
@keyframes crece{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.reveal.in-view .mq-barras span{animation:crece .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--n,0) * 80ms + .2s)}
.mq-barras span:nth-child(2){--n:1}.mq-barras span:nth-child(3){--n:2}.mq-barras span:nth-child(4){--n:3}.mq-barras span:nth-child(5){--n:4}.mq-barras span:nth-child(6){--n:5}
@media(hover:hover){
  .opinion:hover,.formato:hover,.rubro:hover,.caja:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.3)}
  .rubro:hover .rubro-foto img{transform:scale(1.05)}
}
@media(prefers-reduced-motion:reduce){
  .portada *,.portada::before,.cinta-track,.mq-lista li::before,.mq-barras span,.marco-vivo i,.portada-dot{animation:none!important}
}

/* ---------- Pantallas medianas y celular ---------- */
@media(max-width:960px){
  .opiniones,.formatos{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .rubros{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:1fr 1fr}
  .caja--ancha{grid-column:span 2}
  .pie-grid{grid-template-columns:1fr 1fr}
  .pie-marca{grid-column:1/-1}
}
@media(max-width:640px){
  /* una sola línea: el mensaje corre de derecha a izquierda */
  .franja-in{padding:7px 0;overflow:hidden;display:block;font-size:.78rem;line-height:1.3;text-align:left}
  .franja-run{display:inline-flex;align-items:center;gap:22px;white-space:nowrap;padding-left:100%;animation:franja-corre 22s linear infinite;will-change:transform}
  .franja-in:active .franja-run{animation-play-state:paused}
  .franja-link{border-bottom-width:1px;padding-bottom:0}
  .franja-chip{display:none}
  .portada-marco{border-width:4px;margin:28px auto 30px}
  .portada-cta{width:100%}
  .subraya{white-space:normal}
  .rubros{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -28px 32px;padding:0 28px 8px;scrollbar-width:none}
  .rubros::-webkit-scrollbar{display:none}
  .rubro{flex:0 0 72%;scroll-snap-align:center}
  .bento{grid-template-columns:1fr}
  .caja--ancha{grid-column:auto;grid-template-columns:minmax(0,1fr)}
  .numeros strong{font-size:1.8rem}
  .numeros div>span{font-size:.75rem}
  .faq-item{padding:0 16px}
  .pie-grid{grid-template-columns:1fr}
}
@media(max-width:700px){#contacto{padding-bottom:92px}}

@keyframes franja-corre{to{transform:translateX(-100%)}}
@media(max-width:640px) and (prefers-reduced-motion:reduce){.franja-in{overflow:visible;text-align:center;padding:7px 12px}.franja-run{display:block;white-space:normal;padding-left:0;animation:none}.franja-link{display:inline-block;margin-top:2px}}