/* Hocico Phone — Página Causas · lienzo claro, paneles satinados */
.ca-page{ background:#fff; }

/* hero */
.ca-hero{ text-align:center; padding:clamp(40px,7vw,56px) clamp(20px,5vw,56px) 30px;
  background:radial-gradient(60% 60% at 50% 0%, var(--hp-green-50) 0%, transparent 62%); }
.ca-eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px; white-space:nowrap;
  background:#fff; border:1px solid var(--hp-green-100); font-size:12.5px; font-weight:700; color:var(--hp-green-700); box-shadow:0 4px 14px rgba(42,159,132,.08); }
.ca-h1{ font-family:var(--font-display); font-weight:800; font-size:56px; line-height:1.05; letter-spacing:-.03em; margin:20px 0 0; color:var(--hp-ink); }
.ca-h1-em{ color:var(--hp-green); }
.ca-lede{ font-size:17px; line-height:1.6; color:var(--hp-graphite); margin:18px auto 0; max-width:580px; }
.ca-lede b{ color:var(--hp-green-700); font-weight:800; }
.ca-filters{ display:inline-flex; gap:8px; margin-top:28px; padding:6px; border-radius:999px; background:var(--hp-fog); border:1px solid var(--hp-mist); }
.ca-filter{ padding:10px 20px; border-radius:999px; font-size:13.5px; font-weight:700; color:var(--hp-graphite); background:transparent; border:none; cursor:pointer; transition:all .18s; white-space:nowrap; }
.ca-filter:hover{ color:var(--hp-green-700); }
.ca-filter.on{ color:#fff; background:linear-gradient(135deg,var(--hp-green),#28B98E); box-shadow:0 8px 18px -6px rgba(42,159,132,.5); }

/* list */
.ca-list{ max-width:1180px; margin:0 auto; padding:40px 56px 20px; display:flex; flex-direction:column; gap:64px; opacity:1; animation:cafade .4s ease; }
@keyframes cafade{ from{transform:translateY(8px);} to{transform:none;} }
.ca-row{ display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center; }
.ca-row.rev{ direction:rtl; }
.ca-row.rev > *{ direction:ltr; }

/* media */
.ca-media-frame{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 30px 70px -30px rgba(20,36,31,.45), 0 0 0 1px rgba(42,159,132,.1); }
.ca-media-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.ca-media-tag{ position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  background:rgba(20,36,31,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:12px; font-weight:700; white-space:nowrap; }

/* satin audit panel (dark inside light page) */
.ca-audit{ margin-top:-30px; margin-left:24px; margin-right:24px; position:relative; z-index:2; border-radius:16px; padding:16px 18px;
  background:linear-gradient(160deg,#0E1A16,#0B1813); border:1px solid rgba(143,194,172,.2);
  box-shadow:0 20px 44px -18px rgba(11,24,19,.6); }
.ca-audit-row{ display:flex; align-items:baseline; justify-content:space-between; }
.ca-audit-k{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(234,243,238,.5); }
.ca-audit-v{ font-size:18px; font-weight:700; color:#37E6A4; letter-spacing:.02em; }
.ca-audit-bar{ position:relative; height:5px; border-radius:99px; background:rgba(143,194,172,.12); margin:12px 0 10px; overflow:hidden; }
.ca-audit-scan{ position:absolute; top:0; left:0; height:100%; width:38%; border-radius:99px;
  background:linear-gradient(90deg,transparent,#37E6A4,transparent); animation:caScan 2.4s ease-in-out infinite; }
@keyframes caScan{ 0%{ left:-40%;} 100%{ left:100%;} }
.ca-audit-foot{ display:flex; align-items:center; justify-content:space-between; }
.ca-audit-sync{ font-size:10.5px; line-height:1.45; color:rgba(234,243,238,.5); margin:0 0 10px; }
.ca-audit-live{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#8FC2AC; }
.ca-audit-foot .mono{ font-size:10.5px; color:rgba(234,243,238,.4); }

/* body */
.ca-badges{ display:flex; gap:8px; margin-bottom:14px; }
.ca-badge{ padding:6px 13px; border-radius:999px; font-size:12px; font-weight:700; color:var(--hp-graphite); background:var(--hp-fog); border:1px solid var(--hp-mist); white-space:nowrap; }
.ca-badge.primary{ color:var(--hp-green-700); background:var(--hp-green-50); border-color:var(--hp-green-100); }
.ca-name{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,5vw,36px); letter-spacing:-.025em; color:var(--hp-ink); line-height:1.1; }
.ca-org{ font-size:14px; font-weight:600; color:var(--hp-green-700); margin-top:6px; }
.ca-story{ font-size:15.5px; line-height:1.65; color:var(--hp-graphite); margin-top:16px; }
.ca-needs{ margin-top:20px; padding:18px 20px; border-radius:16px; background:var(--hp-fog); border:1px solid var(--hp-mist); }
.ca-needs-t{ font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--hp-slate); margin-bottom:12px; }
.ca-needs ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.ca-needs li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.4; color:var(--hp-graphite); font-weight:500; }
.ca-needs li svg{ flex:0 0 auto; margin-top:2px; }
.ca-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; padding:15px 24px; border-radius:14px; cursor:pointer; white-space:nowrap;
  font-size:15px; font-weight:800; color:#04130D; background:linear-gradient(135deg,#2FE0A8,var(--hp-green));
  box-shadow:0 12px 28px -8px rgba(42,159,132,.5); transition:transform .15s; }
.ca-cta:hover{ transform:translateY(-2px); }
.ca-cta-row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:22px; }
.ca-cta-row .ca-cta{ margin-top:0; }
.ca-story-link{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:14px; font-weight:700; color:var(--hp-green-700); transition:gap .2s, color .2s; }
.ca-story-link:hover{ gap:9px; color:var(--hp-green); }
.ca-empty{ display:flex; align-items:center; justify-content:center; gap:10px; padding:60px; border-radius:20px;
  border:1px dashed var(--hp-green-200); color:var(--hp-slate); font-size:15px; font-weight:600; }

/* trust strip */
.ca-trust{ position:relative; overflow:hidden; margin:60px clamp(20px,5vw,56px) 0; border-radius:26px; padding:clamp(32px,5vw,54px) clamp(22px,5vw,48px);
  background:linear-gradient(150deg,#0E1A16,#0B1813); color:#fff; }
.ca-trust-glow{ position:absolute; top:-30%; right:-5%; width:45%; height:160%; background:radial-gradient(closest-side,rgba(47,224,168,.14),transparent 70%); pointer-events:none; }
.ca-trust-inner{ position:relative; z-index:1; max-width:680px; }
.ca-trust-h{ font-family:var(--font-display); font-weight:800; font-size:28px; letter-spacing:-.02em; }
.ca-trust-p{ font-size:15.5px; line-height:1.65; color:rgba(234,243,238,.68); margin-top:14px; }
.ca-trust-meta{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; padding:10px 16px; border-radius:999px;
  background:rgba(55,230,164,.1); border:1px solid rgba(55,230,164,.25); font-size:12.5px; font-weight:700; color:#8FC2AC; }
.ca-trust-note{ font-size:11.5px; line-height:1.5; color:rgba(234,243,238,.45); margin:16px 0 0; max-width:560px; }
.ca-page .ca-trust + *{ margin-top:60px; }

/* responsive: filas a 1 columna en móvil + padding fluido */
@media (max-width:860px){
  .ca-list{ padding:32px 20px 16px; gap:48px; }
  .ca-row, .ca-row.rev{ grid-template-columns:1fr; gap:24px; direction:ltr; }
  .ca-h1{ font-size:clamp(32px,8vw,48px); }
}
@media (max-width:520px){
  .ca-list{ gap:36px; }
  .ca-filters{ flex-wrap:wrap; max-width:100%; justify-content:center; }
  .ca-trust-h{ font-size:clamp(22px,6vw,28px); }
  .ca-audit{ margin-left:0; margin-right:0; }
  /* CTA a ancho completo y con envoltura: evita que el botón (nowrap) se clipe en pantallas
     estrechas y arrastre el ancho del cuerpo por min-content. */
  .ca-cta-row{ flex-direction:column; align-items:stretch; gap:14px; }
  .ca-cta{ width:100%; justify-content:center; white-space:normal; text-align:center; }
  .ca-story-link{ justify-content:center; }
}