/* =========================================================
   TAMBORES SAN LORENZO — sistema de diseño
   Concepto: "cáscara y pulpa" — el mismo lenguaje cromático
   del producto real (tambor verde por fuera, epoxi mostaza
   por dentro) se convierte en la identidad visual del sitio.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500;1,9..144,600&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* color — muestreado de las fotos reales de producto */
  --verde-oscuro: #1E5945;
  --verde-oscuro-2: #163F32;
  --verde-claro: #8DC63F;
  --verde-claro-2: #729E2E;
  --pulpa: #E3A83B;
  --pulpa-dark: #B87C22;
  --marino: #14304F;
  --marino-2: #0D2038;
  --crema: #F7F3E6;
  --crema-2: #EFE7D2;
  --crema-3: #FBF9F2;
  --carbon: #1C2118;
  --carbon-60: rgba(28,33,24,.62);
  --linea: rgba(28,33,24,.12);
  --blanco: #FFFFFF;

  --display: 'Fraunces', serif;
  --body: 'Work Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --container: 1180px;
  --radius: 6px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 84px; }
body{
  margin:0;
  font-family: var(--body);
  color: var(--carbon);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--display); font-weight:600; line-height:1.08; margin:0; color: var(--marino); }
p{ margin:0; }
:focus-visible{ outline: 3px solid var(--pulpa); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* ---------- eyebrow / etiquetas tipo mono ---------- */
.eyebrow{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde-oscuro-2);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background: var(--pulpa-dark);
  display:inline-block;
}
.eyebrow.on-dark{ color: var(--verde-claro); }
.eyebrow.on-dark::before{ background: var(--verde-claro); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--body); font-weight:600; font-size:15px;
  padding: 13px 26px;
  border-radius: 3px;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background: var(--verde-oscuro); color: var(--blanco); }
.btn-primary:hover{ background: var(--verde-oscuro-2); transform: translateY(-1px); }
.btn-accent{ background: var(--pulpa); color: var(--marino-2); }
.btn-accent:hover{ background:#EFB752; transform: translateY(-1px); }
.btn-ghost{ background: transparent; color: var(--marino); border-color: var(--marino); }
.btn-ghost:hover{ background: var(--marino); color: var(--blanco); }
.btn-ghost.on-dark{ color:var(--crema); border-color: rgba(247,243,230,.5); }
.btn-ghost.on-dark:hover{ background: var(--crema); color: var(--marino-2); }
.btn-sm{ padding:9px 18px; font-size:13.5px; }

/* =========================================================
   NAV
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(247,243,230,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 28px; max-width: var(--container); margin:0 auto; gap: 20px; }
.nav-logo img{ height: 40px; width:auto; }
.nav-links{ display:flex; align-items:center; gap: 30px; }
.nav-links a{
  font-size: 14.5px; font-weight:600; color: var(--carbon);
  position:relative; padding: 4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background: var(--verde-claro); transform: scaleX(0); transform-origin:left;
  transition: transform .2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); }
.nav-links a.active{ color: var(--verde-oscuro-2); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-toggle{ display:none; }

@media (max-width: 900px){
  .nav-links{
    display:flex !important;
    position:fixed !important;
    top:69px !important; right:0 !important; left:0 !important;
    height: calc(100vh - 69px) !important;
    z-index: 90;
    background: var(--crema-3);
    flex-direction:column; align-items:flex-start; padding: 30px 28px;
    gap: 22px;
    transform: translateX(105%);
    transition: transform .32s ease;
    overflow-y:auto;
  }
  .nav-links.open{ transform: translateX(0) !important; }
  .nav-links a{ font-size:20px; }
  .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
  }
  .nav-toggle span{ width:22px; height:2px; background: var(--marino); display:block; }
}
@media (max-width: 480px){
  .nav{ padding: 12px 18px; gap:10px; }
  .nav-logo img{ height:32px; }
  .nav-cta{ gap:10px; }
  .nav-cta .btn{ padding:9px 14px; font-size:12.5px; white-space:nowrap; }
}

/* =========================================================
   HERO — sección genérica de apertura de página interior
   ========================================================= */
.page-hero{
  background: var(--marino);
  color: var(--crema);
  padding: 64px 0 56px;
  position: relative;
  overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; right:-120px; top:-160px; width:420px; height:420px;
  border-radius:50%; border: 60px solid rgba(141,198,63,.14);
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ color: var(--blanco); font-size: clamp(32px, 5vw, 52px); margin-top:14px; max-width: 760px; }
.page-hero p.lead{ color: rgba(247,243,230,.78); max-width: 620px; margin-top:16px; font-size:17px; }
.crumb{ font-family: var(--mono); font-size:12.5px; color: rgba(247,243,230,.55); margin-top:22px; letter-spacing:.03em;}
.crumb a{ color: var(--verde-claro); }

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
section{ padding: 84px 0; }
section.tight{ padding: 56px 0; }
.section-head{ max-width: 640px; margin-bottom: 46px; }
.section-head h2{ font-size: clamp(28px,3.4vw,40px); margin-top:14px; }
.section-head p{ margin-top:14px; color: var(--carbon-60); font-size:16.5px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.bg-dark{ background: var(--marino); color: var(--crema); }
.bg-dark h2, .bg-dark h3, .bg-dark h4{ color: var(--blanco); }
.bg-dark p{ color: rgba(247,243,230,.78); }
.bg-forest{ background: var(--verde-oscuro); color: var(--crema); }
.bg-forest h2, .bg-forest h3{ color: var(--blanco); }
.bg-forest p{ color: rgba(247,243,230,.85); }
.bg-cream2{ background: var(--crema-2); }
.bg-white{ background: var(--blanco); }

/* rind divider — borde tipo "cáscara pelada" entre secciones */
.rind{ height: 46px; width:100%; display:block; }
.rind path{ fill: var(--crema); }
.rind.to-cream path{ fill: var(--crema); }
.rind.to-white path{ fill: var(--blanco); }
.rind.to-dark path{ fill: var(--marino); }
.rind.to-forest path{ fill: var(--verde-oscuro); }
.rind.flip{ transform: rotate(180deg); }

/* =========================================================
   HOME HERO
   ========================================================= */
.home-hero{
  background: var(--marino);
  color: var(--crema);
  padding: 56px 0 0;
  overflow:hidden;
  position:relative;
}
.home-hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items:center;
  position:relative; z-index:2;
}
.home-hero h1{
  color: var(--blanco);
  font-size: clamp(38px, 5.4vw, 60px);
  margin-top: 18px;
}
.home-hero h1 em{ color: var(--verde-claro); font-style: italic; }
.home-hero p.lead{ color: rgba(247,243,230,.8); font-size: 18px; max-width: 520px; margin-top: 20px; }
.home-hero .cta-row{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }

.citrus-frame{
  position:relative;
  width: 100%;
  max-width: 460px;
  margin-left:auto;
}
.citrus-frame .ring{
  position:relative;
  border-radius: 50%;
  padding: 14px;
  background: conic-gradient(from -20deg, var(--verde-claro) 0deg 160deg, var(--pulpa) 160deg 200deg, var(--verde-oscuro) 200deg 360deg);
}
.citrus-frame .ring-inner{
  border-radius:50%;
  overflow:hidden;
  border: 6px solid var(--marino);
  aspect-ratio: 1/1;
}
.citrus-frame .ring-inner img{ width:100%; height:100%; object-fit:cover; }
.citrus-frame .badge{
  position:absolute; left:-18px; bottom:26px;
  background: var(--pulpa); color: var(--marino-2);
  font-family: var(--mono); font-size:12.5px; font-weight:500;
  padding: 12px 16px; border-radius: 4px; line-height:1.4;
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  max-width: 190px;
}
.home-hero-strip{ margin-top: 56px; position:relative; z-index:2; }
.stat-row{
  display:grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid rgba(247,243,230,.18);
}
.stat-row .stat{ padding: 22px 24px; border-right: 1px solid rgba(247,243,230,.18); }
.stat-row .stat:last-child{ border-right:none; }
.stat .num{ font-family: var(--display); font-size: 30px; color: var(--verde-claro); }
.stat .lbl{ font-family: var(--mono); font-size: 12px; letter-spacing:.06em; color: rgba(247,243,230,.65); margin-top:6px; text-transform:uppercase; }
.stat-badge{ display:flex; align-items:center; gap:10px; }
.stat-badge .badge-circle{
  flex:none; width:32px; height:32px; border-radius:50%;
  background: var(--verde-claro); color: var(--marino-2);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-size:11px; font-weight:700;
}
.stat-badge .badge-name{ font-family: var(--display); font-size:19px; color:#fff; }
.stat-badge img{ height:26px; width:auto; flex:none; filter: brightness(0) invert(1); opacity:.92; }

@media (max-width: 900px){
  .home-hero-grid{ grid-template-columns: 1fr; }
  .citrus-frame{ margin: 0 auto; max-width:320px; }
  .stat-row{ grid-template-columns: repeat(2,1fr); }
  .stat-row .stat:nth-child(2){ border-right:none; }
}

/* =========================================================
   PESTLE / segmento cítrico destacado (home)
   ========================================================= */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center;
}
.split.reverse .split-media{ order:2; }
@media (max-width: 900px){
  .split{ grid-template-columns:1fr; gap:36px; }
  .split.reverse .split-media{ order:0; }
}
.split-media{ position:relative; }
.split-media img{ border-radius: var(--radius); }
.duo{ display:grid; grid-template-columns: 1.3fr 1fr; gap:14px; height: 460px; }
.duo > img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius); }
.duo .duo-col{ display:grid; grid-template-rows: 1fr 1fr; gap:14px; height:100%; }
.duo .duo-col img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius); }
@media (max-width: 900px){ .duo{ height: 380px; } }
@media (max-width: 480px){ .duo{ height: 300px; grid-template-columns: 1.2fr 1fr; gap:10px; } .duo .duo-col{ gap:10px; } }

.tag-swatch{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12.5px; padding:7px 12px 7px 8px;
  border-radius:20px; background: var(--blanco); border:1px solid var(--linea);
}
.tag-swatch .dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.swatch-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }

.feature-list{ margin-top: 26px; display:grid; gap: 14px; }
.feature-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color: var(--carbon); }
.feature-list li::before{
  content:""; flex:none; width:8px; height:8px; margin-top:8px; border-radius:2px;
  background: var(--verde-claro-2);
}

/* =========================================================
   CARDS — industrias / servicios
   ========================================================= */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; }
@media (max-width: 980px){ .grid-3{ grid-template-columns: repeat(2,1fr);} .grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--crema-3);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 18px 38px rgba(20,48,79,.09); border-color: transparent; }
.card .num{ font-family: var(--mono); font-size:12.5px; color: var(--pulpa-dark); letter-spacing:.06em; }
.card h3{ font-size: 20px; margin-top:12px; }
.card p{ margin-top:10px; color: var(--carbon-60); font-size:14.8px; }
.card ul{ margin-top:14px; display:grid; gap:6px; }
.card ul li{ font-size:14px; color: var(--carbon-60); padding-left:14px; position:relative; }
.card ul li::before{ content:"—"; position:absolute; left:0; color: var(--verde-claro-2); }

.photo-card{ border-radius: var(--radius); overflow:hidden; position:relative; background:var(--marino); }
.photo-card img{ width:100%; aspect-ratio: 4/3; object-fit:cover; opacity:.92; transition: transform .5s ease, opacity .3s ease; }
.photo-card:hover img{ transform: scale(1.05); opacity:1; }
.photo-card .cap{
  position:absolute; left:0; right:0; bottom:0; padding: 20px;
  background: linear-gradient(0deg, rgba(13,32,56,.92), rgba(13,32,56,0));
  color: var(--blanco);
}
.photo-card .cap .eyebrow{ color: var(--verde-claro); }
.photo-card .cap .eyebrow::before{ background: var(--verde-claro); }
.photo-card .cap h3{ color:#fff; font-size:19px; margin-top:6px; }

/* =========================================================
   Timeline / proceso (numerado — sí aplica, es una secuencia real)
   ========================================================= */
.process{ display:grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top:1px solid var(--linea); }
.process .step{ padding: 26px 22px 0; border-right:1px solid var(--linea); }
.process .step:last-child{ border-right:none; }
.process .step .n{ font-family:var(--display); font-size:34px; color: var(--verde-claro-2); }
.process .step h4{ font-size:16.5px; margin-top:10px; color: var(--marino); }
.process .step p{ font-size:14px; color:var(--carbon-60); margin-top:8px; }
/* En fondos oscuros, el texto de cada paso tiene que ser claro, no navy-sobre-navy */
.bg-forest .process .step .n, .bg-dark .process .step .n{ color: var(--verde-claro); }
.bg-forest .process .step h4, .bg-dark .process .step h4{ color: #fff; }
.bg-forest .process .step p, .bg-dark .process .step p{ color: rgba(247,243,230,.75); }
@media (max-width: 900px){ .process{ grid-template-columns: 1fr 1fr; } .process .step{ border-bottom:1px solid var(--linea); padding-bottom:22px; } }
@media (max-width: 560px){ .process{ grid-template-columns: 1fr; } }

/* =========================================================
   CERTIFICACIONES
   ========================================================= */
.cert-card{
  display:grid; grid-template-columns: 200px 1fr; gap: 28px;
  background: var(--crema-3); border:1px solid var(--linea); border-radius:var(--radius);
  padding: 26px; align-items:center;
}
.cert-card img{ border-radius:4px; border:1px solid var(--linea); }
.cert-card .meta{ font-family:var(--mono); font-size:12.5px; color:var(--carbon-60); margin-top:14px; display:grid; gap:4px;}
@media (max-width: 700px){ .cert-card{ grid-template-columns: 1fr; } .cert-card img{ max-width:180px; } }

.badge-row{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-top: 26px; }

/* Pilares de la política de calidad */
.grid-list-5{ display:grid; grid-template-columns: repeat(5,1fr); gap: 22px; }
.grid-list-5 .pillar{ border-top: 1px solid rgba(247,243,230,.2); padding-top: 16px; }
.grid-list-5 .pillar h4{ color: var(--verde-claro); font-size: 15px; }
.grid-list-5 .pillar p{ margin-top: 8px; font-size: 13.5px; color: rgba(247,243,230,.72); line-height:1.5; }
@media (max-width: 980px){ .grid-list-5{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .grid-list-5{ grid-template-columns: 1fr; } }
.badge-pill{
  display:flex; align-items:center; gap:10px; background: var(--blanco);
  border:1px solid var(--linea); border-radius:30px; padding: 10px 18px 10px 10px;
}
.badge-pill .ic{ width:34px; height:34px; border-radius:50%; background:var(--verde-oscuro); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px;}
.badge-pill span{ font-size:13.5px; font-weight:600; }

/* =========================================================
   FORM (contacto)
   ========================================================= */
.form-card{ background: var(--crema-3); border:1px solid var(--linea); border-radius:var(--radius); padding: 34px; }
.field{ display:grid; gap:8px; margin-bottom:20px; }
.field label{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color: var(--carbon-60); }
.field input, .field select, .field textarea{
  font-family: var(--body); font-size:15px; padding: 12px 14px;
  border:1.5px solid var(--linea); border-radius:4px; background:var(--blanco); color: var(--carbon);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--verde-claro-2); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }

.contact-info-card{ background: var(--marino); color:#fff; border-radius:var(--radius); padding:34px; }
.contact-info-card h3{ color:#fff; }
.contact-info-card .row{ display:flex; gap:14px; padding: 16px 0; border-bottom:1px solid rgba(247,243,230,.14); }
.contact-info-card .row:last-child{ border-bottom:none; }
.contact-info-card .row .lbl{ font-family:var(--mono); font-size:11.5px; color: var(--verde-claro); text-transform:uppercase; letter-spacing:.06em; }
.contact-info-card .row .val{ font-size:15px; margin-top:4px; }
.contact-info-card .row .val a{ text-decoration:underline; text-decoration-color: rgba(255,255,255,.35); }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{
  background: var(--verde-oscuro);
  color:#fff; border-radius: var(--radius);
  padding: 50px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
}
.cta-band h3{ color:#fff; font-size: 28px; max-width:520px; }
.cta-band p{ color: rgba(255,255,255,.8); margin-top:8px; }

/* =========================================================
   FOOTER
   ========================================================= */
footer{ background: var(--marino-2); color: rgba(247,243,230,.72); padding: 64px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid h4{ color:#fff; font-size:14px; font-family:var(--body); letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px;}
.footer-grid ul{ display:grid; gap:10px; }
.footer-grid a:hover{ color:#fff; }
.footer-grid p{ font-size:14px; line-height:1.7; max-width:280px; }
.footer-logo{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.footer-logo img{ height:44px; width:auto; flex:none; }
.footer-logo-text{ line-height:1.25; }
.footer-logo-text strong{ display:block; color:#fff; font-size:15px; letter-spacing:.02em; }
.footer-logo-text span{ display:block; color: rgba(247,243,230,.55); font-size:11.5px; letter-spacing:.06em; margin-top:2px; }
.footer-bottom{
  margin-top: 50px; padding-top: 24px; border-top:1px solid rgba(247,243,230,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px;
}
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   TOPBAR — franja de contacto y certificaciones
   ========================================================= */
.topbar{
  background: var(--marino-2);
  color: rgba(247,243,230,.82);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .01em;
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 9px 28px; gap: 20px;
}
.topbar-left, .topbar-right{ display:flex; align-items:center; gap: 22px; flex-wrap:wrap; }
.topbar a{ color: inherit; }
.topbar a:hover{ color: var(--verde-claro); }
.topbar-item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar-item svg{ width:13px; height:13px; flex:none; opacity:.85; }
.topbar-cert{
  display:inline-flex; align-items:center; gap:6px;
  border: 1px solid rgba(247,243,230,.28); border-radius: 20px;
  padding: 3px 11px 3px 8px; font-size:11px;
}
.topbar-cert svg{ width:13px; height:13px; color: var(--verde-claro); }
@media (max-width: 900px){
  .topbar-left{ gap:14px; }
  .topbar-item.hide-sm{ display:none; }
}
@media (max-width: 640px){ .topbar{ display:none; } }

/* ---------- WhatsApp button ---------- */
.btn-whatsapp{
  display:inline-flex; align-items:center; gap:10px;
  background: transparent; color: var(--crema);
  border: 1.5px solid rgba(247,243,230,.5);
}
.btn-whatsapp svg{ width:18px; height:18px; flex:none; }
.btn-whatsapp:hover{ background: #25D366; border-color:#25D366; color:#0D2038; }
.btn-whatsapp.light{ color: var(--marino); border-color: var(--marino); }
.btn-whatsapp.light:hover{ background:#25D366; border-color:#25D366; color:#0D2038; }

.wa-float{
  position:fixed; right:22px; bottom:22px; z-index: 80;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 28px rgba(13,32,56,.35);
  transition: transform .18s ease;
}
.wa-float:hover{ transform: scale(1.08); }
.wa-float svg{ width:28px; height:28px; color:#fff; }
.mini-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 900px){ .mini-grid{ grid-template-columns: 1fr; } }
.mini-card{
  background: var(--crema-3); border:1px solid var(--linea); border-radius: var(--radius);
  overflow:hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.mini-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 38px rgba(20,48,79,.1); }
.mini-card .thumb{ position:relative; aspect-ratio: 16/10; overflow:hidden; }
.mini-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.mini-card .icon-badge{
  position:absolute; left:22px; bottom:-22px;
  width:46px; height:46px; border-radius:50%;
  background: var(--verde-oscuro); border: 4px solid var(--crema-3);
  display:flex; align-items:center; justify-content:center;
}
.mini-card .icon-badge svg{ width:20px; height:20px; color:#fff; }
.mini-card .body{ padding: 34px 24px 26px; }
.mini-card .body h3{ font-size:18px; }
.mini-card .body p{ margin-top:8px; font-size:14.3px; color:var(--carbon-60); }
.mini-card .body .go{ margin-top:16px; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--verde-oscuro-2); font-weight:600; }
.mini-card .body .go svg{ width:13px; height:13px; transition: transform .2s ease; }
.mini-card:hover .body .go svg{ transform: translateX(3px); }

.mt-8{ margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.center-text{ text-align:center; }
.max-60{ max-width:600px; }
.max-72{ max-width:720px; }