:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --panel:#0f172a;
  --text:#040404; --muted:#9ca3af;
  --accent1:#f85f2d; --accent2:#f8b8ab; --accent-soft:#fcdbd3;
  --soft:#fcdbd3; --soft-dark:#f8b8ab;
  --radius-lg:18px; --radius:12px; --radius-sm:8px;
  --container:1200px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:#fff; color:var(--text)}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.section{padding:64px 0}
.section-head h2{margin:0 0 6px; font-size:28px}
.section-head .sub{margin:0 0 24px; color:var(--muted)}
.center{text-align:center}

/* Topbar */
.topbar{position:sticky; top:0; z-index:50; background:#ffffffcc; backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid #ececec}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:58px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.nav a{margin-left:14px; color:var(--text); opacity:.9}
.nav .button.sm{padding:8px 12px; font-size:14px}
a.brand, .brand a{color:var(--text); text-decoration:none}
.brand span{ text-decoration:none; border-bottom:0 }

/* Botones sólidos, prolijos */
.button{
  --btn-bg:#f85f2d; --btn-bg-hover:#e45728; --btn-text:#fff;
  --btn-border:#f37349; --btn-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.08);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:10px 16px; border-radius:12px;
  background:var(--btn-bg); color:var(--btn-text); border:1px solid var(--btn-border); box-shadow:var(--btn-shadow);
  font-weight:700; letter-spacing:.01em; text-decoration:none;
  transition:background-color .15s ease, transform .06s ease, box-shadow .2s ease, border-color .15s ease;
}
.button:hover{ background:var(--btn-bg-hover); transform:translateY(-1px) }
.button:active{ transform:translateY(0); box-shadow:0 1px 2px rgba(0,0,0,.08) }
.button:focus-visible{ outline:0; box-shadow:0 0 0 2px #fff, 0 0 0 4px #fcdbd3 }
.button.ghost{ background:transparent; color:#f85f2d; border:1px solid transparent; box-shadow:none }
.button.ghost:hover{ background:#fcdbd3 }
.button.sm{ padding:8px 12px; min-height:34px; border-radius:999px; font-weight:600 }
.button.block{ display:block; width:100% }

/* HERO */
.hero{position:relative; min-height:72vh; display:grid; place-items:center; overflow:hidden; background:#fff}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; background:transparent}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 70% 20%, #f85f2d59, #f85f2d40 60%),
    linear-gradient(to bottom, #f85f2d59, #00000073);
}
.hero-content{position:relative; max-width:780px; text-align:center; padding:20px}
.hero h1{font-size:44px; letter-spacing:-.02em; margin:0 0 10px; color:#fff}
.hero .lead{font-size:18px; color:#f2f4f7; margin:0 0 18px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Grids */
.grid{display:grid; gap:24px}
.grid.three{grid-template-columns:repeat(3, minmax(260px, 1fr))}
@media (max-width:1100px){ .grid.three{grid-template-columns:repeat(2, minmax(260px, 1fr))} }
@media (max-width:680px){ .grid.three{grid-template-columns:1fr} }

/* Planes */
#planes{background:#fff}
.grid.plans{grid-template-columns:repeat(3, minmax(280px, 1fr)); align-items:stretch}
@media (max-width:1100px){ .grid.plans{grid-template-columns:repeat(2, minmax(260px, 1fr))} }
@media (max-width:680px){ .grid.plans{grid-template-columns:1fr} }
.card{position:relative; display:flex; flex-direction:column; background:#fff; color:var(--text); border-radius:var(--radius-lg); box-shadow:0 8px 18px rgba(0,0,0,.08); padding:22px; overflow:hidden; border:1px solid #eeeeee}
.card.soft{background:#fff; color:var(--text); border:1px solid #f1f1f1}
.card .badge{position:absolute; top:12px; right:12px; font-size:12px; font-weight:700; background:#fff1ed; color:var(--accent1); border:1px solid #ffd9cc; border-radius:999px; padding:6px 10px}
.card.featured{outline:2px solid rgba(248,95,45,.35); transform:translateY(-2px)}
.card-head h3{margin:0 0 6px; font-size:18px}
.price{display:flex; align-items:baseline; gap:6px; margin:0 0 6px}
.price .amount{font-size:36px; font-weight:800; letter-spacing:-.02em}
.price .cur,.price .per{font-size:14px; color:#64748b}
.card .lead{font-weight:600; margin:0 0 8px}
.features{list-style:none; margin:8px 0 18px; padding:0}
.features li{position:relative; padding-left:26px; margin:10px 0}
.features li::before{
  content:""; position:absolute; left:0; top:7px; width:16px; height:16px; border-radius:4px;
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.285 2.859l-11.285 11.283-5.285-5.283-3.715 3.715 9 9 15-15z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.285 2.859l-11.285 11.283-5.285-5.283-3.715 3.715 9 9 15-15z"/></svg>') center/contain no-repeat;
}
/* CTA de la card abajo alineado */
.grid.plans .card .button{ margin-top:auto; width:100%; border-radius:12px }
.grid.plans .card{ padding-bottom:24px }

/* InsightLab – 4 col responsivas */
#insightlab .grid{ display:grid; gap:24px; grid-template-columns:repeat(4, minmax(240px,1fr)) }
@media (max-width:1200px){ #insightlab .grid{ grid-template-columns:repeat(3, minmax(240px,1fr)) } }
@media (max-width:900px){  #insightlab .grid{ grid-template-columns:repeat(2, minmax(220px,1fr)) } }
@media (max-width:600px){  #insightlab .grid{ grid-template-columns:1fr } }
#insightlab .card{ display:flex; flex-direction:column; height:100% }
#insightlab .card .button{ margin-top:auto; width:100%; border-radius:12px }

/* Servicios – CTAs abajo */
#servicios .grid{ align-items:stretch }
#servicios .card{ display:flex; flex-direction:column; height:100% }
#servicios .card a{ margin-top:auto; align-self:center }

/* Footer */
.footer{background:#fff; padding:32px 0; border-top:1px solid #efefef}
.footer-grid{display:grid; gap:16px; grid-template-columns:repeat(3, minmax(180px, 1fr))}
.footer a{color:#1d4ed8}
@media (max-width:680px){ .footer-grid{grid-template-columns:1fr} }

/* ===== PRELOADER (logo gris girando + texto por letras) ===== */
#preloader{ position:fixed; inset:0; z-index:10000; background:#fff; display:grid; place-items:center; opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s ease, visibility .25s ease }
#preloader .preloader-content{ display:grid; place-items:center; gap:10px }
.rotate{ animation:spin 5s linear infinite; transform-origin:150px 200px }
@keyframes spin{ to{ transform:rotate(360deg) } }
.preloader-text{ display:flex; align-items:center; justify-content:center; gap:2px; margin-top:6px; font:600 18px/1.2 Inter,system-ui,sans-serif; color:#2b2b2b }
.preloader-text .sp{ width:.45em }
.preloader-text span{ opacity:0; transform:translateY(6px); animation:letterIn .38s ease forwards }
.preloader-text span:nth-child(1){animation-delay:.05s}
.preloader-text span:nth-child(2){animation-delay:.15s}
.preloader-text span:nth-child(3){animation-delay:.25s}
.preloader-text span:nth-child(4){animation-delay:.35s}
.preloader-text span:nth-child(5){animation-delay:.45s}
.preloader-text span:nth-child(6){animation-delay:.55s}
.preloader-text span:nth-child(7){animation-delay:.65s}
.preloader-text span:nth-child(8){animation-delay:.75s}
@keyframes letterIn{ to{ opacity:1; transform:translateY(0) } }
html:not(.is-loading) #preloader{ opacity:0; visibility:hidden; pointer-events:none }
@media (prefers-reduced-motion:reduce){
  .rotate{ animation:none }
  .preloader-text span{ animation:none; opacity:1; transform:none }
}
/* A11y */
.sr-only{ position:absolute; left:-9999px }
/* === Ajuste visual del preloader según referencia === */
#preloader .preloader-content{
  gap:16px;                 /* más aire entre logo y texto */
  transform: translateY(-6px); /* súbelo un pelín */
}

/* Tamaño y tono del logo */
#preloader svg{ width:72px; height:auto; }    /* antes 100px x 133px; usamos ancho fijo */
.rotate path{ fill:#cfcfcf; }                 /* gris suave del ícono */

/* Texto “Al Mango” más espaciado y legible */
.preloader-text{
  font-weight:600;
  font-size:20px;          /* sube un punto */
  letter-spacing:.12em;    /* tracking como en la foto */
  color:#3a3a3a;           /* gris intermedio */
}
.preloader-text .sp{ width:.75em; }           /* espacio entre “Al” y “Mango” */

/* (Opcional) animación un poco más rápida */
.preloader-text span{
  animation-duration:.32s;
}
.rotate{ animation-duration:4s; }             /* giro un poco más ágil (antes 5s) */

/* ======= Podcast block (scoped) ======= */
.podcast-block {
  /* Ajusta los colores a tu paleta */
  --bg: #f5f8ff;            /* fondo suave azulado */
  --card-bg: #ffffff;
  --text: #0e1a2b;
  --muted: #55627a;
  --accent: #ff8f39;        /* naranja suave CTA */
  --accent-hover: #ff7a14;
  --border: #e6ecf7;
  --radius: 16px;

  background: var(--bg);
  color: var(--text);
  padding: 56px 20px;
}

.podcast-block .wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.podcast-block h2 {
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.25;
  margin: 0 0 10px 0;
  font-weight: 700;
}

.podcast-block .lead {
  font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.05rem);
  color: var(--muted);
  margin: 0 0 18px 0;
}

.podcast-block .cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.podcast-block .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}

.podcast-block .btn-primary {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}
.podcast-block .btn-primary:hover,
.podcast-block .btn-primary:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.podcast-block .link-secondary {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.podcast-block .microcopy {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 6px 0 28px 0;
}

.podcast-block .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .podcast-block .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Podcast: 3 tarjetas estilo “Servicios” ===== */
.podcast-block {
  --bg: #fff;                /* igual a tu página */
  --card-bg: #fff;
  --text: #0e1a2b;
  --muted: #55627a;
  --accent: #f85f2d;         /* color del botón y links de acción */
  --accent-hover: #e05226;   /* hover del botón/enlaces */
  --radius: 16px;
  --shadow: 0 10px 24px rgba(17, 24, 39, 0.08);

  background: var(--bg);
  color: var(--text);
  padding: 56px 20px;
}

.podcast-block .wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.podcast-block h2 {
  font-weight: 700;
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem);
  margin: 0 0 8px 0;
}

.podcast-block .lead {
  color: var(--muted);
  font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.05rem);
  margin: 0 0 18px 0;
}

.podcast-block .cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 6px 0 12px 0;
}

.podcast-block .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}

/* Botón primario: fondo acento y TEXTO BLANCO */
.podcast-block .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.podcast-block .btn-primary:hover,
.podcast-block .btn-primary:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

.podcast-block .link-secondary {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--text);
}

.podcast-block .microcopy {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 4px 0 24px 0;
}

/* === Tarjetas en 3 columnas como “Servicios” === */
.podcast-block .grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;         /* móvil: 1 col */
}
@media (min-width: 720px) {
  .podcast-block .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.podcast-block .card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.podcast-block .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.10);
}

.podcast-block .eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.podcast-block .title {
  font-size: 1.06rem;
  font-weight: 700;
  margin: 0;
}
.podcast-block .value {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 8px 0;
}

/* “Escuchar” en tarjetas con el mismo acento (#f85f2d) */
.podcast-block .actions {
  margin-top: auto;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
}
.podcast-block .actions a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.podcast-block .actions a:hover,
.podcast-block .actions a:focus-visible {
  border-bottom-color: var(--accent);
}