/* Coop Mayagüez · sistema visual
   Verde cooperativo, lima de las curvas y el sol del logo. */

@font-face { font-family: "Urbanist"; src: url("../fonts/urbanist.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --fondo: #f4f8ee;
  --fondo-2: #eaf2e0;
  --papel: #ffffff;
  --tinta: #10261a;
  --tinta-2: #48594e;
  --tinta-3: #5a6a60;
  --linea: #dfe8d6;
  --linea-2: #cbd8bf;
  --verde: #019645;
  --verde-texto: #017a39;
  --hondo: #0e3b24;
  --noche: #0e3b24;
  --lima: #9ed36a;
  --lima-2: #7fbe54;
  --lima-suave: #dcefc6;
  --sol: #f4b400;
  --sol-suave: #ffe9a8;
  --rojo: #b42318;

  --r-xs: 10px; --r-s: 16px; --r-m: 24px; --r-l: 32px; --r-xl: 44px;
  --sombra-1: 0 1px 2px rgba(14, 59, 36, .06), 0 4px 14px rgba(14, 59, 36, .06);
  --sombra-2: 0 2px 6px rgba(14, 59, 36, .06), 0 18px 40px -12px rgba(14, 59, 36, .22);
  --sombra-3: 0 30px 70px -20px rgba(10, 42, 26, .38);

  --ancho: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --display: "Urbanist", "Figtree", system-ui, sans-serif;
  --texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 17px/1.6 var(--texto); font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--verde-texto); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--hondo); }
::selection { background: var(--lima); color: var(--hondo); }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 8px; }
html { scrollbar-color: var(--lima-2) var(--fondo); }
h1, h2, h3, h4 { font-family: var(--display); color: var(--tinta); margin: 0; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.04em; }
h2 { font-weight: 700; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.06; letter-spacing: -.035em; }
h3 { font-weight: 700; font-size: 1.32rem; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
.tnum { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── Botones ───────── */
.btn {
  --bg: var(--lima); --fg: var(--hondo);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 1.6em; border-radius: 999px; border: 0;
  background: var(--bg); color: var(--fg); font: 600 1rem/1 var(--texto); text-decoration: none;
  cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 16px -8px rgba(10, 42, 26, .35);
}
.btn:hover { color: var(--fg); transform: translateY(-2px); background: #acdc7c; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 24px -10px rgba(10, 42, 26, .4); }
.btn:active { transform: translateY(0); }
.btn--hondo { --bg: var(--hondo); --fg: #fff; box-shadow: 0 10px 24px -12px rgba(10,42,26,.6); }
.btn--hondo:hover { background: #154d30; }
.btn--claro { --bg: var(--papel); --fg: var(--hondo); box-shadow: inset 0 0 0 1.5px var(--linea-2); }
.btn--claro:hover { background: var(--papel); box-shadow: inset 0 0 0 1.5px var(--hondo); }
.btn--sm { min-height: 44px; padding: 0 1.25em; font-size: .95rem; }
.btn .ic { width: 18px; height: 18px; }
.enlace-flecha { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; color: var(--hondo); }
.enlace-flecha .ic { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.enlace-flecha:hover .ic { transform: translate(3px, -3px); }

/* ───────── Barra superior y menú ───────── */
.barra-sup { background: var(--fondo); font-size: .88rem; color: var(--tinta-2); }
.barra-sup .envoltura { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.barra-sup a { color: var(--tinta-2); text-decoration: none; }
.barra-sup a:hover { color: var(--hondo); }
.barra-sup__izq, .barra-sup__der { display: flex; align-items: center; gap: 22px; }
.barra-sup__izq span { display: inline-flex; align-items: center; gap: 8px; }
.barra-sup .sep { width: 18px; height: 1.5px; background: currentColor; opacity: .6; }
.barra-sup .ic { width: 16px; height: 16px; }

.cabecera { position: sticky; top: 0; z-index: 50; padding: 10px 0; background: transparent; transition: padding .3s var(--ease); }
.cabecera::before { content: ""; position: absolute; inset: 0 0 auto; height: 100%; background: linear-gradient(var(--fondo) 55%, transparent); opacity: 0; transition: opacity .3s; pointer-events: none; }
.cabecera.es-fija::before { opacity: 1; }
body.interior .cabecera::before { background: linear-gradient(var(--fondo) 55%, transparent); }
.nav {
  position: relative; display: flex; align-items: center; gap: 20px;
  background: var(--papel); border-radius: 999px; padding: 10px 10px 10px 24px;
  box-shadow: 0 1px 0 rgba(14,59,36,.04), 0 12px 32px -14px rgba(14,59,36,.22);
}
.nav__marca { display: flex; align-items: center; gap: 16px; text-decoration: none; flex: none; }
.nav__marca img { width: 156px; height: auto; }
.nav__menu { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 0; list-style: none; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 999px;
  color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .98rem; background: none; border: 0; font-family: inherit; cursor: pointer;
}
.nav__link .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.nav__link:hover, .nav__item:focus-within > .nav__link { background: var(--fondo); color: var(--hondo); }
.nav__link[aria-current="page"], .nav__item.activo > .nav__link { color: var(--verde-texto); font-weight: 600; }
.nav__sub {
  position: absolute; top: calc(100% + 12px); left: 50%; min-width: 250px; padding: 10px; margin: 0; list-style: none;
  background: var(--papel); border-radius: var(--r-m); box-shadow: var(--sombra-2);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .25s, transform .35s var(--ease), visibility .25s;
}
.nav__sub::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__item:hover > .nav__link .ic { transform: rotate(180deg); }
.nav__sub a { display: block; padding: 10px 14px; border-radius: 12px; color: var(--tinta); text-decoration: none; font-weight: 500; }
.nav__sub a small { display: block; color: var(--tinta-3); font-weight: 400; font-size: .84rem; margin-top: 1px; }
.nav__sub a:hover { background: var(--fondo); color: var(--hondo); }
.nav__acciones { display: flex; align-items: center; gap: 6px; flex: none; }
.nav__abrir { display: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--fondo); color: var(--hondo); cursor: pointer; align-items: center; justify-content: center; }

/* Menú del celular */
.movil { position: fixed; inset: 0; z-index: 80; display: none; }
.movil.abierto { display: block; }
.movil__velo { position: absolute; inset: 0; background: rgba(10,42,26,.4); animation: aparecer .3s; }
.movil__panel {
  position: absolute; inset: 8px 8px auto; max-height: calc(100dvh - 16px); overflow: auto;
  background: var(--papel); border-radius: var(--r-l); padding: 18px 18px 22px; box-shadow: var(--sombra-3);
  animation: bajar .4s var(--ease);
}
.movil__cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.movil__cab img { width: 140px; }
.movil details { border-bottom: 1px solid var(--linea); }
.movil summary, .movil__solo { display: flex; justify-content: space-between; align-items: center; padding: 15px 4px; font: 600 1.12rem var(--display); color: var(--tinta); text-decoration: none; cursor: pointer; list-style: none; }
.movil summary::-webkit-details-marker { display: none; }
.movil details[open] summary .ic { transform: rotate(180deg); }
.movil details a { display: block; padding: 10px 14px; color: var(--tinta-2); text-decoration: none; }
.movil details div { padding-bottom: 10px; }
.movil__solo { border-bottom: 1px solid var(--linea); }
.movil__pie { display: grid; gap: 10px; margin-top: 18px; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes bajar { from { opacity: 0; transform: translateY(-14px); } }

/* ───────── Hero de la portada ───────── */
.hero { position: relative; background: var(--fondo); padding: clamp(40px, 4.4vw, 64px) 0 0; overflow: hidden; isolation: isolate; }
.hero__puntos { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(14,59,36,.11) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: radial-gradient(60% 50% at 50% 62%, #000 20%, transparent 75%); }
.hero__texto { text-align: center; max-width: 900px; margin-inline: auto; }
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--verde-texto); }
.hero__sub { font-size: clamp(1.06rem, 1.6vw, 1.22rem); color: var(--tinta-2); max-width: 640px; margin: 0 auto 32px; }
.hero__ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.escena__fondo { position: absolute; left: 50%; translate: -50% 0; width: min(1320px, 100% - 32px); top: 22%; bottom: 0; border-radius: 48px 48px 0 0; overflow: hidden; background: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) 0 0 / 22px 22px, linear-gradient(160deg, #13482c, var(--hondo) 60%); }
.escena { position: relative; height: clamp(360px, 46vw, 600px); margin-top: clamp(20px, 2vw, 28px); }
.escena__curva { position: absolute; left: -10%; right: -10%; bottom: 0; height: 38%; background: var(--lima); border-radius: 50% 50% 0 0 / 60% 60% 0 0; }
.escena__sol {
  position: absolute; right: -3%; top: 12%; width: clamp(150px, 17vw, 250px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffd34d 0 46%, var(--sol) 47%);
  animation: sol-sube 1.6s var(--ease) .2s both;
}
.escena__rayos { position: absolute; right: -6%; top: -30%; width: 70%; aspect-ratio: 1; opacity: .5;
  background: repeating-conic-gradient(from 0deg at 88% 40%, rgba(244,180,0,.16) 0 3deg, transparent 3deg 11deg);
  mask-image: radial-gradient(closest-side at 88% 40%, #000 30%, transparent 100%);
}
@keyframes sol-sube { from { transform: translateY(40%); opacity: 0; } }

/* Dispositivos dibujados */
.equipo { position: absolute; left: 50%; bottom: -2px; width: min(1000px, 92%); translate: -50% 0; height: 100%; }
.pantalla {
  position: absolute; left: 21%; right: 0; bottom: -20px; height: 104%;
  background: #f3f6f0; border-radius: 30px 30px 0 0; padding: 12px 12px 0; outline: 1px solid rgba(14,59,36,.08);
  box-shadow: var(--sombra-3); animation: subir 1.1s var(--ease) .15s both;
}
.panel { height: 100%; background: #f7faf4; border-radius: 20px 20px 0 0; display: grid; grid-template-columns: 64px 1fr; overflow: hidden; font-size: 12px; color: var(--tinta); }
.panel__lado { background: var(--papel); padding: 18px 10px; border-right: 1px solid var(--linea); display: grid; align-content: start; gap: 6px; justify-items: center; }
.panel__lado img { display: none; }
.panel__lado b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--hondo); color: var(--lima); font: 700 13px var(--display); margin-bottom: 10px; }
.panel__lado span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--tinta-2); font-size: 0; }
.panel__lado span.on { background: var(--lima-suave); color: var(--hondo); font-weight: 600; }
.panel__lado .ic { width: 17px; height: 17px; }
.panel__cuerpo { padding: 18px 20px; display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto; gap: 12px; align-content: start; }
.panel__cab { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.panel__cab b { font: 700 17px var(--display); }
.panel__cab small { color: var(--tinta-3); }
.panel__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linea); color: var(--tinta-2); font-size: 11px; }
.tarjeta-saldo { background: var(--hondo); color: #fff; border-radius: 16px; padding: 14px 16px; position: relative; overflow: hidden; }
.tarjeta-saldo small { color: #bfe0a6; display: block; }
.tarjeta-saldo b { display: block; font: 700 22px var(--display); margin: 6px 0 2px; letter-spacing: -.02em; }
.mini { background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 12px 14px; }
.mini small { color: var(--tinta-3); display: block; }
.mini b { display: block; font: 700 18px var(--display); margin-top: 4px; }
.barra-meta { height: 6px; border-radius: 9px; background: var(--fondo-2); margin-top: 10px; overflow: hidden; }
.barra-meta i { display: block; height: 100%; border-radius: inherit; background: var(--lima-2); }
.panel__facturas { grid-column: span 2; background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 12px 14px; }
.panel__facturas header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.panel__facturas header b { font: 700 13px var(--display); }
.fila { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--linea); }
.fila .ic { width: 16px; height: 16px; color: var(--verde); }
.estado { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; background: var(--lima-suave); color: var(--hondo); }
.estado--pend { background: var(--sol-suave); color: #7a5300; }

.telefono {
  position: absolute; left: 4%; bottom: -6px; width: clamp(170px, 22%, 236px); aspect-ratio: 9 / 18.6;
  background: #0f1d15; border-radius: 38px; padding: 9px; box-shadow: var(--sombra-3);
  animation: subir 1.1s var(--ease) .3s both;
}
.telefono__pant { position: relative; height: 100%; border-radius: 30px; overflow: hidden; }

.plastico {
  position: absolute; right: 1%; bottom: 34%; width: clamp(220px, 33%, 340px); aspect-ratio: 1.586;
  border-radius: 16px; overflow: hidden; isolation: isolate; color: #5f6b75; container-type: inline-size;
  background: linear-gradient(155deg, #f3f7fb 0%, #e3ecf5 38%, #ccd2d8 66%, #b9c0c7 100%);
  box-shadow: var(--sombra-3); transform: rotate(-8deg); animation: tarjeta 1.2s var(--ease) .5s both;
}
/* Ondas azules del diseño real de la tarjeta */
.plastico::before { content: ""; position: absolute; right: -38%; top: -78%; width: 112%; height: 132%; border-radius: 50%; background: linear-gradient(200deg, #2a72bd 0%, #3f8bd3 55%, #6aaae4 100%); z-index: -1; }
.plastico::after { content: ""; position: absolute; left: -25%; top: 30%; width: 150%; height: 44%; border-radius: 50%; background: linear-gradient(90deg, rgba(91,160,226,.75), rgba(140,195,240,.45)); transform: rotate(-11deg); z-index: -1; }
.plastico__logo { position: absolute; left: 6%; top: 7%; width: 42%; }
.plastico__chip { position: absolute; left: 8%; top: 44%; display: flex; align-items: center; gap: 6px; color: #fff; }
.chip { display: block; width: 13cqw; aspect-ratio: 1.25; border-radius: 6px; background: linear-gradient(135deg, #f1e3c4, #c9b48a); box-shadow: inset 0 0 0 1px rgba(90,70,30,.35); }
.plastico__nfc { width: 6.5cqw; height: 6.5cqw; }
.plastico__num { position: absolute; left: 7%; top: 65%; font: 600 5.6cqw var(--display); letter-spacing: .1em; white-space: nowrap; color: #6a7580; text-shadow: 0 1px 0 rgba(255,255,255,.75); }
.plastico__venc { position: absolute; left: 40%; top: 77%; font: 600 3.6cqw var(--display); letter-spacing: .1em; color: #6a7580; text-shadow: 0 1px 0 rgba(255,255,255,.75); }
.plastico__pie { position: absolute; left: 7%; right: 6%; bottom: 7%; display: flex; justify-content: space-between; align-items: center; font: 600 3.3cqw var(--display); letter-spacing: .12em; color: #6a7580; text-shadow: 0 1px 0 rgba(255,255,255,.75); }
.mc { display: flex; }
.mc i { width: 7.5cqw; height: 7.5cqw; border-radius: 50%; background: #eb001b; }
.mc i + i { margin-left: -3cqw; background: #f79e1b; opacity: .9; }

/* Pantalla de entrada de la app real (Home Banking) */
.app { background: #efb13f; color: #fff; display: flex; flex-direction: column; align-items: center; padding: 34px 14px 14px; text-align: center; }
.app__hora { position: absolute; top: 9px; left: 18px; font: 600 10px var(--texto); }
.app::before { content: ""; position: absolute; top: 8px; left: 50%; width: 34%; height: 15px; translate: -50% 0; background: #0f1d15; border-radius: 999px; }
.app__logo { width: 34%; aspect-ratio: 1; margin: 18px 0 14px; display: grid; place-items: center; background: rgba(255,255,255,.18); border-radius: 12px; }
.app__logo img { width: 78%; border-radius: 50%; }
.app__t { font: 500 10.5px var(--texto); margin-bottom: 8px; }
.app__campo { width: 100%; padding: 9px; background: #fff; color: #9aa3ab; font-size: 10px; border-radius: 3px; }
.app__btn { width: 100%; margin-top: 12px; padding: 10px; background: #3d8ed6; color: #fff; font: 600 11px var(--texto); border-radius: 3px; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.app__puntos { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
.app__puntos i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.app__puntos i:first-child { width: 10px; height: 10px; }
.app__pie { margin-top: auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.app__pie span { padding: 8px 4px; background: #3d8ed6; border-radius: 3px; font: 600 9.5px var(--texto); }
@keyframes subir { from { transform: translateY(60px); opacity: 0; } }
@keyframes tarjeta { from { transform: translateY(40px) rotate(4deg); opacity: 0; } }

/* ───────── Franja de confianza ───────── */
.confianza { padding: 44px 0 0; text-align: center; }
.confianza p { color: var(--tinta-2); font-size: 1.05rem; }
.confianza p b { color: var(--tinta); font-family: var(--display); font-size: 1.15em; }
.sellos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px 56px; margin: 26px 0 0; padding: 26px 0 46px; border-bottom: 1px solid var(--linea); }
.sellos img { height: 44px; width: auto; filter: grayscale(1) contrast(1.1); opacity: .62; transition: filter .3s, opacity .3s; }
.sellos img:hover { filter: none; opacity: 1; }
.sellos__red { display: inline-flex; align-items: center; gap: 10px; font: 700 1.3rem var(--display); color: #6f7b73; letter-spacing: -.02em; }
.sellos__red .ic { width: 28px; height: 28px; }

/* ───────── Secciones ───────── */
.seccion { padding: clamp(80px, 10vw, 136px) 0; }
.seccion--fondo { background: var(--fondo); }
.cabeza { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.cabeza--centro { text-align: center; margin-inline: auto; }
.cabeza p { color: var(--tinta-2); font-size: 1.1rem; margin-top: 18px; }

/* Tarjetas inclinadas «Para ti / Para tu negocio» */
.dos-caminos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 900px; margin-inline: auto; padding: 30px 0 20px; }
.dos-caminos::before, .dos-caminos::after { content: ""; position: absolute; top: 12%; width: 46%; height: 80%; border: 1px solid var(--linea); background: #fafcf8; border-radius: var(--r-xl); z-index: -1; }
.dos-caminos::before { left: -14%; transform: rotate(-10deg); }
.dos-caminos::after { right: -14%; transform: rotate(10deg); }
.camino { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); padding: 32px 30px 30px; text-decoration: none; overflow: hidden; min-height: 470px; transition: transform .6s var(--ease), box-shadow .6s var(--ease); box-shadow: var(--sombra-2); }
.camino--ti { background: var(--lima); color: var(--hondo); transform: rotate(-4deg); }
.camino--negocio { background: var(--hondo); color: #fff; transform: rotate(3.5deg) translateY(-14px); }
.camino:hover { transform: rotate(0) translateY(-6px); box-shadow: var(--sombra-3); }
.camino h3 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); letter-spacing: -.03em; color: inherit; }
.camino p { margin-top: 10px; opacity: .85; max-width: 32ch; }
.camino__foto { position: relative; flex: 1; margin: 22px -6px 18px; border-radius: var(--r-l); overflow: hidden; min-height: 200px; }
.camino__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.camino:hover .camino__foto img { transform: scale(1.04); }
.camino__pie { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.camino__pie i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--hondo); color: var(--lima); transition: transform .4s var(--ease); }
.camino--negocio .camino__pie i { background: var(--lima); color: var(--hondo); }
.camino:hover .camino__pie i { transform: rotate(-45deg); }
.camino__dato { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--hondo); font-size: .88rem; font-weight: 600; box-shadow: var(--sombra-1); }
.camino__dato i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sol); color: var(--hondo); }
.camino__dato .ic { width: 16px; height: 16px; }

/* Cuadrícula de productos */
.productos-cab { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 40px; margin-bottom: 64px; }
.productos-cab p { color: var(--tinta-2); font-size: 1.1rem; max-width: 46ch; }
.productos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 40px; }
.producto { display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; column-gap: 12px; padding-top: 22px; border-top: 1.5px solid var(--linea); text-decoration: none; color: var(--tinta); transition: border-color .3s; }
.producto:hover { border-top-color: var(--lima-2); color: var(--tinta); }
.producto__ic { color: var(--verde); transition: transform .4s var(--ease); }
.producto__ic .ic { width: 26px; height: 26px; }
.producto:hover .producto__ic { transform: rotate(-10deg) scale(1.08); }
.producto h3 { font-size: 1.24rem; }
.producto p { grid-column: 1 / -1; margin-top: 12px; color: var(--tinta-2); font-size: .98rem; }
.producto b { color: var(--tinta); font-weight: 600; }

/* Bloque de dos columnas con celular */
.digital { position: relative; background: var(--fondo); border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; isolation: isolate; }
.digital__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; min-height: 640px; }
.digital__arte { position: relative; height: 100%; min-height: 560px; }
.digital__circulo { position: absolute; left: -30%; bottom: -30%; width: 120%; aspect-ratio: 1; border-radius: 50%; background: var(--lima); z-index: -1; }
.digital__puntos { position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(rgba(14,59,36,.12) 1px, transparent 1.4px); background-size: 20px 20px; mask-image: linear-gradient(90deg, transparent, #000 60%); }
.digital .telefono { left: 6%; bottom: -60px; width: min(270px, 52%); transform: rotate(-12deg); animation: none; }
.digital .plastico { right: 2%; bottom: 40%; width: min(300px, 56%); transform: rotate(4deg); animation: none; }
.digital__texto h2 { margin-bottom: 18px; }
.digital__texto > p { color: var(--tinta-2); font-size: 1.1rem; max-width: 46ch; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 34px 0 38px; padding: 0; list-style: none; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; line-height: 1.4; }
.checks i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--papel); color: var(--hondo); box-shadow: var(--sombra-1); }
.checks li:first-child i { background: var(--lima-2); color: #fff; }
.checks .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding: clamp(72px, 9vw, 112px) 0 clamp(40px, 5vw, 64px); }
.cifra { position: relative; padding: 0 12px; }
.cifra + .cifra::before { content: ""; position: absolute; left: 0; top: 14%; height: 72%; width: 1px; background: var(--linea); }
.cifra b { display: inline-flex; align-items: flex-start; font: 700 clamp(2.6rem, 5vw, 4rem)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cifra b sup { font-size: .42em; margin: .2em 0 0 .12em; color: var(--verde-texto); }
.cifra > span { display: block; margin-top: 10px; color: var(--tinta-2); }

/* Voces de la cooperativa */
.voz { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; min-height: 480px; padding: 56px; border-radius: var(--r-xl); }
.voz::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--linea-2); border-radius: var(--r-xl); transform: rotate(-2deg); z-index: -1; }
.voz__comillas { width: 56px; height: 44px; color: var(--lima-2); margin-bottom: 26px; }
.voz__lamina { display: none; }
.voz__lamina.activa { display: block; animation: aparecer .6s ease; }
.voz blockquote { margin: 0; font: 500 clamp(1.25rem, 2vw, 1.6rem)/1.45 var(--display); letter-spacing: -.015em; color: var(--tinta); }
.voz cite { display: block; margin-top: 26px; font-style: normal; }
.voz cite b { display: block; font: 700 1.1rem var(--display); }
.voz cite span { color: var(--tinta-2); font-size: .95rem; }
.voz__nav { display: flex; gap: 12px; margin-top: 32px; }
.voz__nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linea-2); background: var(--papel); color: var(--hondo); cursor: pointer; display: grid; place-items: center; transition: background .25s, border-color .25s; }
.voz__nav button:hover { background: var(--lima); border-color: var(--lima); }
.voz__foto { position: relative; height: 100%; min-height: 420px; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sombra-2); }
.voz__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.voz__foto img:not(.activa) { opacity: 0; }

/* Pasos para hacerse socio */
.pasos { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 6vw, 88px); align-items: stretch; }
.paso { border-bottom: 1px solid var(--linea); }
.paso button { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 0; border: 0; background: none; cursor: pointer; text-align: left; font: 600 clamp(1.15rem, 1.8vw, 1.45rem) var(--display); color: var(--tinta); letter-spacing: -.02em; }
.paso button i { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 15px; background: var(--fondo); border: 1px solid var(--linea); color: var(--hondo); transition: background .3s; }
.paso.activo button i { background: var(--lima); border-color: var(--lima); }
.paso__det { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.paso.activo .paso__det { grid-template-rows: 1fr; }
.paso__det > div { overflow: hidden; }
.paso__det p { padding: 0 0 24px 68px; color: var(--tinta-2); max-width: 52ch; }
.pasos__arte { position: relative; border-radius: var(--r-xl); background: var(--lima); overflow: hidden; min-height: 520px; isolation: isolate; }
.pasos__arte::before { content: ""; position: absolute; left: 8%; bottom: -12%; width: 50%; height: 70%; border-radius: var(--r-l); background: linear-gradient(#ffffffaa, #ffffff22); z-index: -1; }
.pasos__lamina { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s var(--ease); pointer-events: none; }
.pasos__lamina.activa { opacity: 1; transform: none; pointer-events: auto; }
.ficha { width: min(380px, 100%); background: var(--papel); border-radius: var(--r-m); padding: 26px; box-shadow: var(--sombra-3); }
.ficha h3 { font-size: 1.15rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.ficha h3 .ic { color: var(--verde); }
.ficha ul { list-style: none; padding: 0; margin: 0; }
.ficha li { display: flex; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--linea); font-size: .96rem; }
.ficha li .ic { width: 18px; height: 18px; color: var(--verde); }
.ficha__monto { font: 700 3.4rem/1 var(--display); letter-spacing: -.04em; color: var(--hondo); margin: 6px 0 4px; }
.ficha small { color: var(--tinta-3); }
.ficha--foto { padding: 0; overflow: hidden; }
.ficha--foto img { width: 100%; height: 220px; object-fit: cover; }
.ficha--foto div { padding: 20px 24px 24px; }

/* Sucursales */
.sucursales { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sucursal { display: grid; grid-template-rows: 240px auto; background: var(--papel); border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--linea); }
.sucursal > img { width: 100%; height: 100%; object-fit: cover; }
.sucursal__cuerpo { padding: 28px 30px 30px; }
.sucursal h3 { font-size: 1.5rem; margin-bottom: 6px; }
.sucursal address { font-style: normal; color: var(--tinta-2); margin-bottom: 18px; }
.datos { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.datos li { display: flex; gap: 12px; align-items: flex-start; }
.datos .ic { width: 20px; height: 20px; color: var(--verde); margin-top: 2px; }
.datos a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.datos a:hover { color: var(--verde-texto); }
.horario { width: 100%; border-collapse: collapse; font-size: .95rem; margin-bottom: 22px; }
.horario th, .horario td { text-align: left; padding: 9px 0; border-top: 1px solid var(--linea); font-weight: 400; }
.horario th { color: var(--tinta-2); }
.horario td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.aviso-dato { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: #7a5300; background: var(--sol-suave); padding: 3px 10px; border-radius: 999px; }

/* Llamado final */
.llamado { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--hondo); color: #fff; padding: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center; isolation: isolate; }
.llamado::before { content: ""; position: absolute; right: -60px; top: -100px; width: 260px; aspect-ratio: 1; border-radius: 50%; background: var(--sol); z-index: -1; }
.llamado .ctas { flex-direction: column; align-items: stretch; }
.llamado h2 { color: #fff; }
.llamado p { color: #cfe3c6; margin-top: 14px; font-size: 1.08rem; max-width: 50ch; }
.llamado .ctas { justify-self: end; min-width: 260px; }

/* ───────── Pie ───────── */
.pie { background: var(--noche); color: #b9cbbd; border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: clamp(80px, 9vw, 120px); padding: clamp(64px, 7vw, 96px) 0 30px; position: relative; overflow: hidden; }
.pie::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: radial-gradient(50% 60% at 50% 0, #000, transparent 75%); pointer-events: none; }
.pie a { color: #b9cbbd; text-decoration: none; }
.pie a:hover { color: #fff; }
.pie__cols { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; }
.pie h4 { color: #fff; font: 600 1rem var(--texto); letter-spacing: 0; margin-bottom: 18px; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: .95rem; }
.pie__marca { position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 56px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.12); }
.pie__logo { background: #fff; border-radius: 18px; padding: 12px 16px; }
.pie__logo img { width: 170px; }
.pie__redes { display: flex; gap: 10px; }
.pie__redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: #fff; transition: background .25s, color .25s; }
.pie__redes a:hover { background: var(--lima); color: var(--hondo); border-color: var(--lima); }
.pie__redes .ic { width: 19px; height: 19px; }
.pie__legal { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding-top: 26px; font-size: .88rem; }
.pie__legal p { max-width: 80ch; }
.pie__sellos { display: flex; gap: 10px; }
.pie__sellos span { background: #fff; border-radius: 10px; padding: 6px 8px; }
.pie__sellos img { height: 34px; width: auto; }
.pie__copy { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 22px; font-size: .85rem; color: #8ea595; }

/* ───────── Páginas interiores ───────── */
.phero { position: relative; background: var(--fondo); padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 8vw, 104px); overflow: hidden; isolation: isolate; border-radius: 0 0 var(--r-xl) var(--r-xl); }
.phero::after { content: ""; position: absolute; right: -90px; bottom: -150px; width: min(300px, 40vw); aspect-ratio: 1; border-radius: 50%; background: var(--sol); box-shadow: 0 0 0 44px var(--lima-suave); z-index: -1; }
.phero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.phero--solo .phero__grid { grid-template-columns: 1fr; max-width: 860px; }
.migas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0; margin: 0 0 26px; list-style: none; font-size: .9rem; color: var(--tinta-3); }
.migas a { color: var(--tinta-2); text-decoration: none; }
.migas a:hover { color: var(--verde-texto); }
.migas li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--lima-2); margin-right: 8px; vertical-align: middle; }
.phero h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin-bottom: 20px; }
.phero__intro { font-size: 1.15rem; color: var(--tinta-2); max-width: 56ch; }
.phero .ctas { margin-top: 30px; }
.phero__foto { position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sombra-2); transform: rotate(2deg); }
.phero__foto img { width: 100%; height: 100%; object-fit: cover; }

.subnav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 30px; }
.subnav a { padding: 9px 16px; border-radius: 999px; background: var(--papel); color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .94rem; box-shadow: inset 0 0 0 1px var(--linea); }
.subnav a:hover { box-shadow: inset 0 0 0 1px var(--hondo); }
.subnav a[aria-current="page"] { background: var(--hondo); color: #fff; box-shadow: none; }

/* Listado de productos interior */
.oferta { display: grid; grid-template-columns: 280px 1fr; gap: clamp(28px, 5vw, 72px); padding: 48px 0; border-top: 1px solid var(--linea); }
.oferta:first-child { border-top: 0; padding-top: 0; }
.oferta__lado { position: sticky; top: 130px; align-self: start; }
.oferta__lado .producto__ic { display: block; margin-bottom: 16px; }
.oferta__lado .producto__ic .ic { width: 34px; height: 34px; }
.oferta h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.oferta__dato { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px; background: var(--fondo); font-weight: 600; font-size: .92rem; color: var(--hondo); }
.oferta__cuerpo { font-size: 1.06rem; color: var(--tinta-2); max-width: 66ch; display: grid; gap: 16px; align-content: start; }
.oferta__cuerpo strong { color: var(--tinta); }
.oferta__cuerpo ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.oferta__cuerpo li::marker { color: var(--lima-2); }

.cajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.caja { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 28px; }
.caja--fondo { background: var(--fondo); border-color: transparent; }
.caja h2, .caja h3 { font-size: 1.32rem; line-height: 1.2; letter-spacing: -.025em; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.caja h2 .ic, .caja h3 .ic { color: var(--verde); }
.caja ul { list-style: none; padding: 0; margin: 0; display: grid; }
.caja li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--linea); color: var(--tinta-2); }
.caja li .ic { width: 18px; height: 18px; color: var(--verde); margin-top: 3px; }

.servicios-lista { columns: 3 260px; column-gap: 40px; padding: 0; margin: 0; list-style: none; }
.servicios-lista li { break-inside: avoid; display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--linea); font-weight: 500; }
.servicios-lista .ic { width: 18px; height: 18px; color: var(--verde); }

.letra-chica { margin-top: 40px; padding: 24px 28px; border-radius: var(--r-m); background: var(--fondo); color: var(--tinta-2); font-size: .9rem; }

/* Personas (junta y comités) */
.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.persona { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: var(--r-m); background: var(--papel); border: 1px solid var(--linea); }
.persona i { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--lima-suave); color: var(--hondo); font: 700 1.05rem var(--display); font-style: normal; }
.persona:first-child i { background: var(--sol); }
.persona b { display: block; font: 700 1.04rem/1.25 var(--display); }
.persona span { color: var(--tinta-3); font-size: .9rem; }

/* Línea de tiempo */
.tiempo { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 0; }
.tiempo::before { content: ""; position: absolute; left: 92px; top: 8px; bottom: 8px; width: 2px; background: var(--linea); }
.tiempo li { display: grid; grid-template-columns: 92px 1fr; gap: 36px; padding: 18px 0; position: relative; }
.tiempo li::after { content: ""; position: absolute; left: 86px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--lima-2); box-shadow: 0 0 0 5px var(--papel); }
.tiempo li:last-child::after { background: var(--sol); }
.tiempo b { font: 700 1.5rem var(--display); color: var(--hondo); letter-spacing: -.03em; }
.tiempo p { color: var(--tinta-2); max-width: 68ch; }

.valores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.valor { padding: 24px 20px; border-radius: var(--r-m); background: var(--papel); border: 1px solid var(--linea); }
.valor:nth-child(odd) { background: var(--lima-suave); border-color: transparent; }
.valor h3 { font-size: 1.15rem; margin-bottom: 8px; }
.valor p { font-size: .93rem; color: var(--tinta-2); }
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mv article { padding: 36px; border-radius: var(--r-l); background: var(--fondo); }
.mv article:last-child { background: var(--hondo); color: #dceccf; }
.mv article:last-child h2 { color: #fff; }
.mv h2 { font-size: 1.9rem; margin-bottom: 14px; }
.objetivos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; counter-reset: o; }
.objetivos li { list-style: none; }
.objetivos h3 { font-size: 1.12rem; margin-bottom: 8px; }
.objetivos p { color: var(--tinta-2); font-size: .97rem; }

/* Carta / mensaje */
.carta { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.carta__texto { font-size: 1.12rem; color: var(--tinta-2); display: grid; gap: 16px; }
.firma { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 28px; }
.firma b { display: block; font: 700 1.08rem var(--display); color: var(--tinta); }
.firma span { font-size: .92rem; }

/* Preguntas */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none; font: 600 1.2rem/1.35 var(--display); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--fondo); transition: transform .4s var(--ease), background .3s; }
.faq details[open] summary i { transform: rotate(45deg); background: var(--lima); }
.faq__resp { padding: 0 0 26px; color: var(--tinta-2); display: grid; gap: 12px; max-width: 68ch; }
.faq__resp ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }

/* Documentos */
.docs { display: grid; gap: 12px; }
.doc { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--r-m); border: 1px solid var(--linea); background: var(--papel); text-decoration: none; color: var(--tinta); transition: border-color .25s, transform .35s var(--ease); }
.doc:hover { border-color: var(--hondo); transform: translateX(4px); color: var(--tinta); }
.doc i { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--fondo); color: var(--verde); }
.doc b { font-weight: 600; flex: 1; }
.doc small { color: var(--tinta-3); }

/* Texto legal */
.prosa { max-width: 760px; color: var(--tinta-2); font-size: 1.04rem; }
.prosa h2 { font-size: 1.6rem; margin: 44px 0 14px; }
.prosa h3 { font-size: 1.2rem; margin: 30px 0 10px; }
.prosa p, .prosa ul { margin: 0 0 14px; }
.prosa ul { padding-left: 1.1em; }
.prosa strong { color: var(--tinta); }

/* Formularios */
.form-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.form-lado { position: sticky; top: 130px; display: grid; gap: 18px; }
.formulario { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-l); padding: clamp(24px, 4vw, 44px); box-shadow: var(--sombra-1); }
.formulario fieldset { border: 0; padding: 0; margin: 0 0 34px; }
.formulario legend { font: 700 1.2rem var(--display); letter-spacing: -.015em; padding: 0; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.formulario legend span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lima); font-size: .9rem; color: var(--hondo); }
.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; align-items: end; }
.campos--3 { grid-template-columns: repeat(3, 1fr); }
.campo { display: grid; gap: 7px; }
.campo--todo { grid-column: 1 / -1; }
.campo label, .grupo-t { font-weight: 600; font-size: .94rem; color: var(--tinta); }
.campo label abbr { color: var(--rojo); text-decoration: none; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 15px; border-radius: 14px; border: 1.5px solid var(--linea-2); background: #fbfdf9;
  font: 400 1rem var(--texto); color: var(--tinta); transition: border-color .2s, box-shadow .2s, background .2s;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo select { height: 50px; padding-right: 44px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: #fbfdf9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3b24' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; }
.campo input::placeholder, .campo textarea::placeholder { color: #5c6b61; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #a9bd98; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); background: #fff; box-shadow: 0 0 0 4px rgba(1,150,69,.14); }
.campo input[type="file"] { padding: 10px; }
.campo .error { display: none; color: var(--rojo); font-size: .86rem; }
.campo.invalido input, .campo.invalido select, .campo.invalido textarea { border-color: var(--rojo); }
.campo.invalido .error { display: block; }
.ayuda { font-size: .85rem; color: var(--tinta-3); }
.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.opcion { position: relative; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1.5px solid var(--linea-2); border-radius: 14px; cursor: pointer; font-weight: 500; font-size: .96rem; transition: border-color .2s, background .2s; }
.opcion input { width: 20px; height: 20px; accent-color: var(--verde); margin: 0; flex: none; }
.opcion:hover { border-color: #a9bd98; }
.opcion:has(input:checked) { border-color: var(--verde); background: #f1f8ea; }
.terminos { font-size: .9rem; color: var(--tinta-2); background: var(--fondo); border-radius: var(--r-s); padding: 20px 22px; max-height: 240px; overflow: auto; }
.terminos ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.form-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 8px; }
.form-ok { display: none; text-align: center; padding: 40px 10px; }
.form-ok i { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--lima); margin: 0 auto 18px; color: var(--hondo); }
.form-ok i .ic { width: 34px; height: 34px; stroke-width: 2.2; }
.formulario.enviado form { display: none; }
.formulario.enviado .form-ok { display: block; animation: aparecer .5s; }

.vacio { text-align: center; padding: 64px 24px; border: 1.5px dashed var(--linea-2); border-radius: var(--r-l); background: var(--fondo); }
.vacio i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--papel); margin: 0 auto 18px; color: var(--verde); box-shadow: var(--sombra-1); }
.vacio h2 { font-size: 1.8rem; margin-bottom: 10px; }
.vacio p { color: var(--tinta-2); max-width: 48ch; margin: 0 auto 24px; }

/* Aparición al desplazarse */
.revela { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .revela:not(.visto) { opacity: 0; transform: translateY(26px); }

/* ───────── Responsive ───────── */
@media (max-width: 1120px) {
  .nav__menu { display: none; }
  .nav__abrir { display: inline-flex; }
  .nav__acciones { margin-left: auto; }
  .productos { grid-template-columns: repeat(2, 1fr); }
  .pie__cols { grid-template-columns: repeat(3, 1fr); }
  .valores { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .barra-sup__der { display: none; }
  .productos-cab, .digital__grid, .voz, .pasos, .phero__grid, .oferta, .carta, .form-grid, .mv, .llamado { grid-template-columns: 1fr; }
  .oferta__lado, .form-lado { position: static; }
  .digital__arte { min-height: 460px; order: 2; }
  .digital__grid { padding-top: 72px; gap: 20px; }
  .voz { padding: 32px 24px; }
  .voz__foto { min-height: 300px; }
  .cifras { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .cifra:nth-child(3)::before { display: none; }
  .sucursales { grid-template-columns: 1fr; }
  .objetivos { grid-template-columns: 1fr 1fr; }
  .llamado .ctas { justify-self: stretch; min-width: 0; }
  .llamado::before { top: auto; bottom: -170px; }
  .pie__legal { grid-template-columns: 1fr; }
  .phero__foto { transform: none; aspect-ratio: 16 / 10; }
  .pasos__arte { min-height: 420px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .barra-sup { display: none; }
  .nav { padding: 8px 8px 8px 18px; }
  .nav__marca img { width: 130px; }
  .nav__acciones .btn { display: none; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .sellos { gap: 22px 32px; }
  .sellos img { height: 34px; }
  .dos-caminos { grid-template-columns: 1fr; gap: 22px; }
  .dos-caminos::before, .dos-caminos::after { display: none; }
  .camino { min-height: 420px; transform: none !important; }
  .productos { grid-template-columns: 1fr; gap: 36px; }
  .checks { grid-template-columns: 1fr; }
  .digital .telefono { width: 200px; }
  .digital .plastico { width: 210px; bottom: 50%; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifra::before { display: none; }
  .pie__cols { grid-template-columns: 1fr 1fr; }
  .campos, .campos--3 { grid-template-columns: 1fr; }
  .valores, .objetivos { grid-template-columns: 1fr; }
  .tiempo::before { left: 64px; }
  .tiempo li { grid-template-columns: 64px 1fr; gap: 26px; }
  .tiempo li::after { left: 58px; }
  .tiempo b { font-size: 1.2rem; }
  .paso__det p { padding-left: 0; }
  .ctas .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .revela:not(.visto) { opacity: 1; transform: none; }
}

/* Fotos de ciudad en sucursales y voces: pie y crédito */
.sucursal > figure { height: 100%; overflow: hidden; }

.panel__lista { grid-column: span 2; background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 12px 14px; }
.panel__lista header { margin-bottom: 6px; } .panel__lista header b { font: 700 13px var(--display); }
.panel__lista div { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--linea); }
.panel__lista em { font-style: normal; color: var(--verde-texto); font-weight: 600; }
.panel__ath { grid-column: span 2; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--lima-suave); color: var(--hondo); }
.panel__ath .ic { width: 18px; height: 18px; }
.panel__ath b { font: 700 13px var(--display); } .panel__ath span { margin-left: auto; font-weight: 600; }
.panel__tarjetas { display: flex; flex-direction: column; grid-column: 3; grid-row: 3 / span 3; background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 12px 14px; }
.panel__tarjetas b { font: 700 13px var(--display); }
.panel__tarjetas div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--linea); }
.panel__tarjetas div:first-of-type { margin-top: auto; }
.panel__bloquear { margin-top: 10px; padding: 9px; border-radius: 999px; text-align: center; background: var(--fondo); font-weight: 600; color: var(--hondo); }

/* Franja de tasas (ofertas del sitio actual) */
.tasas { background: var(--hondo); color: #cfe3c6; padding: clamp(48px, 6vw, 72px) 0 clamp(36px, 4vw, 48px); }
.tasas__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.tasas article { padding: 0 clamp(16px, 2.4vw, 32px); }
.tasas article + article { border-left: 1px solid rgba(255,255,255,.14); }
.tasas__ic { display: inline-flex; color: var(--sol); margin-bottom: 14px; }
.tasas__ic .ic { width: 26px; height: 26px; }
.tasas h2 { color: #fff; font-size: 1.2rem; letter-spacing: -.01em; }
.tasas .tasas__num { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 10px; font: 700 clamp(2.2rem, 3.6vw, 3rem)/1 var(--display); letter-spacing: -.04em; color: var(--lima); font-variant-numeric: tabular-nums; }
.tasas .tasas__num small { font: 600 .9rem var(--texto); letter-spacing: 0; color: #cfe3c6; }
.tasas .tasas__num--texto { font-size: clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing: -.02em; }
.tasas p { font-size: .95rem; }
.tasas b { color: #fff; }
.tasas a { color: var(--sol); font-weight: 600; }
.tasas__nota { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); font-size: .85rem; color: #a9c2ae; }

/* Nuestros servicios en tres columnas */
.productos--3 { grid-template-columns: repeat(3, 1fr); }

/* Préstamos destacados */
.prestamos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prestamo { display: flex; flex-direction: column; background: var(--papel); border-radius: var(--r-l); overflow: hidden; text-decoration: none; color: var(--tinta); box-shadow: var(--sombra-1); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.prestamo:hover { transform: translateY(-6px); box-shadow: var(--sombra-2); color: var(--tinta); }
.prestamo__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.prestamo__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.prestamo:hover .prestamo__foto img { transform: scale(1.05); }
.prestamo__foto span { position: absolute; left: 14px; bottom: 14px; padding: 7px 14px; border-radius: 999px; background: var(--sol); color: var(--hondo); font-weight: 700; font-size: .88rem; }
.prestamo__cuerpo { padding: 24px 26px 26px; display: grid; gap: 10px; }
.prestamo h3 { font-size: 1.45rem; }
.prestamo .prestamo__dato { color: var(--verde-texto); font-weight: 700; }
.prestamo p { color: var(--tinta-2); }

/* Somos tu cooperativa */
.somos { background: var(--lima); border-radius: var(--r-xl); margin: 0 clamp(8px, 1.4vw, 20px); }
.somos__cab { max-width: 760px; margin-bottom: 44px; }
.somos__cab h2 { color: var(--hondo); }
.somos__cab p { margin-top: 16px; font-size: 1.1rem; color: #1d4a2e; }
.ahorros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ahorro { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 20px; background: var(--papel); border-radius: var(--r-l); text-decoration: none; color: var(--tinta); transition: transform .5s var(--ease); }
.ahorro:hover { transform: translateY(-6px) rotate(-1deg); color: var(--tinta); }
.ahorro__foto { aspect-ratio: 1; border-radius: var(--r-m); overflow: hidden; margin-bottom: 8px; }
.ahorro__foto img { width: 100%; height: 100%; object-fit: cover; }
.ahorro--astro .ahorro__foto { background: #141a3d; }
.ahorro h3, .ahorro p, .ahorro .enlace-flecha { padding: 0 8px; }
.ahorro p { color: var(--tinta-2); font-size: .95rem; flex: 1; }

@media (max-width: 1120px) {
  .tasas__grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .tasas article:nth-child(3) { border-left: 0; }
  .prestamos { grid-template-columns: 1fr 1fr; }
  .ahorros { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) { .productos--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .tasas__grid { grid-template-columns: 1fr; }
  .tasas article { padding: 0; }
  .tasas article + article { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 28px; }
  .productos--3 { grid-template-columns: 1fr; }
  .prestamos { grid-template-columns: 1fr; }
  .ahorros { grid-template-columns: 1fr 1fr; gap: 12px; }
  .somos { margin: 0; border-radius: var(--r-l); }
}

/* ───────── Hero con slider: personas a la derecha, texto a la izquierda ───────── */
.hero {
  position: relative; overflow: hidden; isolation: isolate; padding: 0;
  background:
    radial-gradient(42% 60% at 76% 46%, rgba(158, 211, 106, .42), transparent 72%),
    radial-gradient(30% 42% at 96% 92%, rgba(244, 180, 0, .22), transparent 70%),
    radial-gradient(34% 46% at 2% 0%, rgba(158, 211, 106, .28), transparent 70%),
    radial-gradient(28% 40% at 58% 100%, rgba(255, 233, 168, .5), transparent 70%),
    #f6faf1;
}
.hero__puntos { display: none; }
.hero__ondas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; fill: none; stroke: var(--lima-2); stroke-width: 3; opacity: .45; }
.hero__ondas path:nth-child(3) { opacity: .5; stroke-width: 2; }
.hero__mancha { position: absolute; left: 41%; top: 13%; width: 64px; fill: var(--lima-suave); filter: drop-shadow(0 6px 10px rgba(14,59,36,.12)); z-index: -1; animation: flotar 7s ease-in-out infinite; }
.hero__gotas { position: absolute; left: 33%; bottom: 13%; width: 54px; fill: var(--sol); opacity: .55; z-index: -1; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); min-height: clamp(560px, 44vw, 680px); }
.hero__textos { display: grid; align-content: center; padding: clamp(48px, 6vw, 80px) 0; }
.hs-texto { grid-area: 1 / 1; align-self: center; visibility: hidden; opacity: 0; transition: opacity .6s ease, visibility 0s .6s; }
.hs-texto.activa { visibility: visible; opacity: 1; transition: opacity .6s ease; }
.hs-lema { margin: 0 0 14px; color: var(--verde-texto); font-weight: 600; font-size: 1.05rem; }
.hero h1, .hs-titulo { font: 700 clamp(2.5rem, 4.6vw, 4.3rem)/1.04 var(--display); letter-spacing: -.04em; color: var(--tinta); margin: 0 0 22px; text-wrap: balance; }
.hero h1 em, .hs-titulo em { font-style: normal; color: var(--verde-texto); }
.hero__sub { margin: 0 0 32px; max-width: 46ch; font-size: clamp(1.04rem, 1.4vw, 1.15rem); color: var(--tinta-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin: 0; }
.hs-ctrl { grid-area: 2 / 1; display: flex; align-items: center; gap: 12px; margin-top: clamp(36px, 4vw, 52px); }
.hs-puntos { display: flex; gap: 6px; }
.hs-puntos button { width: 40px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.hs-puntos i { display: block; height: 4px; border-radius: 4px; background: var(--linea-2); overflow: hidden; }
.hs-puntos i::after { content: ""; display: block; height: 100%; width: 0; background: var(--hondo); border-radius: inherit; }
.hs-puntos button.activo i::after { animation: hs-prog var(--hs-dur, 6.5s) linear forwards; }
.hs-puntos button:hover i { background: #b5c7a6; }
.hero.pausado .hs-puntos button.activo i::after { animation-play-state: paused; }
@keyframes hs-prog { to { width: 100%; } }
.hs-pausa { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea-2); background: rgba(255,255,255,.7); color: var(--hondo); cursor: pointer; transition: background .25s, border-color .25s, transform .3s var(--ease); }
.hs-pausa:hover { background: var(--lima); border-color: var(--lima); }
.hs-pausa:active { transform: scale(.92); }
.hs-pausa__ii { width: 9px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero.detenido .hs-pausa__ii { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }

/* Flechas en los bordes, como pestañas */
.hs-lado { position: absolute; top: 50%; z-index: 5; display: grid; place-items: center; width: 34px; height: 84px; translate: 0 -50%; border: 0; cursor: pointer; color: var(--hondo); background: rgba(255,255,255,.75); backdrop-filter: blur(6px); transition: background .25s, color .25s, width .3s var(--ease); }
.hs-lado--izq { left: 0; border-radius: 0 14px 14px 0; }
.hs-lado--der { right: 0; border-radius: 14px 0 0 14px; }
.hs-lado:hover { background: var(--hondo); color: #fff; width: 42px; }
.hs-lado .ic { width: 18px; height: 18px; }

/* Foto en arco */
.hero__arte { position: relative; align-self: stretch; min-height: 420px; }
.hero__arco, .hero__arco-fondo { position: absolute; right: 4%; bottom: 0; width: min(78%, 500px); height: 88%; border-radius: 999px 999px 0 0; }
.hero__arco { overflow: hidden; background: var(--lima-suave); box-shadow: 0 30px 60px -30px rgba(14,59,36,.45); }
.hero__arco-fondo { right: calc(4% + 26px); bottom: 26px; border: 2px solid var(--lima-2); opacity: .55; }
.hero__sol { position: absolute; right: 1%; top: 9%; width: clamp(90px, 9vw, 130px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd34d 0 46%, var(--sol) 47%); z-index: 2; box-shadow: 0 14px 30px -12px rgba(244,180,0,.6); animation: respira 7s ease-in-out infinite; }
@keyframes respira { 50% { scale: 1.05; } }
/* Transición sencilla: fundido de opacidad (fácil de replicar en WordPress) */
.hs-arte { position: absolute; inset: 0; margin: 0; visibility: hidden; opacity: 0; transition: opacity .6s ease, visibility 0s .6s; }
.hs-arte img { width: 100%; height: 100%; object-fit: cover; }
.hs-arte.activa { visibility: visible; opacity: 1; transition: opacity .6s ease; z-index: 1; }
@keyframes flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ───────── Microanimaciones ───────── */
.progreso { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 90; background: var(--verde); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }
.nav__link { position: relative; }
.nav__menu > .nav__item > .nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--lima-2); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.nav__menu > .nav__item > .nav__link:hover::after, .nav__menu > .nav__item.activo > .nav__link::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav { transition: padding .35s var(--ease), box-shadow .35s; }
.cabecera.es-fija .nav { padding-top: 6px; padding-bottom: 6px; box-shadow: 0 16px 40px -18px rgba(14,59,36,.32); }
.btn .ic { transition: transform .35s var(--ease); }
.btn:hover .ic:last-child { transform: translate(2px, -2px); }
.btn:active { transform: scale(.97); }
.sellos img, .sellos__red { transition: filter .3s, opacity .3s, transform .4s var(--ease); }
.sellos img:hover, .sellos__red:hover { transform: translateY(-3px); }
.revela { transition-delay: calc(var(--i, 0) * 90ms); }
.tasas article { transition: transform .5s var(--ease); }
.tasas article:hover .tasas__ic { transform: rotate(-12deg) scale(1.12); }
.tasas__ic { transition: transform .45s var(--ease); }
.ahorro__foto img, .camino__foto img { transition: transform 1s var(--ease); }
.ahorro:hover .ahorro__foto img { transform: scale(1.06); }
.doc i, .persona i { transition: transform .4s var(--ease), background .3s; }
.doc:hover i { transform: rotate(-8deg); background: var(--lima); }
.persona:hover i { transform: scale(1.08); }
.subnav a { transition: box-shadow .25s, transform .3s var(--ease); }
.subnav a:hover { transform: translateY(-2px); }
.pie__redes a { transition: background .25s, color .25s, transform .35s var(--ease); }
.pie__redes a:hover { transform: translateY(-3px); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .hero__textos { padding: 40px 0 8px; }
  .hero__arte { min-height: clamp(380px, 96vw, 520px); }
  .hero__arco, .hero__arco-fondo { right: 50%; translate: 50% 0; width: min(82%, 420px); height: 92%; }
  .hero__arco-fondo { right: calc(50% + 22px); }
  .hero__sol { right: 6%; top: 4%; }
  .hero__mancha { left: auto; right: 8%; top: 4%; }
  .hero__gotas { display: none; }
  .hs-lado { top: auto; bottom: 120px; translate: 0 0; height: 64px; }
}
@media (max-width: 640px) {
  .hero h1, .hs-titulo { font-size: clamp(2.1rem, 9.4vw, 2.7rem); }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hs-ctrl { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .progreso { display: none; }
}

/* Error al enviar un formulario (WordPress) */
.form-error { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: #fdecea; color: var(--rojo); font-weight: 600; font-size: .94rem; }
/* Barra de administración de WordPress */
.admin-bar .cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .cabecera { top: 46px; } }