/* =============================================================================
   Mento Agency · pauta.css (solo /pauta/)
   Se carga después de sitio.css. Todo lo propio de esta página lleva el prefijo
   pa-; los componentes compartidos solo se ajustan dentro de .pa-* para no tocar
   otras páginas.

   01 Héroe navy (arcos que suben como barras + sello)   05 Resultados: cómo leer las cifras
   02 Banda sobre el borde navy/crema                    06 Cómo trabajamos (3 arcos + garantía)
   03 Cifras (4 arcos)                                   07 Movimiento
   04 Servicios en profundidad (escalera de paneles)     08 Responsive
   ========================================================================== */


/* ---------- 01 Héroe ----------------------------------------------------- */
/* --pa-medio: alto desde el borde superior de .band-wrap hasta el centro de la franja
   (padding 1.75rem + padding de la lista 1rem + borde 2px + media línea de texto) */
.pa-hero,.pa-band{--pa-medio:calc(1.75rem + 1rem + 2px + .6 * clamp(1.4rem,3vw,2.6rem))}
.pa-hero{padding-bottom:calc(clamp(3.25rem,6vw,5.5rem) + var(--pa-medio))}
/* La m del logo en azul sobre navy: mismo motivo del inicio, otra composición de color.
   Las patas terminan al 70 % del alto del símbolo (la cola baja más): con bottom
   = -(0,21 × ancho + 24px) su final siempre cae bajo la banda. */
.pa-hero{--pa-m:min(78vw,1120px)}
.pa-hero .page-hero-m{fill:var(--azul);width:var(--pa-m);right:calc(-.3 * var(--pa-m));top:auto;bottom:calc(-.21 * var(--pa-m) - 24px)}
.pa-hero .kicker{margin-top:1.5rem;border-color:#fff}
.pa-hero .display-2{font-size:clamp(2.6rem,7.2vw,6.25rem);margin:.32em 0 .34em}
.pa-hero .display-2 .thin{letter-spacing:-.04em}
.pa-acento{color:var(--amarillo)}
.pa-hero .lead{max-width:31em}

/* Atajos "Cotiza por WhatsApp": cada píldora abre WhatsApp con el canal ya escrito */
.pa-canales{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1rem;margin-top:1.75rem}
.pa-canales p{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--crema)}
.pa-canales ul{display:flex;flex-wrap:wrap;gap:.5rem}
.pa-canales a{display:inline-flex;align-items:center;min-height:40px;padding:.4rem 1rem;border:1.5px solid rgba(255,255,255,.7);border-radius:var(--r-pill);color:#fff;font-size:.875rem;font-weight:600;text-decoration:none;transition:background-color .2s,border-color .2s}
.pa-canales a:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* Medio del héroe: tres barras de alturas crecientes, como una gráfica. Cada barra lleva
   arriba un retrato del mismo tamaño (misma escala de cara, nunca más de ~1x de la foto)
   y debajo una columna de color que crece hasta la línea base. */
.pa-media{position:relative;margin:0 14px 0 0;justify-self:end;width:100%;max-width:500px}
.pa-barras{position:relative;aspect-ratio:1/1.04}
/* Línea base de la "gráfica", bajo las columnas */
.pa-barras::after{content:"";position:absolute;left:-3%;right:-6%;bottom:-12px;height:3px;border-radius:3px;background:var(--crema);opacity:.5}
.pa-barras-m{display:none;position:absolute;z-index:0;left:-14%;top:30%;width:132%;aspect-ratio:277/188;fill:var(--azul);pointer-events:none}
.pa-barra{position:absolute;z-index:1;bottom:0;width:29.5%;display:flex;flex-direction:column;--off:12px}
/* La columna es la sombra sólida del arco que baja hasta la línea base: mismo color y mismo
   desplazamiento (--off), así retrato y barra se leen como una sola pieza */
.pa-barra::after{content:"";flex:1;min-height:12px;margin:0 calc(-1 * var(--off)) 0 var(--off);background:var(--bar)}
.pa-retrato{position:relative;flex:none}
.pa-barra .arch{aspect-ratio:1/1.35}
.pa-barra .arch img{object-position:50% 20%}
.pa-barra.b1{left:0;height:58%;--bar:var(--durazno)}
.pa-barra.b2{left:35%;height:77%;--bar:var(--amarillo)}
.pa-barra.b3{left:70%;height:96%;--bar:var(--crema)}
/* Laura: sombra crema (la m del fondo es azul y se tragaba una sombra azul) */
.pa-barra.b3 .arch{--bk:var(--crema)}
.pa-retrato .chip-name{left:-7%;bottom:10%}
.pa-media .pa-sello{position:absolute;z-index:3;left:-2%;top:3%;width:clamp(108px,30%,150px);transform:rotate(-12deg)}
.pa-media figcaption{position:relative;z-index:1;display:table;margin-top:2.6rem;padding:.45rem .95rem;border-radius:14px;background:var(--navy);border:1px solid rgba(244,241,208,.35);font-size:var(--fs-xs);font-weight:500;line-height:1.45;color:var(--crema)}


/* ---------- 02 Banda ----------------------------------------------------- */
/* La franja amarilla cruza en diagonal el borde entre el héroe navy y la crema:
   la banda sube sobre el héroe hasta que su centro coincide con el borde inferior. */
.pa-band{margin-top:calc(-1 * var(--pa-medio));background:linear-gradient(to bottom,transparent 0,transparent var(--pa-medio),var(--crema) 0)}


/* ---------- 03 Cifras ---------------------------------------------------- */
/* Cuatro cifras: la rejilla viene de .figures.figures-4 (sitio.css) */
@media (min-width:1100px){.pa-cifras .fig{aspect-ratio:1/1.1}}


/* ---------- 04 Servicios en profundidad ---------------------------------- */
/* Escalera: cada panel arranca un escalón más a la derecha que el anterior */
.pa-svcs{display:grid;gap:clamp(1.25rem,2.4vw,2rem);margin-top:clamp(2.5rem,5vw,4rem)}
.pa-svc{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-card);padding:clamp(1.5rem,3.6vw,3.5rem);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.75rem clamp(2rem,5vw,5rem);align-items:start}
.pa-svc:nth-child(1){margin-right:clamp(0px,8vw,8rem)}
.pa-svc:nth-child(2){margin-inline:clamp(0px,4vw,4rem)}
.pa-svc:nth-child(3){margin-left:clamp(0px,8vw,8rem)}
/* Arco de trazo grande (de la m) en la esquina del panel */
.pa-svc::after{content:"";position:absolute;z-index:-1;left:-90px;bottom:-250px;width:340px;height:400px;border:40px solid var(--trazo);border-bottom:0;border-radius:var(--r-arch)}
.pa-svc-head{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;min-width:0}
.pa-svc-top{display:flex;align-items:flex-end;gap:1rem}
.pa-svc .tile-ico{background:var(--navy);color:var(--amarillo)}
.pa-svc.s-navy .tile-ico{background:var(--amarillo);color:var(--navy)}
.pa-svc-tag{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.35;max-width:15em}
.pa-svc-h{font-size:clamp(2.6rem,5.4vw,5.25rem);font-weight:800;letter-spacing:-.045em;line-height:.92;color:var(--titulo,var(--navy))}
.pa-svc-body{min-width:0;padding-top:.25rem}
.pa-svc-desc{font-size:var(--fs-lead);font-weight:500;line-height:1.5;max-width:30em}
/* Columnas al ancho del contenido (sin partir renglones); TikTok, con tres ítems, va en una sola columna */
.pa-svc .checks{grid-template-columns:repeat(2,minmax(0,max-content));gap:.75rem 2.5rem;margin:1.6rem 0 2rem}
.pa-svc .checks:last-child{margin-bottom:0}
#tiktok-ads .checks{grid-template-columns:minmax(0,max-content)}
.pa-svc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
.pa-svc .tile-link{margin-top:0}


/* ---------- 05 Resultados: cómo leer las cifras -------------------------- */
.pa-glosario{margin-top:clamp(2.5rem,5vw,4rem);padding-top:2rem;border-top:1px solid rgba(255,255,255,.22)}
.pa-glosario-h{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.pa-glosario dl{margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem clamp(1.25rem,2.5vw,2.5rem)}
.pa-glosario dt{font-weight:700;color:var(--amarillo);line-height:1.3}
.pa-glosario dd{margin:.4rem 0 0;font-size:var(--fs-sm);line-height:1.55;color:var(--crema)}
.pa-nota{margin-top:1.75rem;font-size:var(--fs-xs);line-height:1.5;color:var(--crema)}


/* ---------- 06 Cómo trabajamos ------------------------------------------- */
/* Sección crema; los tres pilares rotan amarillo / durazno / azul, como las cifras */
.pa-pilares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2.5rem,5vw,4rem);align-items:stretch}
.pa-pilar{color:var(--titulo,var(--navy));border-radius:999px 999px 24px 24px;padding:0 clamp(1.25rem,2.2vw,2rem) clamp(1.5rem,2.4vw,2.25rem);display:flex;flex-direction:column}
/* Escalón: misma altura en todas, la del medio 3rem más abajo */
.pa-pilar:nth-child(odd){margin-bottom:3rem}
.pa-pilar:nth-child(even){margin-top:3rem}
/* Cabeza del arco con alto acotado: no crece con el ancho de la tarjeta */
.pa-pilar-top{height:clamp(120px,11vw,160px);display:grid;place-items:end center;padding-bottom:1.25rem}
.pa-pilar-ico{width:58px;height:72px;border-radius:var(--r-arch);background:var(--navy);color:var(--amarillo);display:grid;place-items:center}
.pa-pilar.s-azul .pa-pilar-ico{background:#fff;color:var(--azul)}
.pa-pilar-ico .ico{width:26px;height:26px}
.pa-pilar h3{font-size:clamp(1.3rem,1.8vw,1.55rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;color:var(--titulo,var(--navy));margin-bottom:.6rem}
.pa-pilar p{font-size:var(--fs-sm);line-height:1.55}
/* Cierre: la garantía como promesa comercial, con su botón */
.pa-garantia > p{max-width:21em}
.pa-garantia-1{display:block}
.pa-garantia-k{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:var(--azul)}
.pa-garantia-k .ico{width:22px;height:22px;flex:none}


/* ---------- 07 Movimiento ------------------------------------------------ */
/* Todo parte visible: solo se desplaza (nada de opacity:0) */
@media (prefers-reduced-motion: no-preference){
  .pa-barra{animation:rise 1s cubic-bezier(.2,.8,.2,1) both;--from:32px}
  .pa-barra.b1{animation-delay:.15s}
  .pa-barra.b2{animation-delay:.27s}
  .pa-barra.b3{animation-delay:.39s}
  .pa-media .pa-sello{animation:stamp 1.1s cubic-bezier(.3,1.3,.5,1) .6s both}
}


/* ---------- 08 Responsive ------------------------------------------------ */
@media (max-width:1099px){
  .pa-hero .page-hero-m{right:calc(-.44 * var(--pa-m))}
  .pa-glosario dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Columna de texto del panel aún estrecha: lista en una columna para no partir renglones */
@media (min-width:901px) and (max-width:1199px){
  .pa-svc .checks{grid-template-columns:1fr}
}
@media (max-width:900px){
  .pa-media{justify-self:start;max-width:440px;margin-top:1.5rem}
  /* En una columna la m completa vive dentro de la gráfica, detrás de los arcos (no un recorte suelto de la grande) */
  .pa-hero .page-hero-m{display:none}
  .pa-barras-m{display:block}
  .pa-svc:nth-child(n){margin-inline:0}
  .pa-svc{grid-template-columns:1fr}
  .pa-svc-head{gap:1.25rem}
  /* Tres pilares en fila hasta 768 px: el titular baja un punto para que "Acompañamiento" quepa */
  .pa-pilar h3{font-size:1.2rem}
}
@media (max-width:767px){
  .pa-pilares{grid-template-columns:1fr;gap:1.25rem}
  .pa-pilar:nth-child(n){margin:0}
  .pa-pilar{border-radius:150px 150px 22px 22px}
  .pa-pilar-top{height:120px}
  .pa-pilar h3{font-size:1.3rem}
}
@media (max-width:640px){
  .pa-media{justify-self:center;width:auto;max-width:min(340px, calc(100% - 14px));margin:1.25rem 14px 0 0}
  .pa-media figcaption{margin-top:2.25rem}
  .pa-svc .checks{grid-template-columns:1fr}
  .pa-svc::after{left:auto;right:-150px;bottom:-280px}
  .pa-glosario dl{grid-template-columns:1fr}
}
@media (max-width:360px){
  .pa-hero .display-2{font-size:2.45rem}
  .pa-canales a{padding-inline:.85rem}
}