/* ============================================================
   confianza.css — DIRECCIÓN VISUAL v2 "Tienda de fábrica".
   Punto medio entre "Guma Moderno" y la propuesta clara:
   base blanca, tipografía Inter, bordes finos, y el amarillo y la
   tinta de Moderno como acción y como bandas.
   Se carga DESPUÉS de css/moderno.css y del css de cada página, y
   solo actúa si el <body> lleva la clase "v2".
   Los CSS de Moderno usan var(--r-card, 28px) etc.: sin la clase
   v2 todo se ve como antes. Respaldo completo de la estética
   anterior: _respaldo-estetica-anterior/.
   ============================================================ */

body.v2{
  --ink:#071C34;            /* tinta Moderno: texto, bandas, footer */
  --ink-2:#0C2A4D;
  --ink-soft:#44546A;       /* texto secundario */
  --ink-mute:#6B7A8F;       /* notas */
  --blue:#00417F;           /* azul Guma: enlaces y apoyos */
  --blue-hover:#003366;
  --blue-tint:#EAF1F9;
  --yellow:#FFC72C;         /* amarillo Guma: acción principal y acentos */
  --yellow-hover:#FFD152;
  --yellow-deep:#E8AE00;
  --yellow-tint:#FFF6D6;
  --foam:#F6F7F9;           /* papel Moderno: bandas alternas */
  --paper:#F6F7F9;
  --white:#FFFFFF;
  --line:#E2E7ED;
  --line-soft:#EDF0F4;
  --line-strong:#B9C4D1;
  --ok:#0F7B3D;
  /* forma: sustituyen a los radios de Moderno (99/28/16 px) */
  --r-pill:8px;
  --r-btn:8px;
  --r-card:12px;
  --r-inner:8px;
  --r-photo:12px;
  --fw-x:700;               /* el 800 de Manrope pasa a 700 en Inter */
  --shadow-card:none;
  --shadow-lift:0 10px 24px -16px rgba(7,28,52,.3);
  /* movimiento: curva ease-out fuerte, todo por debajo de 300 ms */
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-out:cubic-bezier(.23,1,.32,1);

  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-feature-settings:"cv11","ss01";
  letter-spacing:-.011em;
  background:var(--white);
  color:var(--ink);
}
.v2 ::selection{background:var(--yellow);color:var(--ink);}
.v2 :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px;}
.v2 .hero :focus-visible,.v2 .site-footer :focus-visible,.v2 .topbar :focus-visible{outline-color:var(--yellow);}
.v2 ::-webkit-scrollbar-thumb{border-color:var(--white);}

/* ---------- contenedor ---------- */
.v2 .wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:20px;}
@media (min-width:768px){.v2 .wrap{padding-inline:32px;}}

/* ============================================================
   FRANJA SUPERIOR (tinta, íconos amarillos)
   ============================================================ */
.v2 .topbar{background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;}
.v2 .topbar-inner{
  max-width:1240px;margin-inline:auto;padding:0 20px;height:36px;
  display:flex;align-items:center;justify-content:center;gap:2rem;white-space:nowrap;
}
@media (min-width:768px){.v2 .topbar-inner{padding-inline:32px;justify-content:space-between;}}
.v2 .topbar-item{display:inline-flex;align-items:center;gap:.4rem;}
.v2 .topbar-item .material-symbols-outlined{font-size:16px;color:var(--yellow);}
.v2 .topbar-item.is-extra{display:none;}
@media (min-width:900px){.v2 .topbar-item.is-extra{display:inline-flex;}}
.v2 .topbar a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4);transition:text-decoration-color .15s ease;}
.v2 .topbar a:hover{text-decoration-color:var(--yellow);}

/* ============================================================
   HEADER: blanco y sólido en todas las páginas
   ============================================================ */
.v2 .site-header{
  background:var(--white);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 1px 0 var(--line);
  transition:box-shadow .2s var(--ease-out);
}
.v2 .site-header[data-scrolled="true"]{background:var(--white);box-shadow:0 1px 0 var(--line),0 10px 24px -18px rgba(7,28,52,.35);}
.v2 .site-header .header-inner{max-width:1240px;padding-inline:20px;}
@media (min-width:768px){.v2 .site-header .header-inner{padding-inline:32px;}}
.v2 .site-header .nav-ink{color:var(--ink);font-weight:700;letter-spacing:-.02em;}
.v2 .site-header .nav-link{color:var(--ink-soft);border-radius:6px;font-size:14px;font-weight:500;transition:color .15s ease,background-color .15s ease;}
.v2 .site-header .nav-link:hover{color:var(--ink);background:var(--paper);}
.v2 .site-header .nav-link.is-active{color:var(--ink);font-weight:600;}
.v2 .site-header .nav-link.is-active::after{background:var(--yellow);height:3px;border-radius:2px;}
.v2 .site-header .icon-btn{
  color:var(--ink);border:1px solid var(--line-strong);background:var(--white);border-radius:var(--r-btn);
  transition:border-color .15s ease,background-color .15s ease,transform .16s var(--ease-out);
}
.v2 .site-header .icon-btn:hover{background:var(--white);border-color:var(--ink);color:var(--ink);}
.v2 .site-header .icon-btn:active{transform:scale(.97);}
.v2 .site-header .btn-ghost{color:var(--ink);border:1px solid var(--line-strong);background:var(--white);}
.v2 .scroll-progress{display:none;}
.v2 .mobile-link{font-weight:500;}
.v2 .mobile-link[aria-current]{color:var(--ink);font-weight:700;}
.v2 #mobileNav{max-height:calc(100dvh - 4.5rem - 36px);}
@media (min-width:1024px) and (max-width:1279px){
  .v2 #mainNav .nav-link{padding:.55rem .55rem;font-size:13px;}
}
/* el header ahora mide 36 px más por la franja superior */
.v2 .hero{padding-top:36px;}

/* ============================================================
   BOTONES: borde de 1 px, sin sombra, amarillo como acción
   ============================================================ */
.v2 .btn-accent,.v2 .btn-ink,.v2 .btn-outline,.v2 .btn-soft,.v2 .btn-line,.v2 .btn-wa{
  border-radius:var(--r-btn);font-weight:600;font-size:15px;letter-spacing:-.006em;justify-content:center;
  border:1px solid transparent;box-shadow:none;
  transition:transform .16s var(--ease-out),background-color .15s ease,border-color .15s ease,color .15s ease;
}
.v2 .btn-accent:hover,.v2 .btn-ink:hover,.v2 .btn-outline:hover,.v2 .btn-soft:hover,.v2 .btn-line:hover,.v2 .btn-wa:hover{transform:none;box-shadow:none;}
.v2 .btn-accent:active,.v2 .btn-ink:active,.v2 .btn-outline:active,.v2 .btn-soft:active,.v2 .btn-line:active,.v2 .btn-wa:active{transform:scale(.97);}
.v2 .btn-accent{background:var(--yellow);color:var(--ink);border-color:var(--yellow-deep);}
.v2 .btn-accent:hover{background:var(--yellow-hover);}
.v2 .btn-ink{background:var(--ink);color:#fff;border-color:var(--ink);}
.v2 .btn-ink:hover{background:var(--ink-2);}
.v2 .btn-line{border-color:var(--line-strong);color:var(--ink);background:var(--white);}
.v2 .btn-line:hover{border-color:var(--ink);background:var(--white);}
.v2 .btn-outline{border-color:rgba(255,255,255,.45);color:#fff;background:transparent;}
.v2 .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.v2 .btn-soft{background:var(--white);color:var(--ink);border-color:var(--line-strong);}
.v2 .btn-soft:hover{background:var(--white);border-color:var(--ink);}
.v2 .btn-wa{background:var(--ok);color:#fff;border-color:var(--ok);}
.v2 .btn-wa:hover{background:#0B6431;}
.v2 .site-header .btn-wa{font-size:13.5px;}
.v2 .magnetic{transform:none !important;}

/* enlace de texto con flecha */
.v2 .link-arrow{
  display:inline-flex;align-items:center;gap:.3rem;font-size:15px;font-weight:600;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:5px;
}
.v2 .link-arrow .material-symbols-outlined{font-size:19px;transition:transform .2s var(--ease-out);}
@media (hover:hover) and (pointer:fine){.v2 .link-arrow:hover .material-symbols-outlined{transform:translateX(3px);}}

/* ============================================================
   TÍTULOS Y SECCIONES
   ============================================================ */
.v2 .sec{padding-block:64px;}
@media (min-width:1024px){.v2 .sec{padding-block:96px;}}
.v2 .sec-foam{background:var(--foam);}
.v2 .sec-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:2.25rem;}
@media (min-width:768px){.v2 .sec-head{flex-direction:row;align-items:flex-end;justify-content:space-between;margin-bottom:3rem;}}
.v2 .eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:13px;font-weight:600;letter-spacing:.005em;color:var(--ink-soft);
}
.v2 .eyebrow::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--yellow);}
.v2 .section-title{
  font-size:clamp(1.7rem,3vw,2.5rem);font-weight:600;letter-spacing:-.028em;line-height:1.12;color:var(--ink);
  text-wrap:balance;max-width:22ch;
}
.v2 .eyebrow + .section-title{margin-top:.7rem;}
.v2 .section-sub{max-width:58ch;font-size:16.5px;line-height:1.6;color:var(--ink-soft);}
.v2 .section-title-inv{color:#fff;}
.v2 .section-sub-inv{color:rgba(255,255,255,.7);}

/* Título de subpágina: banda de tinta de Moderno, con Inter */
.v2 .pg-title{font-weight:700;letter-spacing:-.035em;line-height:1.04;}
.v2 .pg-sub{color:rgba(255,255,255,.78);}
.v2 .crumbs{font-weight:500;}
/* las manchas de espuma del hero se atenúan: banda más sobria */
.v2 .foam-layer{opacity:.3;animation:none;}
.v2 .foam-3{opacity:.08;}

/* ============================================================
   CTA FINAL: banda amarilla de Moderno, con botones v2
   ============================================================ */
.v2 .cta-band{background:var(--yellow);color:var(--ink);}
.v2 .cta-title{font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;text-wrap:balance;}
.v2 .cta-sub{color:rgba(7,28,52,.78);font-size:17px;max-width:50ch;}
.v2 .cta-note{color:rgba(7,28,52,.7);font-weight:500;font-size:13.5px;}
.v2 .cta-band .btn-line{background:transparent;border-color:rgba(7,28,52,.45);color:var(--ink);}
.v2 .cta-band .btn-line:hover{background:rgba(7,28,52,.06);border-color:var(--ink);}
.v2 .cta-band :focus-visible{outline-color:var(--ink);}
@media (max-width:639px){.v2 .cta-actions{flex-direction:column;align-items:stretch;}}

/* ============================================================
   FOOTER
   ============================================================ */
.v2 .site-footer{background:var(--ink);}
.v2 .site-footer > div{max-width:1240px;padding-inline:20px;}
@media (min-width:768px){.v2 .site-footer > div{padding-inline:32px;}}
.v2 .foot-head{color:var(--yellow);letter-spacing:.01em;text-transform:none;font-size:14px;font-weight:600;}
.v2 .foot-link,.v2 .foot-text{font-size:14.5px;color:rgba(255,255,255,.72);}
.v2 .foot-link{transition:color .15s ease;}
.v2 .foot-link-accent{color:var(--yellow);font-weight:600;}
.v2 .foot-base{color:rgba(255,255,255,.6);font-size:13px;}
.v2 .foot-badge{border-radius:var(--r-btn);font-weight:600;}

/* ============================================================
   BUSCADOR Y AVISOS (compartidos)
   ============================================================ */
.v2 .sp-input{font-weight:500;}
.v2 .sp-input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,199,44,.5);}
.v2 .sp-hit-copy strong{font-weight:600;}
.v2 .sp-chip{font-weight:500;border-color:var(--line-strong);transition:border-color .15s ease,background-color .15s ease,color .15s ease;}
.v2 .ck{border-radius:var(--r-card);}
.v2 .pend-box,.v2 .foto-pend{border-width:1px;}
.v2 .foto-falta{border-radius:4px;box-shadow:none;font-weight:700;}

/* ============================================================
   ENTRADA AL HACER SCROLL: corta y discreta
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  html .v2 .reveal{transform:translateY(8px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);}
  html .v2 .reveal.is-visible{transform:none;}
  /* los títulos de subpágina entran de una vez, sin coreografía larga */
  .v2 .pg-title .line-inner{animation-duration:.5s;animation-delay:0s !important;}
  .v2 .crumbs,.v2 .pg-sub,.v2 .pg-cta{animation-duration:.4s;animation-delay:.08s;}
}

/* ============================================================
   SIN SOMBRAS PESADAS: las tarjetas de Moderno se sostienen con
   su borde fino. (Lista generada de los css de cada página.)
   ============================================================ */
.v2 .agf-main,
.v2 .calc-card,
.v2 .uses,
.v2 .line-main,
.v2 .delivery,
.v2 .g-main,
.v2 .desk,
.v2 .ship,
.v2 .calc,
.v2 .msg-card,
.v2 .cut,
.v2 .fmt-feature,
.v2 .ind-main,
.v2 .stock-switch::after,
.v2 .beds{box-shadow:none;}
.v2 .agf-main,.v2 .uses,.v2 .line-main,.v2 .delivery,.v2 .g-main,.v2 .desk,.v2 .ship,.v2 .msg-card,.v2 .cut,.v2 .fmt-feature,.v2 .ind-main,.v2 .beds{border:1px solid var(--line);}

/* Cotizador en móvil: el formulario ya no se sale de su tarjeta (error previo a v2). */
.v2 .calc-grid > *{min-width:0;}
.v2 .calc-form > *{max-width:100%;}

/* Contenedor de 1240 px en todo el sitio: el contenido se alinea con el header. */
.v2 .max-w-\[1440px\]{max-width:1240px;padding-inline:20px;}
@media (min-width:768px){.v2 .max-w-\[1440px\]{padding-inline:32px;}}

/* ============================================================
   BLOQUES DE ACCIÓN MÁS SOBRIOS (pedido del dueño, 10-oct):
   esquinas de 6 px, borde de 1 px del mismo tono, sin contorno
   oscuro en el amarillo, flecha que avanza 2 px con el cursor.
   ============================================================ */
body.v2{--r-btn:6px;--r-pill:6px;}
.v2 .btn-accent,.v2 .btn-ink,.v2 .btn-outline,.v2 .btn-soft,.v2 .btn-line,.v2 .btn-wa{
  font-size:14.5px;letter-spacing:-.01em;gap:.45rem;
}
.v2 .btn-accent{border-color:var(--yellow);}
.v2 .btn-accent:hover{border-color:var(--yellow-hover);}
.v2 .btn-line,.v2 .btn-soft{border-color:var(--line-strong);}
.v2 .btn-accent .material-symbols-outlined,.v2 .btn-ink .material-symbols-outlined,.v2 .btn-line .material-symbols-outlined,
.v2 .btn-soft .material-symbols-outlined,.v2 .btn-outline .material-symbols-outlined{font-size:18px;transition:transform .2s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .v2 .btn-accent:hover .material-symbols-outlined,.v2 .btn-ink:hover .material-symbols-outlined,
  .v2 .btn-line:hover .material-symbols-outlined,.v2 .btn-soft:hover .material-symbols-outlined,
  .v2 .btn-outline:hover .material-symbols-outlined{transform:translateX(2px);}
}
/* accesos rápidos del hero en subpáginas */
.v2 .jump-link{border-radius:var(--r-btn);font-weight:500;border-width:1px;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .16s var(--ease-out);}
.v2 .jump-link:active{transform:scale(.97);}
