/* ============================================================
   ALDUR SEGUROS — Boceto Solbyte
   Estética editorial premium adaptada a identidad azul Aldur
   ============================================================ */

/* ── Tipografías locales ── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-Italic.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nanum Myeongjo';
  src: url('/assets/fonts/NanumMyeongjo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nanum Myeongjo';
  src: url('/assets/fonts/NanumMyeongjo-Bold.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta Aldur */
  --color-primary:    #00B0E2;
  --color-secondary:  #4C8DCA;
  --color-accent:     #00B0E2;
  --color-bg:         #FFFFFF;
  --color-bg-alt:     #F5FBFF;
  --color-bg-warm:    #E6E6E6;
  --color-bg-dark:    #1D1D1B;
  --color-text:       #1D1D1B;
  --color-text-muted: #6B6B6A;
  --color-border:     rgba(29,29,27,0.10);
  --color-border-strong: rgba(29,29,27,0.85);

  --gradient-primary: linear-gradient(135deg, #00B0E2 0%, #4C8DCA 100%);
  --gradient-soft:    linear-gradient(135deg, rgba(0,176,226,0.08) 0%, rgba(76,141,202,0.12) 100%);

  /* Tipografías */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-serif:   'Nanum Myeongjo', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* Espaciado */
  --section-py:   120px;
  --container-w:  1320px;
  --gap:          24px;

  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8:  128px;

  /* Bordes */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 4px rgba(29,29,27,.06);
  --shadow-md: 0 12px 32px rgba(29,29,27,.08);
  --shadow-lg: 0 24px 60px rgba(29,29,27,.14);
  --shadow-glow: 0 16px 48px rgba(0,176,226,.18);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ── Container ── */
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
}
.container-wide {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 1rem;
}

/* ── Secciones ── */
section { padding: var(--section-py) 0; position: relative; }

/* ── Tipografía editorial ── */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); font-weight: 500; }
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 500; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 500; line-height: 1.2; }
h4 { font-size: 1.1rem; font-weight: 500; }

h1 em, h2 em, h3 em, .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

p { font-size: 1rem; color: var(--color-text); }
.section-subtitle, .lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
  line-height: 1.6;
}

/* Tagline pequeña */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  font-weight: 500;
}
.eyebrow::before { content: none; }

.section-head { text-align: center; margin-bottom: 64px; }
.section-head h2 { margin-bottom: 16px; }

/* ── Grid ── */
.grid { display: grid; gap: var(--gap); }
.grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .grid[data-columns="3"], .grid[data-columns="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid[data-columns="2"], .grid[data-columns="3"], .grid[data-columns="4"] { grid-template-columns: 1fr; }
}

/* ── Botones tipo píldora ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  transition: transform .25s ease, box-shadow .25s ease, background .35s ease, color .25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn .icon { width: 18px; height: 18px; display: inline-flex; }
.btn-primary { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover { box-shadow: 0 18px 56px rgba(0,176,226,.32); }
.btn-dark { background: var(--color-bg-dark); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-light { background: #fff; color: var(--color-bg-dark); }
.btn-light:hover { background: var(--color-bg-warm); }
.btn-ghost { background: transparent; color: var(--color-bg-dark); border: 1.5px solid var(--color-border-strong); }
.btn-ghost:hover { background: var(--color-bg-dark); color: #fff; }
.btn-sm { padding: 11px 20px; font-size: 0.85rem; }

/* ── Card base ── */
.card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  border: 1px solid var(--color-border);
  transition: transform .35s ease, box-shadow .35s ease;
  position: relative;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* Flecha circular esquina superior derecha de card */
.card-arrow {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: background .3s, color .3s, transform .3s;
}
.card:hover .card-arrow { background: var(--color-bg-dark); color: #fff; transform: rotate(-45deg); }

/* ============================================================
   HEADER FLOTANTE TIPO PILDORA SOBRE HERO
   ============================================================ */
.site-header {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 64px);
  max-width: 1440px;
  z-index: 50;
  display: flex;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
}
.site-header > .header-inner { pointer-events: auto; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-full);
  padding: 8px 14px 8px 22px;
  box-shadow: 0 12px 40px rgba(29,29,27,0.10);
  width: 100%;
}
.header-nav { margin-left: auto; }
.header-logo img { height: 56px; width: auto; display: block; }
.header-nav { display: flex; align-items: center; }
.header-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav .nav-list > li { position: relative; }
.header-nav .has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 20px;
  pointer-events: none;
}
.header-nav .has-dropdown:hover::after,
.header-nav .has-dropdown:focus-within::after { pointer-events: auto; }
.header-nav a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  padding: 6px 0;
  transition: color .25s;
}
.header-nav a:hover { color: var(--color-primary); }
.header-nav .caret { width: 14px; height: 14px; transition: transform .25s; }
.header-nav .has-dropdown:hover > a .caret,
.header-nav .has-dropdown:focus-within > a .caret { transform: rotate(180deg); }

.header-nav .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  margin-top: 14px;
  min-width: 240px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(29,29,27,0.16);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 10;
}
.header-nav .has-dropdown:hover > .dropdown,
.header-nav .has-dropdown:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.header-nav .dropdown li { display: block; }
.header-nav .dropdown a {
  display: block;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.header-nav .dropdown a:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  box-shadow: 0 6px 18px rgba(0,176,226,0.28);
  transition: transform .25s, box-shadow .25s;
}
.header-phone:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,176,226,0.4); }
.header-phone + .header-cta { margin-left: -20px; }
.header-cta {
  background: var(--color-bg-dark);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background .25s;
}
.header-cta:hover { background: var(--color-primary); }
.header-burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-dark);
  color: #fff;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1100px) {
  .header-nav { display: none; }
  .header-phone { display: none; }
  .header-burger { display: inline-flex; }
}

/* ============================================================
   HERO
   ============================================================ */
#hero {
  padding: 0;
  padding-top: 1rem;
}
.hero-shell {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 1rem;
}
.hero-card {
  position: relative;
  width: 100%;
  height: calc(100vh - 2rem);
  min-height: 640px;
  max-height: 860px;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: #1D1D1B;
}
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.hero-card .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  animation: heroCycle 18s infinite ease-in-out;
  will-change: opacity, transform;
}
.hero-slider .hero-img:nth-child(1) { animation-delay: 0s; }
.hero-slider .hero-img:nth-child(2) { animation-delay: 6s; }
.hero-slider .hero-img:nth-child(3) { animation-delay: 12s; }

@keyframes heroCycle {
  0%   { opacity: 0; transform: scale(1.04); }
  4%   { opacity: 1; }
  33%  { opacity: 1; transform: scale(1.1); }
  38%  { opacity: 0; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.04); }
}
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29,29,27,0.15) 0%, rgba(29,29,27,0.05) 40%, rgba(29,29,27,0.55) 100%);
  z-index: 2;
}
.hero-content {
  position: absolute;
  left: 56px;
  bottom: 56px;
  right: 56px;
  z-index: 3;
  color: #fff;
  max-width: 960px;
}
.hero-content h1 {
  color: #fff;
  font-size: clamp(2.8rem, 6.4vw, 6rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
  white-space: normal;
}
.hero-content h1 br { display: block; }
.hero-content h1 em { font-size: 1.05em; }
.hero-content h1 em { color: #fff; opacity: 0.95; }
.hero-content p {
  color: rgba(255,255,255,0.85);
  font-size: 1.05rem;
  margin-top: 22px;
  max-width: 740px;
  line-height: 1.5;
}
.hero-content p br { display: block; }
@media (max-width: 700px) {
  .hero-content p { font-size: 0.95rem; }
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 32px;
}
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  padding: 8px 4px;
  transition: opacity .25s, text-underline-offset .25s;
}
.hero-link:hover { opacity: 0.85; text-underline-offset: 8px; }
.hero-microcopy {
  margin-top: 18px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Píldora vertical lateral derecha en hero */
.hero-side-pill {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-full);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: 0 12px 36px rgba(29,29,27,0.18);
  border: 1px solid rgba(255,255,255,0.5);
}
.hero-side-pill .pill-phone {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text);
}
.hero-side-pill .pill-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Scroll indicator esquina inferior izquierda hero */
.hero-scroll {
  position: absolute;
  left: 56px;
  top: 56px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-scroll .dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .hero-card { height: calc(100vh - 2rem); min-height: 580px; max-height: 720px; border-radius: 22px; }
  .hero-content { left: 24px; right: 24px; bottom: 32px; }
  .hero-side-pill { display: none; }
  .hero-scroll { left: 24px; top: 24px; }
}

/* ============================================================
   CLAIM EDITORIAL
   ============================================================ */
.claim {
  background: #fff;
  padding: 140px 0 56px;
  text-align: center;
}
.claim-inner { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.claim h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: -0.025em;
  line-height: 1.06;
}
.claim p {
  margin-top: 28px;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.claim-flourish {
  display: block;
  width: 64px;
  height: 28px;
  margin: 0 auto 32px;
  color: var(--color-primary);
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
  background: #fff;
  padding-top: 0;
  padding-bottom: 56px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}
.stat-card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-xl);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--color-border);
  transition: transform .35s, box-shadow .35s;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stat-card > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-label { display: block; font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.4; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .stats-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SELECTOR DE SEGUROS (pills horizontales)
   ============================================================ */
.selector {
  background: var(--color-bg-warm);
  padding: 80px 0;
}
.selector-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 14px 22px;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text);
  transition: background .35s, color .35s, transform .25s, border-color .35s;
}
.pill:hover {
  background: var(--gradient-primary);
  color: #fff;
  transform: translateY(-2px);
  border-color: transparent;
}
.pill:hover .pill-ico { color: #fff; }
.pill-ico { color: var(--color-primary); transition: color .35s, transform .35s; }
.pill:hover .pill-ico { transform: translateX(2px); }
.pill-dark {
  background: var(--color-bg-dark);
  color: #fff;
  border-color: var(--color-bg-dark);
}
.pill-dark .pill-ico { color: #fff; }
.pill-dark:hover { background: var(--gradient-primary); }

@media (max-width: 800px) {
  .selector-inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
  .pill { flex-shrink: 0; scroll-snap-align: start; }
}

/* ============================================================
   GRID ASIMETRICO DE SERVICIOS DESTACADOS
   ============================================================ */
.featured {
  background: var(--color-bg);
  padding: 96px 0 var(--section-py);
}
.featured-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.45fr 1.15fr;
  grid-template-rows: minmax(280px, auto) minmax(280px, auto);
  gap: 18px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
}
.feat-card {
  border-radius: var(--radius-xl);
  padding: 36px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  transition: transform .4s ease, box-shadow .4s ease;
}
.feat-card:hover { transform: translateY(-4px); }
.feat-card .feat-label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}
.feat-card h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-top: 12px;
}
.feat-card p { margin-top: 14px; font-size: 0.95rem; line-height: 1.55; opacity: 0.78; }
.feat-card .feat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-weight: 600;
  font-size: 0.92rem;
}

.feat-gradient {
  grid-column: 1;
  grid-row: 1;
  background: var(--gradient-primary);
  color: #fff;
  min-height: 320px;
}
.feat-image {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 0;
  background: var(--color-bg-dark);
  min-height: 580px;
}
.feat-image .feat-img-wrap { position: absolute; inset: 0; }
.feat-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.feat-image:hover img { transform: scale(1.06); }
.feat-image .feat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29,29,27,0) 30%, rgba(29,29,27,0.7) 100%);
}
.feat-image .feat-text {
  position: relative;
  z-index: 2;
  padding: 36px;
  color: #fff;
  margin-top: auto;
}
.feat-timeline {
  grid-column: 3;
  grid-row: 1;
  background: var(--color-bg-warm);
}
.feat-timeline .steps { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.feat-timeline .step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
}
.feat-timeline .step .step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-bg-dark);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feat-dark {
  grid-column: 1;
  grid-row: 2;
  background: var(--color-bg-dark);
  color: #fff;
}
.feat-dark .feat-price {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 3.8vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.feat-dark .feat-price small { font-size: 0.9rem; font-weight: 500; opacity: 0.7; }
.feat-extra {
  grid-column: 3;
  grid-row: 2;
  background: #fff;
  border: 1px solid var(--color-border);
}

@media (max-width: 1100px) {
  .featured-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .feat-gradient { grid-column: 1 / -1; grid-row: 1; }
  .feat-image    { grid-column: 1; grid-row: 2; min-height: 380px; }
  .feat-timeline { grid-column: 2; grid-row: 2; }
  .feat-dark     { grid-column: 1; grid-row: 3; }
  .feat-extra    { grid-column: 2; grid-row: 3; }
}
@media (max-width: 700px) {
  .featured-grid { grid-template-columns: 1fr; }
  .feat-gradient, .feat-image, .feat-timeline, .feat-dark, .feat-extra {
    grid-column: 1;
    grid-row: auto;
  }
  .feat-image { min-height: 320px; }
}

/* ============================================================
   EXPLORA NUESTROS SEGUROS (contenedor azul claro + grid 8)
   ============================================================ */
.explore {
  background: var(--color-bg-warm);
  padding-top: 48px;
  padding-bottom: 0;
}
.explore-shell {
  background: var(--color-bg-alt);
  border-radius: var(--radius-2xl);
  padding: 80px 64px;
  max-width: none;
  width: 100%;
  margin: 0;
}
.explore-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
  text-align: left;
}
.explore-head-left h2 {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  text-align: left;
  margin: 0;
  max-width: none;
  line-height: 1.05;
  white-space: normal;
}
.explore-head-left h2 br { display: block; }
.explore-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}
.explore-head-right p {
  font-size: 0.98rem;
  color: var(--color-text-muted);
  max-width: 420px;
  text-align: right;
  line-height: 1.55;
  margin: 0;
}
.explore-tabs {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 900px) {
  .explore-head { grid-template-columns: 1fr; gap: 28px; }
  .explore-head-right { align-items: flex-start; }
  .explore-head-right p { text-align: left; }
  .explore-tabs { justify-content: flex-start; }
}
.tab {
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 500;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  transition: all .25s;
}
.tab:hover { color: var(--color-text); }
.tab.is-active { background: #fff; color: var(--color-text); border-color: var(--color-border); box-shadow: var(--shadow-sm); }

.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1000px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .explore-grid { grid-template-columns: 1fr; } }

.svc-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  position: relative;
  transition: transform .35s, box-shadow .35s;
  display: block;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.svc-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--color-bg-warm);
}
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.svc-card:hover .svc-img img { transform: scale(1.06); }
.svc-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29,29,27,0) 38%, rgba(29,29,27,0.35) 70%, rgba(29,29,27,0.82) 100%);
  pointer-events: none;
}
.svc-tag {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0,0,0,0.3);
}
.svc-tag .svc-ico {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,176,226,0.5);
}
.svc-tag .svc-ico .icon { width: 16px !important; height: 16px !important; }
.svc-card:hover .svc-tag { transform: translateY(-2px); }
.svc-tag { transition: transform .35s; }
.svc-arrow {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: background .25s, color .25s, transform .25s;
}
.svc-card:hover .svc-arrow { background: var(--color-bg-dark); color: #fff; transform: rotate(-45deg); }

.explore-cta { display: flex; justify-content: center; margin-top: 56px; }

@media (max-width: 700px) {
  .explore-shell { padding: 48px 24px; border-radius: var(--radius-xl); }
}

/* ============================================================
   SEGURO SALUD DESTACADO (2 cols + carrusel modalidades)
   ============================================================ */
.salud { background: #fff; }
.salud-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: stretch;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.salud-text { padding-right: 24px; align-self: center; }
.salud-text h2 { margin-bottom: 22px; }
.salud-text p { font-size: 1.05rem; color: var(--color-text-muted); margin-bottom: 28px; }
.salud-benefits { display: flex; flex-direction: column; gap: 14px; }
.salud-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 500;
}
.salud-benefits .check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.salud-cta { margin-top: 36px; display: inline-flex; gap: 12px; flex-wrap: wrap; }

.salud-price-card {
  background: var(--color-bg-dark);
  color: #fff;
  border-radius: var(--radius-2xl);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  position: relative;
  overflow: hidden;
}
.salud-price-card::before {
  content: '✦';
  position: absolute;
  top: 32px;
  right: 36px;
  color: var(--color-primary);
  font-size: 1.4rem;
}
.salud-price-card .from-label {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.salud-price-card .from-amount {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5.4vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-top: 14px;
}
.salud-price-card .from-amount small { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.65); display: block; margin-top: 8px; }
.salud-price-card .product-name { font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; margin-top: 12px; color: rgba(255,255,255,0.9); }
.salud-price-features { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.salud-price-features li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: rgba(255,255,255,0.85); }
.salud-price-features .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.salud-price-card .note { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: 24px; }

@media (max-width: 900px) {
  .salud-grid { grid-template-columns: 1fr; gap: 32px; }
  .salud-text { padding-right: 0; }
}

.modalidades-carousel {
  max-width: 1320px;
  margin: 64px auto 0;
  padding: 0 24px;
}
.modalidades-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.modalidad {
  flex-shrink: 0;
  scroll-snap-align: start;
  min-width: 220px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 22px 22px;
  border: 1px solid var(--color-border);
}
.modalidad .mod-name { font-weight: 500; font-size: 0.95rem; }
.modalidad .mod-price { font-size: 1.4rem; font-weight: 500; margin-top: 8px; letter-spacing: -0.02em; }
.modalidad .mod-price small { font-size: 0.78rem; font-weight: 500; color: var(--color-text-muted); }
.modalidad .mod-meta { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 6px; }

/* ============================================================
   PRICING — card oscura grande
   ============================================================ */
.pricing {
  background: var(--color-bg-warm);
  padding-top: 96px;
}

/* ============================================================
   CAMPAÑA FIN DE AÑO
   ============================================================ */
.campana { background: var(--color-bg-warm); padding: 80px 32px 96px; }
.campana-shell {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 72px;
  border-radius: 32px;
  background: var(--color-bg-dark);
  color: #fff;
  overflow: hidden;
}
.campana-shell::before {
  content: '✦';
  position: absolute;
  top: 30px;
  right: 36px;
  color: var(--color-primary);
  font-size: 1.6rem;
}
.campana-shell::after {
  content: '✦';
  position: absolute;
  bottom: 30px;
  left: 36px;
  color: var(--color-primary);
  font-size: 1.6rem;
}
.campana-head { max-width: 920px; margin-bottom: 56px; }
.campana-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
}
.campana-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(0,176,226,0.6);
  animation: campana-pulse 1.8s ease-out infinite;
}
@keyframes campana-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,176,226,0.6); }
  100% { box-shadow: 0 0 0 12px rgba(0,176,226,0); }
}
.campana-title {
  margin: 28px 0 0;
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.campana-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: #fff; }
.campana-lead {
  margin-top: 24px;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  max-width: 760px;
}

.campana-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.campana-figure {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.campana-figure-label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}
.campana-figure-num {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5.6vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}
.campana-figure-num small {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255,255,255,0.85);
  vertical-align: 14px;
}
.campana-figure-foot {
  margin-top: auto;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.campana-figure-alt {
  background:
    linear-gradient(135deg, rgba(0,176,226,0.22) 0%, rgba(76,141,202,0.18) 100%),
    rgba(255,255,255,0.04);
  border-color: rgba(0,176,226,0.35);
}
.campana-figure-alt .campana-figure-num { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.campana-figure-empresa { background: rgba(255,255,255,0.1); }
.campana-figure-empresa .campana-figure-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: #fff;
  line-height: 1.15;
  margin-top: 4px;
}

.campana-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 32px;
}
.campana-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  list-style: none;
}
.campana-checks li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.92);
}
.campana-checks .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.campana-ctas {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.campana-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: opacity .25s, text-underline-offset .25s;
}
.campana-link:hover { opacity: 0.85; text-underline-offset: 8px; }

.campana-note {
  margin-top: 24px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
}

@media (max-width: 960px) {
  .campana-shell { padding: 48px 28px; border-radius: 22px; }
  .campana-grid { grid-template-columns: 1fr; }
}
.pricing > .container { max-width: 1480px; padding: 0 32px; }
.pricing-head { text-align: center; margin-bottom: 56px; }
.pricing-head h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
@media (max-width: 760px) {
  .pricing-head h2 { white-space: normal !important; }
}
.pricing-card {
  background: var(--color-bg-dark);
  color: #fff;
  border-radius: 32px;
  padding: 64px 72px;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.pricing-card::before {
  content: '✦';
  position: absolute;
  top: 30px;
  right: 36px;
  color: var(--color-primary);
  font-size: 1.6rem;
}
.pricing-card::after {
  content: '✦';
  position: absolute;
  bottom: 30px;
  left: 36px;
  color: var(--color-primary);
  font-size: 1.6rem;
}
.pricing-left .price-num {
  font-family: var(--font-heading);
  font-size: clamp(3.6rem, 6vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}
.pricing-left .price-num small { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.6); display: block; margin-top: 8px; }
.pricing-left .price-prod {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  margin-top: 16px;
  opacity: 0.9;
}
.pricing-left .price-desc { font-size: 0.92rem; color: rgba(255,255,255,0.7); margin-top: 14px; line-height: 1.6; }
.pricing-left .price-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.pricing-right ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px;
}
.pricing-right li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.92);
}
.pricing-right .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pricing-note { text-align: center; margin-top: 28px; font-size: 0.86rem; color: var(--color-text-muted); }

@media (max-width: 900px) {
  .pricing-card { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
  .pricing-right ul { grid-template-columns: 1fr; }
}

/* ============================================================
   SEGURO EXTRANJEROS (imagen + card superpuesta)
   ============================================================ */
.extranjeros { background: #fff; }
.ext-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.ext-visual {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--color-bg-warm);
}
.ext-visual img { width: 100%; height: 100%; object-fit: cover; }
.ext-floating {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-md);
  max-width: 280px;
}
.ext-floating .badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ext-floating .price-from { font-size: 0.82rem; color: var(--color-text-muted); }
.ext-floating .price-val { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; }
.ext-text h2 { margin-bottom: 22px; }
.ext-text p { color: var(--color-text-muted); margin-bottom: 28px; font-size: 1.05rem; }
.ext-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 32px; }
.ext-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
}
.ext-checks .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gradient-soft);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .ext-grid { grid-template-columns: 1fr; }
  .ext-checks { grid-template-columns: 1fr; }
}

/* ============================================================
   OTROS SEGUROS
   ============================================================ */
.otros { background: var(--color-bg-warm); }
.otros-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.otro-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 32px;
  border: 1px solid var(--color-border);
  transition: all .35s;
  position: relative;
}
.otro-card:hover { background: var(--color-bg-dark); color: #fff; transform: translateY(-4px); }
.otro-card:hover .otro-arrow { background: var(--color-primary); color: #fff; }
.otro-card:hover .otro-ico { background: var(--gradient-primary); color: #fff; }
.otro-ico {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .35s;
}
.otro-card h3 { margin-top: 24px; font-size: 1.3rem; }
.otro-card p { font-size: 0.92rem; opacity: 0.78; margin-top: 10px; line-height: 1.55; }
.otro-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-bg-warm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .35s;
}

@media (max-width: 1000px) { .otros-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .otros-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PROMOCIONES (bloque oscuro premium)
   ============================================================ */
.promos {
  background: var(--color-bg-warm);
}
.promos-shell {
  background: var(--color-bg-dark);
  color: #fff;
  border-radius: 36px;
  padding: 96px 64px;
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.promos-shell::before, .promos-shell::after {
  content: '✦';
  position: absolute;
  color: var(--color-primary);
  font-size: 1.4rem;
}
.promos-shell::before { top: 32px; left: 40px; }
.promos-shell::after { bottom: 32px; right: 40px; }
.promos-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}
.promos-text h2 { color: #fff; margin-bottom: 22px; }
.promos-text h2 em { color: rgba(255,255,255,0.9); }
.promos-text p { color: rgba(255,255,255,0.78); font-size: 1.05rem; margin-bottom: 32px; }
.promos-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.promos-side {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-2xl);
  padding: 32px;
  backdrop-filter: blur(10px);
}
.promos-side .promo-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
}
.promos-side h3 { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: #fff; font-size: 1.6rem; margin-top: 12px; }
.promos-side p { font-size: 0.92rem; color: rgba(255,255,255,0.7); margin-top: 14px; }

@media (max-width: 900px) {
  .promos-shell { padding: 56px 28px; border-radius: 28px; }
  .promos-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   COLABORAR (CTA horizontal degradado)
   ============================================================ */
.colaborar { background: #fff; padding-top: 0; padding-bottom: 72px; }
.colaborar-shell {
  border-radius: 32px;
  padding: 120px 72px;
  min-height: 420px;
  background:
    linear-gradient(110deg, rgba(29,29,27,0.86) 0%, rgba(29,29,27,0.68) 55%, rgba(29,29,27,0.5) 100%),
    url('/assets/img/negocio-profesional-1200.webp') center/cover no-repeat;
  color: #fff;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.colaborar-shell::after {
  content: '✦';
  position: absolute;
  top: 32px;
  left: 40px;
  color: var(--color-primary);
  font-size: 1.4rem;
  pointer-events: none;
}
.colaborar-text h2 { color: #fff; margin-bottom: 16px; }
.colaborar-text h2 em { color: rgba(255,255,255,0.95); }
.colaborar-text p { color: rgba(255,255,255,0.9); font-size: 1.05rem; }
.colaborar-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 32px;
  position: relative;
  z-index: 2;
}
.colaborar-card .phone-lg {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.colaborar-card p { font-size: 0.9rem; color: var(--color-text-muted); margin-top: 6px; margin-bottom: 20px; }

@media (max-width: 900px) {
  .colaborar-shell { grid-template-columns: 1fr; padding: 40px 28px; }
}

/* ============================================================
   BLOG (contenedor claro + grid 3 cards)
   ============================================================ */
.blog { background: #fff; }
.blog-shell {
  background: var(--color-bg-alt);
  border-radius: 36px;
  padding: 80px 64px;
  max-width: none;
  width: 100%;
  margin: 0;
}
.blog-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 56px; }
.blog-head h2 { max-width: 540px; }
.blog-head p { color: var(--color-text-muted); max-width: 380px; font-size: 1rem; }
.blog-head .blog-cta { display: flex; gap: 10px; }

.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.post-card {
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform .35s, box-shadow .35s;
  display: block;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.post-card:hover .post-img img { transform: scale(1.06); }
.post-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,0.95);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.post-body { padding: 24px 26px 28px; }
.post-meta { font-size: 0.78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.12em; }
.post-body h3 { margin-top: 12px; font-size: 1.15rem; line-height: 1.3; font-weight: 500; }
.post-body .post-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
}

@media (max-width: 1200px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } .blog-shell { padding: 48px 24px; border-radius: var(--radius-xl); } }

/* ============================================================
   FAQ (tabs + acordeones 2 columnas)
   ============================================================ */
.faq { background: #fff; padding-top: 0; }
.faq-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
  align-items: start;
}
.faq-side { position: sticky; top: 120px; }
.faq-title {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.04;
  margin: 16px 0 0;
}
.faq-lead {
  margin-top: 24px;
  font-size: 1.02rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 440px;
}
.faq-contact { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; }
.faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  transition: background .25s, transform .25s, border-color .25s;
  max-width: max-content;
}
.faq-cta:hover { background: #fff; border-color: var(--color-primary); transform: translateY(-2px); }
.faq-cta-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.faq-cta-icon svg { width: 18px; height: 18px; }
.faq-cta-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-muted); }
.faq-cta-value { display: block; font-weight: 600; font-size: 1rem; color: var(--color-text); margin-top: 2px; }

.faq-stack { display: flex; flex-direction: column; }
.faq-row {
  border-top: 1px solid var(--color-border);
  transition: padding .35s;
}
.faq-stack > .faq-row:last-child { border-bottom: 1px solid var(--color-border); }
.faq-row summary {
  list-style: none;
  display: grid;
  grid-template-columns: 56px 1fr 44px;
  align-items: center;
  gap: 20px;
  padding: 26px 0;
  cursor: pointer;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-num {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  transition: color .3s;
}
.faq-q {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  transition: color .3s;
}
.faq-toggle {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  justify-self: end;
  transition: background .3s, color .3s, transform .3s, border-color .3s;
}
.faq-toggle svg { width: 18px; height: 18px; transition: transform .35s; }
.faq-row[open] { background: linear-gradient(180deg, transparent 0%, var(--color-bg-alt) 100%); }
.faq-row[open] .faq-num { color: var(--color-primary); }
.faq-row[open] .faq-q { color: var(--color-primary); }
.faq-row[open] .faq-toggle {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
}
.faq-row[open] .faq-toggle svg { transform: rotate(45deg); }
.faq-a {
  padding: 0 calc(56px + 20px) 28px;
  font-size: 0.98rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 720px;
}

@media (max-width: 960px) {
  .faq-grid { grid-template-columns: 1fr; gap: 48px; }
  .faq-side { position: static; }
}
@media (max-width: 540px) {
  .faq-row summary { grid-template-columns: 36px 1fr 36px; gap: 12px; padding: 20px 0; }
  .faq-toggle { width: 36px; height: 36px; }
  .faq-a { padding: 0 0 24px 48px; }
}

/* ============================================================
   CONTACTO FINAL (form en card con borde grueso)
   ============================================================ */
.contact { background: var(--color-bg-alt); padding-top: 72px; }
.contact-head { text-align: center; margin-bottom: 48px; }
.contact-head .serif-mail {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}
.contact-head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr 0.9fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: center;
}
.contact-side h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-text-muted); font-weight: 600; margin-bottom: 14px; }
.contact-side p, .contact-side a { font-size: 0.95rem; color: var(--color-text); display: block; line-height: 1.65; }
.contact-side a:hover { color: var(--color-primary); }

.form-card {
  background: #fff;
  border: 2px solid var(--color-bg-dark);
  border-radius: var(--radius-xl);
  padding: 36px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--color-text-muted);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: #fff;
  color: var(--color-text);
  transition: border-color .25s;
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); }
.form-group textarea { min-height: 120px; resize: vertical; }

.form-checks { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 22px; }
.form-checks label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; color: var(--color-text-muted); }
.form-checks input { margin-top: 3px; }

.form-submit { width: 100%; }

.contact-socials { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.contact-socials a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-full);
  background: #fff;
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background .25s, color .25s;
}
.contact-socials a:hover { background: var(--color-bg-dark); color: #fff; }
.contact-socials .ic { width: 22px; height: 22px; }

@media (max-width: 1000px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER editorial
   ============================================================ */
.site-footer {
  background: var(--color-bg-warm);
  padding: 0;
  color: var(--color-text);
}
.footer-shell {
  background: var(--color-bg-warm);
  padding: 96px 0 36px;
  width: 100%;
}
.footer-claim {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 0 48px;
  max-width: none;
  margin: 0 0 72px;
  flex-wrap: wrap;
}
.footer-claim h2 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 720px;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  max-width: none;
  margin: 0;
  padding: 0 48px 56px;
  border-bottom: 1px solid var(--color-border);
}
.footer-cols .footer-brand img { height: 88px; margin-bottom: 20px; }
.footer-cols .footer-brand p { font-size: 0.88rem; color: var(--color-text-muted); max-width: 240px; line-height: 1.55; }
.footer-cols h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}
.footer-cols ul { display: flex; flex-direction: column; gap: 10px; }
.footer-cols a { font-size: 0.92rem; color: var(--color-text); transition: color .25s; }
.footer-cols a:hover { color: var(--color-primary); }
.footer-bottom {
  max-width: none;
  margin: 28px 0 0;
  padding: 0 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.footer-bottom ul { display: flex; gap: 22px; }

@media (max-width: 1000px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-cols { grid-template-columns: 1fr; } }

/* ============================================================
   BOTÓN FLOTANTE WHATSAPP
   ============================================================ */
.whatsapp-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 200;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 36px rgba(0,176,226,0.45);
  transition: transform .3s ease, box-shadow .3s ease;
  animation: wa-pulse 2.4s ease-in-out infinite;
}
.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 20px 48px rgba(0,176,226,0.6);
}
.whatsapp-fab .icon { width: 40px; height: 40px; }
.whatsapp-fab svg { width: 100%; height: 100%; }

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 14px 36px rgba(0,176,226,0.45), 0 0 0 0 rgba(0,176,226,0.45); }
  50%      { box-shadow: 0 14px 36px rgba(0,176,226,0.45), 0 0 0 18px rgba(0,176,226,0); }
}

@media (max-width: 760px) {
  /* bottom 16px, no 88: los 88 reservaban sitio a .mobile-sticky, que se retiro. */
  .whatsapp-fab { width: 64px; height: 64px; right: 16px; bottom: 16px; }
  .whatsapp-fab .icon { width: 32px; height: 32px; }
}

/* ============================================================
   PÁGINAS INTERNAS — Hero, breadcrumb, benefits, coverage, modalities
   ============================================================ */

/* Hero interno */
.inner-hero { padding: 1rem 0 0; }
.inner-hero-shell {
  position: relative;
  width: 100%;
  padding: 0 1rem;
}
.inner-hero-card {
  position: relative;
  width: 100%;
  height: 620px;
  min-height: 560px;
  border-radius: 28px;
  overflow: hidden;
  background: #1D1D1B;
  isolation: isolate;
}
.inner-hero-card img.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transform: scale(1.02);
}
.inner-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29,29,27,0.25) 0%, rgba(29,29,27,0.15) 40%, rgba(29,29,27,0.7) 100%);
  z-index: 2;
}
.breadcrumb {
  position: absolute;
  top: 130px;
  left: 56px;
  z-index: 3;
  color: rgba(255,255,255,0.9);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.18);
}
.breadcrumb a, .breadcrumb span { color: inherit; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .sep { opacity: 0.5; }

.inner-hero-content {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 56px;
  z-index: 3;
  color: #fff;
  max-width: 920px;
}
.inner-hero-content h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5.4vw, 4.8rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.inner-hero-content h1 em {
  color: #fff;
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: inherit;
}

/* Sin cursiva en titulares de páginas internas */
body.inner-page h1 em,
body.inner-page h2 em,
body.inner-page h3 em,
body.inner-page h4 em {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: inherit;
}
.inner-hero-content p {
  color: rgba(255,255,255,0.88);
  font-size: 1.02rem;
  margin-top: 20px;
  max-width: 640px;
  line-height: 1.5;
}
.inner-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 28px;
}

@media (max-width: 900px) {
  .inner-hero-card { height: 560px; border-radius: 22px; }
  .inner-hero-content { left: 24px; right: 24px; bottom: 32px; }
  .breadcrumb { left: 24px; top: 110px; font-size: 0.72rem; padding: 6px 12px; }
}

/* Sección editorial interna (claim) */
.inner-claim {
  background: #fff;
  padding: 96px 24px;
  text-align: center;
}
.inner-claim-inner { max-width: 880px; margin: 0 auto; }
.inner-claim h2 {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.inner-claim p {
  margin-top: 24px;
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Bloque de beneficios */
.benefits {
  background: #fff;
  padding-bottom: 96px;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
}
.benefit-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(0,176,226,0.4); }
.benefit-ico {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.benefit-ico svg { width: 22px; height: 22px; }
.benefit-card h3 {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.benefit-card p { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.55; margin-top: 6px; }

@media (max-width: 1100px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefits-grid { grid-template-columns: 1fr; } }

/* Coberturas / Qué incluye */
.coverage {
  background: var(--color-bg-alt);
  padding: 96px 0;
}
.coverage .section-head { margin-bottom: 48px; }
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.coverage-grid li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.98rem;
  color: var(--color-text);
}
.coverage-grid li .check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
@media (max-width: 900px) { .coverage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .coverage-grid { grid-template-columns: 1fr; } }

/* Modalidades / Productos (cards horizontales) */
.modalities { background: #fff; padding: 96px 0; }
.modalities-grid {
  display: grid;
  gap: 18px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
}
.modalities-grid[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.modalities-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.mod-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.mod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(0,176,226,0.35); }
.mod-card.is-featured {
  background: var(--color-bg-dark);
  color: #fff;
  border-color: transparent;
  position: relative;
  overflow: hidden;
}
.mod-card.is-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.mod-card h3 { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }
.mod-card .mod-price-lg {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.mod-card .mod-price-lg small { font-size: 0.95rem; font-weight: 500; color: var(--color-text-muted); font-family: var(--font-body); }
.mod-card.is-featured .mod-price-lg small { color: rgba(255,255,255,0.65); }
.mod-card ul { display: flex; flex-direction: column; gap: 10px; }
.mod-card ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; line-height: 1.5; }
.mod-card ul li .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; margin-top: 8px; }
.mod-card .mod-cta { margin-top: auto; }
@media (max-width: 900px) {
  .modalities-grid[data-cols="2"], .modalities-grid[data-cols="3"] { grid-template-columns: 1fr; }
}

/* Tabla de modalidades (estilo carrusel) */
.modal-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
}
.modal-pill {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 22px;
  transition: transform .25s, border-color .25s;
}
.modal-pill:hover { transform: translateY(-3px); border-color: var(--color-primary); }
.modal-pill .mp-name { font-weight: 500; font-size: 0.98rem; }
.modal-pill .mp-price { font-size: 1.45rem; font-weight: 500; margin-top: 8px; letter-spacing: -0.02em; }
.modal-pill .mp-price small { font-size: 0.78rem; font-weight: 400; color: var(--color-text-muted); display: block; margin-top: 4px; }

/* Promo block / pricing-card reutiliza existente */

/* CTA final */
.final-cta {
  background: #fff;
  padding: 96px 0 120px;
}
.final-cta-shell {
  background: var(--color-bg-dark);
  border-radius: 32px;
  padding: 80px 64px;
  max-width: 1480px;
  margin: 0 auto;
  color: #fff;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.final-cta-shell::before {
  content: '✦';
  position: absolute;
  top: 30px;
  right: 36px;
  color: var(--color-primary);
  font-size: 1.6rem;
}
.final-cta-shell h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); }
.final-cta-shell h2 em { color: #fff; }
.final-cta-shell p { color: rgba(255,255,255,0.78); margin-top: 16px; font-size: 1.02rem; }
.final-cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.final-cta-actions .btn { width: 100%; }
@media (max-width: 900px) { .final-cta-shell { grid-template-columns: 1fr; padding: 56px 28px; } }

/* Servicios relacionados */
.related-services { background: var(--color-bg-warm); padding: 96px 0; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
}
.related-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .3s, box-shadow .3s;
}
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.related-card .ric {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.related-card h3 { font-size: 1.05rem; font-weight: 500; }
.related-card .rilink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  margin-top: auto;
  color: var(--color-primary);
}
@media (max-width: 1100px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }

/* Campaña salud 2026 — inset card */
.campana-salud-inset {
  background: #fff;
  padding: 0 0 96px;
}
.campana-salud-inset .campana-shell { max-width: 1480px; margin: 0 auto; }

/* Grid asimétrico inner (reutiliza featured-grid pero con padding) */

/* ============================================================
   BLOG · estilos específicos
   ============================================================ */
.blog-featured { background: #fff; padding: 96px 0; }
.blog-featured-shell {
  background: var(--color-bg-alt);
  border-radius: 36px;
  padding: 56px;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.blog-featured-shell .feat-img-block {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.blog-featured-shell .feat-img-block img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.blog-featured-shell:hover .feat-img-block img { transform: scale(1.04); }
.blog-featured-shell .feat-cat {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: #fff;
}
.blog-featured-shell h2 {
  margin-top: 18px;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.1;
}
.blog-featured-shell p { margin-top: 18px; color: var(--color-text-muted); font-size: 1rem; line-height: 1.6; }
.blog-featured-shell .feat-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-weight: 600;
  font-size: 0.95rem;
}
.blog-featured-shell .feat-link span {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-bg-dark);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
}
.blog-featured-shell:hover .feat-link span { transform: rotate(-45deg); }
@media (max-width: 900px) {
  .blog-featured-shell { grid-template-columns: 1fr; padding: 36px 28px; }
}

/* Filtros de categorías */
.blog-filters {
  background: var(--color-bg-alt);
  padding: 64px 0 32px;
}
.blog-filters-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.blog-filters .eyebrow { margin-bottom: 22px; display: block; }
.blog-filters-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.blog-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  transition: background .3s, color .3s, transform .25s, border-color .3s;
  cursor: pointer;
}
.blog-filter-pill:hover { transform: translateY(-2px); background: var(--gradient-primary); color: #fff; border-color: transparent; }
.blog-filter-pill.is-active { background: var(--color-bg-dark); color: #fff; border-color: var(--color-bg-dark); }
@media (max-width: 700px) {
  .blog-filters-pills { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
  .blog-filter-pill { flex-shrink: 0; }
}

/* Grid amplio de artículos */
.blog-articles {
  background: var(--color-bg-alt);
  padding: 32px 0 96px;
}
.blog-articles-shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
}
.blog-articles-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 48px; }
.blog-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1000px) { .blog-articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-articles-grid { grid-template-columns: 1fr; } }

.article-card {
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform .35s, box-shadow .35s;
  display: flex;
  flex-direction: column;
}
.article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.article-card .post-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.article-card .post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.article-card:hover .post-img img { transform: scale(1.06); }
.article-card .post-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,0.95);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.article-card .post-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.article-card h3 { font-size: 1.1rem; line-height: 1.3; font-weight: 500; }
.article-card .post-excerpt { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.55; }
.article-card .post-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
}
.article-card .post-link svg { transition: transform .3s; }
.article-card:hover .post-link svg { transform: translateX(3px); }

/* Bloques temáticos */
.blog-topics { background: #fff; padding: 96px 0; }
.blog-topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
}
.topic-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px;
  color: #fff;
  isolation: isolate;
}
.topic-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s ease; }
.topic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(29,29,27,0.1) 30%, rgba(29,29,27,0.78) 100%);
}
.topic-card:hover img { transform: scale(1.05); }
.topic-card .topic-eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85); font-weight: 600; }
.topic-card h3 { margin-top: 12px; font-size: 1.5rem; color: #fff; }
.topic-card ul { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.topic-card ul li {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.45;
  display: flex;
  gap: 8px;
}
.topic-card ul li::before { content: '·'; color: var(--color-primary); flex-shrink: 0; }
@media (max-width: 1000px) { .blog-topics-grid { grid-template-columns: 1fr; } }

/* Paginación */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  flex-wrap: wrap;
}
.pagination .pag-info { width: 100%; text-align: center; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 16px; }
.pagination a, .pagination span.pag-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  background: #fff;
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  transition: background .3s, color .3s, transform .25s, border-color .3s;
}
.pagination a:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; transform: translateY(-2px); }
.pagination .pag-active { background: var(--color-bg-dark); color: #fff; border-color: var(--color-bg-dark); }
.pagination .pag-dots { background: transparent; border: 0; color: var(--color-text-muted); }

/* Newsletter inline */
.newsletter-block {
  background: #fff;
  padding: 96px 0;
}
.newsletter-shell {
  background: var(--color-bg-alt);
  border-radius: 32px;
  padding: 64px;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.newsletter-shell form { display: flex; flex-direction: column; gap: 14px; }
.newsletter-shell input[type="text"], .newsletter-shell input[type="email"] {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: #fff;
}
.newsletter-shell input:focus { outline: none; border-color: var(--color-primary); }
.newsletter-shell label.check-mini { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; color: var(--color-text-muted); }
@media (max-width: 800px) { .newsletter-shell { grid-template-columns: 1fr; padding: 40px 28px; } }

/* ============================================================
   ARTÍCULO INDIVIDUAL · Plantilla editorial
   ============================================================ */
.article-hero {
  padding: 1rem 0 0;
}
.article-hero-shell {
  width: 100%;
  padding: 0 1rem;
}
.article-hero-card {
  position: relative;
  width: 100%;
  height: 480px;
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  background: #1D1D1B;
  isolation: isolate;
}
.article-hero-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transform: scale(1.02);
}
.article-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29,29,27,0.2) 0%, rgba(29,29,27,0.55) 60%, rgba(29,29,27,0.85) 100%);
  z-index: 2;
}
.article-hero-content {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 56px;
  z-index: 3;
  color: #fff;
  max-width: 940px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.article-hero-content .post-cat {
  position: static;
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: #fff;
  margin: 0;
}
.article-hero-content h1 {
  color: #fff;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.article-hero-content .post-meta-bar {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.04em;
}
.article-hero-content .post-meta-bar .sep { opacity: 0.45; }

@media (max-width: 900px) {
  .article-hero-card { height: 420px; border-radius: 22px; }
  .article-hero-content { left: 24px; right: 24px; bottom: 32px; }
}

/* Cuerpo editorial */
.article-body {
  background: #fff;
  padding: 96px 0;
}
.article-body-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  gap: 80px;
}
.article-content {
  font-size: 1.08rem;
  line-height: 1.78;
  color: var(--color-text);
}
.article-content > .lead {
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--color-text);
  font-weight: 500;
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}
.article-content h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  margin: 48px 0 18px;
  letter-spacing: -0.015em;
}
.article-content h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 36px 0 14px;
}
.article-content p { margin-bottom: 18px; }
.article-content ul, .article-content ol { margin: 0 0 24px 24px; }
.article-content ul li, .article-content ol li { margin-bottom: 10px; line-height: 1.65; }
.article-content blockquote {
  margin: 36px 0;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--color-text);
}
.article-content .article-cta {
  margin-top: 48px;
  padding: 36px;
  border-radius: var(--radius-xl);
  background: var(--color-bg-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.article-content .article-cta h3 { color: #fff; margin: 0; font-size: 1.4rem; }
.article-content .article-cta p { color: rgba(255,255,255,0.78); margin: 0; }
.article-content .article-cta .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.article-aside {
  position: sticky;
  top: 32px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.article-toc {
  background: var(--color-bg-alt);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.article-toc h4 {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}
.article-toc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.article-toc ol li a {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  transition: color .25s, padding-left .25s;
}
.article-toc ol li a:hover { color: var(--color-primary); padding-left: 6px; }

.article-share {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  padding: 28px;
}
.article-share h4 {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}
.article-share-actions { display: flex; gap: 10px; }
.article-share-actions a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: background .3s, color .3s, transform .25s;
}
.article-share-actions a:hover { background: var(--gradient-primary); color: #fff; transform: translateY(-2px); }

@media (max-width: 1000px) {
  .article-body-shell { grid-template-columns: 1fr; gap: 48px; }
  .article-aside { position: static; }
}

/* Sección de artículos relacionados al final */
.article-related {
  background: var(--color-bg-alt);
  padding: 96px 0;
}
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 900px) { .article-related-grid { grid-template-columns: 1fr; } }

/* Helpers para alternar fondos en páginas internas */
section.bg-warm { background-color: var(--color-bg-warm) !important; }
section.bg-alt  { background-color: var(--color-bg-alt) !important; }
section.bg-white { background-color: #fff !important; }

/* ============================================================
   TOAST · Aviso al copiar el número en escritorio
   ============================================================ */
.tel-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 20px);
  z-index: 9999;
  background: var(--color-bg-dark);
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: 0 18px 48px rgba(29,29,27,0.32);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  max-width: calc(100% - 32px);
  text-align: center;
}
.tel-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   STICKY CTAs en móvil
   ============================================================ */
.mobile-sticky {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 100;
  gap: 8px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 8px;
  box-shadow: 0 12px 32px rgba(29,29,27,0.18);
}
.mobile-sticky .btn { flex: 1; padding: 12px 16px; font-size: 0.82rem; }
@media (max-width: 760px) { .mobile-sticky { display: flex; } }

/* ============================================================
   Stickers / decoración
   ============================================================ */
.sticker { position: absolute; pointer-events: none; }

/* Icon wrapper para inline SVG */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
.icon svg { width: 100%; height: 100%; }

/* ============================================================
   BLOQUE HERMES — markup que emite el motor, no el proyecto.
   NO borrar al retocar el diseño: estas clases salen de
   hermes/lib/consent-js.php y de hermes/init.php (honeypot), y
   de los partials de contrato (paginación, formulario, tarjetas).
   Estilado con los tokens del boceto.
   ============================================================ */

/* Azul de marca oscurecido lo justo para pasar AA (4.91:1 contra blanco, en ambos
   sentidos). El --color-primary del boceto (#00B0E2) se queda a 2.53:1, que no llega
   a los 4.5:1 que exige WCAG AA para texto. Se usa SOLO donde hay texto encima o
   debajo; el azul de marca sigue intacto para fondos y adornos. */
:root { --color-primary-aa: #007A9E; }

/* Honeypot del formulario: fuera de pantalla, NO display:none (algunos bots
   lo detectan). Si esto se pierde, el campo se ve, la gente lo rellena y
   Hermes descarta el lead: el formulario deja de funcionar en silencio. */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* Banner de cookies (clases documentadas en consent.js).
   OJO con los colores: el boceto trae `p { color: var(--color-text); }`, un selector de
   tipo que GANA a la herencia. Por eso aquí se pone color explícito en cada elemento en
   vez de confiar en heredarlo del contenedor: sin esto el texto sale negro sobre el
   fondo del banner y no se lee nada. */
.cookie-banner {
  position: fixed;
  inset-inline: var(--space-2);
  bottom: var(--space-2);
  z-index: 200;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--font-body);
  box-shadow: var(--shadow-lg);
}
.cookie-banner__text {
  margin: 0;
  max-width: 46rem;
  font-size: .95rem;
  color: var(--color-text);          /* explícito: ver nota de arriba */
  line-height: 1.5;
}
.cookie-banner__text a {
  color: var(--color-primary-aa);
  text-decoration: underline;
}
.cookie-banner__text a:hover { color: #006480; }
.cookie-banner__actions { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.cookie-banner__btn {
  padding: .6em 1.5em;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  background: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 600;
  transition: background .2s, color .2s, border-color .2s;
}
.cookie-banner__btn--reject:hover {
  background: var(--color-bg-dark);
  color: #fff;
  border-color: var(--color-bg-dark);
}
.cookie-banner__btn--accept {
  background: var(--color-primary-aa);
  border-color: var(--color-primary-aa);
  color: #fff;
}
.cookie-banner__btn--accept:hover { background: #006480; border-color: #006480; color: #fff; }
.cookie-banner__btn:focus-visible { outline: 3px solid var(--color-primary-aa); outline-offset: 2px; }

/* Aviso de error del formulario (?error=1) */
.form-error {
  background: #fdecea; border: 1px solid #e5b1aa; color: #92322a;
  padding: .8em 1.1em; border-radius: var(--radius-sm); margin-bottom: var(--space-3);
}

/* Paginación de los listados de colección */
.pagination ul {
  display: flex; gap: .4rem; list-style: none; padding: 0;
  justify-content: center; flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-block; min-width: 2.4em; text-align: center;
  padding: .4em .7em; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text);
}
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination span[aria-current="page"] {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
  font-weight: 600;
}
.pagination__gap { align-self: end; border: 0; }

/* Utilidad de accesibilidad usada por los partials del proyecto */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ============================================================
   AÑADIDO AL BOCETO — menú móvil.
   El boceto muestra .header-burger por debajo de 1100px pero no
   define ningún estado abierto (.header-nav queda display:none),
   así que el menú móvil no existía. Esto lo implementa; el toggle
   lo hace assets/js/main.js.
   ============================================================ */
@media (max-width: 1100px) {
  .header-nav.is-open {
    display: block;
    position: absolute;
    inset-inline: 12px;
    top: calc(100% + 10px);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    max-height: min(70vh, 520px);
    overflow-y: auto;
  }
  .header-nav.is-open .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .header-nav.is-open .nav-list > li { border-bottom: 1px solid var(--color-border); }
  .header-nav.is-open .nav-list > li:last-child { border-bottom: 0; }
  .header-nav.is-open a { display: block; padding: 14px 12px; }
  /* El desplegable se despliega en línea: nada de hover en táctil.
     OJO con los tres selectores: el del boceto,
     `.header-nav .has-dropdown:hover > .dropdown` (0-4-0), aplica
     `transform: translate(-50%, 0)` para centrar la tarjeta bajo su elemento en
     escritorio, donde va en position:absolute. Aquí va en static y a todo el ancho
     del panel, así que ese -50% la empujaba media anchura FUERA por la izquierda y
     tapaba las subcategorías en cuanto pasabas el ratón. Anularlo con
     `.header-nav.is-open .dropdown` (0-3-0) no bastaba: perdía por especificidad.
     Por eso se repiten aquí los estados :hover y :focus-within. */
  .header-nav.is-open .has-dropdown::after { content: none; }
  /* Acordeón: CERRADO de salida y se abre al pulsar «Servicios» (main.js pone
     .is-abierto en el <li>). El display:none gana a la opacidad y la visibilidad que
     pone la regla de :hover del boceto, así que pasar el ratón por encima ya no lo
     despliega: en móvil solo lo abre el clic. */
  .header-nav.is-open .dropdown,
  .header-nav.is-open .has-dropdown:hover > .dropdown,
  .header-nav.is-open .has-dropdown:focus-within > .dropdown {
    display: none;
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; padding: 0 0 var(--space-1) var(--space-2);
    min-width: 0; pointer-events: auto;
  }
  .header-nav.is-open .has-dropdown.is-abierto > .dropdown { display: block; }
  /* El boceto gira el caret al pasar el ratón; aquí debe girar al ABRIR, o indicaría
     un estado que no es. */
  .header-nav.is-open .has-dropdown:hover > a .caret,
  .header-nav.is-open .has-dropdown:focus-within > a .caret { transform: none; }
  .header-nav.is-open .has-dropdown.is-abierto > a .caret { transform: rotate(180deg); }
  .header-nav.is-open .dropdown a { padding: 10px 12px; font-size: .92rem; }
  .header-inner { position: relative; }
}

/* Respeto por quien pide menos movimiento: el boceto no lo contemplaba y
   tiene el ciclo infinito del hero, el pulso de campaña y el del WhatsApp. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-slider .hero-img { opacity: 1; }
  .hero-slider .hero-img:not(:first-child) { display: none; }
}

/* ============================================================
   AÑADIDO AL BOCETO — páginas que el boceto no cubre.
   Legales, 404, gracias, no-enviado y buscar no existen en el
   boceto, y este no define ni <main> ni un contenedor de prosa
   a una columna (.article-body-shell es una rejilla de dos).
   Se reutiliza la tipografía de .article-content.
   ============================================================ */
.legal-shell {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}
.legal-shell--centrado { text-align: center; }
.legal-shell--centrado .article-content > * { margin-inline: auto; }

/* Metadatos de vigencia del documento legal */
.legal-meta {
  font-size: .92rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Ficha del titular / responsable, y tabla de cookies */
.legal-datos {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-block: var(--space-3);
}
.legal-tabla { width: 100%; border-collapse: collapse; margin-block: var(--space-3); font-size: .95rem; }
.legal-tabla th, .legal-tabla td { text-align: left; padding: .7em .8em; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.legal-tabla th { background: var(--color-bg-alt); font-weight: 600; }
.legal-tabla-wrap { overflow-x: auto; }

/* Aviso de que el texto es una plantilla pendiente de revisión jurídica */
.legal-revisar {
  background: #fff8e1;
  border: 1px solid #e6c96b;
  border-radius: var(--radius-sm);
  padding: .9em 1.1em;
  margin-bottom: var(--space-4);
  font-size: .93rem;
}

/* ============================================================
   AÑADIDO AL BOCETO — cabecera en móvil.
   El boceto deja que el flex encoja el logo y el burger, y por debajo de
   1100px se notaba: el logotipo (proporción 2.08) se pintaba a 1.50, o sea
   comprimido y deformado, y el burger, que es un círculo de 44px, quedaba
   en un óvalo de 32. La causa es que .header-logo es un item de flex y se
   encoge, y el <img> de dentro está limitado por max-width:100%.
   Se fija flex-shrink:0 en los dos y se reduce el CTA para que quepan sin
   apretarse.
   ============================================================ */
@media (max-width: 1100px) {
  .header-inner { gap: 12px; }
  .header-logo,
  .header-burger { flex-shrink: 0; }
  .header-logo img { height: 44px; }
  /* En escritorio es .header-nav quien empuja todo a la derecha con margin-left:auto,
     pero aqui el nav esta oculto y el CTA con el burger se quedaban pegados al logo
     dejando 69px muertos a la derecha. El auto los manda al borde.
     Hace falta repetir el selector compuesto del boceto: su
     `.header-phone + .header-cta { margin-left: -20px }` es 0-2-0 y gana a un
     `.header-cta` suelto por especificidad, no por orden. Ese margen negativo
     arrima el CTA al telefono en escritorio, pero aqui el telefono esta oculto y
     solo tiraba el boton sobre el logo. */
  .header-phone + .header-cta,
  .header-cta { margin-left: auto; padding: 10px 16px; font-size: .8rem; }
}
/* A 375px la barra tiene 291px utiles y el contenido fijo (CTA 84 + burger 44 + huecos)
   ocupa 152, asi que el logo puede crecer hasta 139px de ancho: a 44px de alto se queda
   en 91 y se lee. No hace falta achicarlo mas. */
@media (max-width: 480px) {
  .header-inner { gap: 8px; padding-inline: 10px; }
  .header-cta { padding: 9px 14px; font-size: .78rem; }
}

/* ============================================================
   AÑADIDO AL BOCETO — botón «subir al inicio».
   Solo en móvil y apilado encima del WhatsApp: el de WhatsApp
   ocupa 64px a 16px del borde, así que este se coloca a 90px de
   abajo y centrado respecto a él (16 + (64-52)/2 = 22px).
   Oculto de salida y revelado por main.js al bajar, para que no
   estorbe cuando ya estás arriba ni quede muerto si no hay JS.
   Va en oscuro, no en el cian de marca, para que se lea como la
   acción secundaria que es y no compita con el WhatsApp.
   ============================================================ */
.subir-fab {
  display: none;
  position: fixed;
  right: 22px;
  bottom: 96px;   /* 16px de hueco sobre el FAB de WhatsApp (16 + 64 de alto) */
  z-index: 199;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg-dark);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(29, 29, 27, .32);
  transition: opacity .25s ease, transform .25s ease, background .25s ease;
}
.subir-fab .icon { width: 22px; height: 22px; display: block; }
.subir-fab .icon svg { width: 100%; height: 100%; }
.subir-fab:hover { background: var(--color-primary-aa); }
.subir-fab:focus-visible { outline: 3px solid var(--color-primary-aa); outline-offset: 3px; }

@media (max-width: 760px) {
  .subir-fab {
    display: inline-flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
  }
  .subir-fab.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}

/* ============================================================
   AÑADIDO AL BOCETO — los asteriscos decorativos, en móvil.
   Los ✦ de .campana-shell y .pricing-card son pseudo-elementos con posición
   (bottom/left 30/36px) pensada para el padding de escritorio,
   80x72px. A partir de 960px el boceto baja ese padding a 48x28,
   pero deja el asterisco donde estaba: con 25,6px de alto ocupaba
   hasta 61px del fondo cuando el texto ya empieza a 48px, así que
   se le montaba encima. Aquí se recogen dentro del padding y se
   achican, para que sigan estando sin pisar nada.
   ============================================================ */
@media (max-width: 960px) {
  .campana-shell::before,
  .pricing-card::before {
    top: 8px;
    right: 14px;
    font-size: 1.05rem;
  }
  .campana-shell::after,
  .pricing-card::after {
    bottom: 8px;
    left: 14px;
    font-size: 1.05rem;
  }
}

/* ============================================================
   AÑADIDO AL BOCETO — rejillas de 3 tarjetas.
   .benefits-grid es de 4 columnas por diseño, y en las secciones
   de 3 tarjetas el boceto lo forzaba con un style EN LÍNEA. Un
   estilo en línea gana a cualquier media query, así que esas
   rejillas se quedaban en 3 columnas también en móvil, con las
   tarjetas estrujadas. Esto es un modificador que hace lo mismo
   en escritorio pero trae su propia escalera responsive.
   (En promociones el style en línea era además redundante: la base
   de .campana-grid ya es de 3 columnas y solo rompía su breakpoint.
   Allí se ha quitado sin más.)
   ============================================================ */
.benefits-grid--tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .benefits-grid--tres { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .benefits-grid--tres { grid-template-columns: 1fr; } }

/* ============================================================
   AÑADIDO AL BOCETO — rejillas que el boceto declaraba en línea.
   El boceto define varias rejillas con un style en línea y columnas
   fijas, sin ninguna regla responsive. Y un estilo en línea gana a
   cualquier media query, así que en móvil seguían con 2, 3 o 4
   columnas y las tarjetas se salían por la derecha.
   El truco aquí: el ratio se queda en línea, pero en una custom
   property (--cols). Así no compite con la media query, que toca
   grid-template-columns directamente y por tanto sí manda.
   ============================================================ */
.rejilla-2,
.rejilla-n {
  display: grid;
  grid-template-columns: var(--cols, 1fr);
}
/* Dos columnas: aguantan hasta la tablet y luego se apilan. */
@media (max-width: 860px) {
  .rejilla-2 { grid-template-columns: 1fr; }
}
/* Tres o cuatro: pasan por dos antes de apilarse. */
@media (max-width: 1100px) {
  .rejilla-n { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .rejilla-n { grid-template-columns: 1fr; }
}

/* ============================================================
   AÑADIDO AL BOCETO — píldoras de filtro del blog en móvil.
   Por debajo de 700px el boceto las pone en fila con
   flex-wrap:nowrap + overflow-x:auto, o sea un carrusel. Pero va
   dentro de .blog-filters-inner, que tiene 32px de padding, y sin
   ninguna pista de que se desliza: parece que están cortadas. Con
   8 categorías la mayoría quedaban fuera de la pantalla.
   Aquí se dejan envolver en varias filas: todas visibles de un
   vistazo, sin contenido escondido y alcanzables con el teclado.
   ============================================================ */
@media (max-width: 700px) {
  .blog-filters-pills {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    padding-bottom: 0;
  }
  .blog-filter-pill {
    font-size: .82rem;
    padding: 8px 14px;
  }
}

/* ============================================================
   AÑADIDO AL BOCETO — botones con texto largo en pantallas estrechas.
   .btn lleva white-space:nowrap, así que un botón con etiqueta larga
   («Consultar si mi seguro incluye…») no puede encogerse: su ancho
   mínimo empuja al contenedor más allá de la pantalla. Con rejillas
   de por medio, `1fr` es en realidad minmax(auto, 1fr) y ese mínimo
   automático es el del contenido, así que la columna acababa midiendo
   354px dentro de un bloque de 326. Era la causa de que se salieran
   por la derecha las tarjetas de campaña, «Cobertura promocional» y
   «Calcula tus puntos».
   Dejando que el texto envuelva, el botón ya puede encogerse.
   ============================================================ */
@media (max-width: 700px) {
  .btn {
    white-space: normal;
    text-align: center;
    padding: 14px 22px;
  }
}

/* ============================================================
   AÑADIDO AL BOCETO — pie legal en pantallas muy estrechas.
   `.footer-bottom ul` es un flex sin wrap con los tres enlaces
   legales más el botón de configurar cookies. A 320px la fila no
   cabía y se salía 11px por la derecha, en todas las páginas.
   El padre tiene además 48px de padding lateral, mucho para ese
   ancho.
   ============================================================ */
@media (max-width: 560px) {
  .footer-bottom { padding: 0 24px; }
  .footer-bottom ul {
    flex-wrap: wrap;
    gap: 10px 18px;
  }
}

/* ============================================================
   AÑADIDO AL BOCETO — «Calcula tus puntos» a 320-360px.
   `.colaborar-shell` pasa a una columna en el bloque de 900px,
   pero `1fr` es minmax(auto, 1fr): el mínimo automático es el
   min-content del elemento más ancho. Ese era `.colaborar-card`
   con sus 32px de padding a cada lado más la palabra
   «Funcionalidad» a 1.6rem (167px) = 231px, dentro de una caja de
   contenido de 185px. Como el shell tiene overflow:hidden, no se
   salía: recortaba 46px de texto y del botón.
   minmax(0, 1fr) permite que la columna baje del min-content, y
   con menos padding y el titular fluido (ver pages/promociones.php)
   ya no hace falta recortar nada.
   ============================================================ */
@media (max-width: 700px) {
  .colaborar-shell { grid-template-columns: minmax(0, 1fr); }
  .colaborar-card { padding: 24px 20px; }
  .colaborar-card .phone-lg { overflow-wrap: break-word; }
}

/* ============================================================
   AÑADIDO AL BOCETO — palabras largas en los titulares del hero.
   Red de seguridad: un h1 sin espacios (un slug de categoría que
   no existe, una búsqueda pegada) no puede partirse y desborda su
   tarjeta, que va con overflow:hidden y lo recorta. A 320px un
   slug de 16 caracteres se comía 66px.
   ============================================================ */
.inner-hero-card h1,
.article-hero-card h1,
.hero-card h1,
.blog-articles-head h2 {
  overflow-wrap: break-word;
}

/* ============================================================
   AÑADIDO AL BOCETO — el logotipo del pie, sin deformar.
   El boceto le fija `height: 88px` y deja el ancho al atributo
   del <img>. Cuando la columna del pie es más estrecha que el
   logo (a 1024px mide 166px y el logo pide 183px), el
   `max-width: 100%` del reset recorta el ancho pero el alto
   sigue clavado en 88px: el logo salía aplastado un 9%.
   Con object-fit el contenido mantiene su proporción dentro de
   la caja, y se alinea a la izquierda como el resto de la
   columna. El fichero es 1200x578 (proporción 2.076), así que
   los atributos width/height del <img> pasan de 180x48 —que era
   una proporción inventada— a 180x87.
   ============================================================ */
.footer-cols .footer-brand img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 88px;
  object-fit: contain;
  object-position: left center;
}

/* ============================================================
   AÑADIDO AL BOCETO — área de pulsación de los enlaces.
   `.feat-link`, `.campana-link` y los teléfonos y correos de
   `.contact-side` y `.benefit-card` miden 23-25px de alto: justo
   por debajo de los 24x24px que exige la WCAG 2.2 (2.5.8), y
   demasiado apretados para el dedo cuando van apilados.
   El alto mínimo base los pone en regla en todas las anchuras;
   en pantallas táctiles sube a 32px, que es lo cómodo de verdad.
   Fallar la pulsación en un teléfono o un correo es perder la
   llamada, así que es el sitio donde menos margen hay.
   El `display` solo se cambia en móvil: en escritorio
   `.feat-link` ocupa el ancho de su tarjeta (873px) y pasarlo a
   inline-flex lo encogería.
   ============================================================ */
.feat-link,
.campana-link,
.contact-side a:not(.btn),
.benefit-card a:not(.btn) {
  min-height: 24px;
}

@media (max-width: 900px) {
  .feat-link,
  .campana-link,
  .contact-side a:not(.btn),
  .benefit-card a:not(.btn) {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   AÑADIDO AL BOCETO — el paso de 2 columnas que le falta a los
   artículos relacionados.
   `.article-related-grid` salta de 3 columnas a 1 en el mismo
   corte de 900px, sin escalón intermedio. En tableta y en móvil
   apaisado las tres tarjetas quedaban en bloques de 819px de
   ancho, fuera de sintonía con el resto del sitio: `.blog-grid`,
   `.benefits-grid`, `.coverage-grid`, `.otros-grid` y
   `.explore-grid` bajan todas por 2 columnas antes de apilarse.
   Aquí se sigue esa misma escalera.
   ============================================================ */
@media (max-width: 900px) {
  .article-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .article-related-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   AÑADIDO AL BOCETO — publicidad de subvenciones y sellos.
   Son obligaciones de los programas, no adorno, así que el
   texto va entero y legible; pero sin robarle el pie al resto,
   en un bloque discreto sobre la línea legal y tras un filete.
   La tira de logos mide 1375x107 y el sello 325x373: sin tope
   de ancho la tira se comería el pie entero, y sin height:auto
   el alto de los atributos width/height deformaría a los dos.
   ============================================================ */
.footer-fondos {
  max-width: none;
  margin: 32px 0 0;
  padding: 24px 48px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.footer-fondos-aviso {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.footer-fondos-aviso img {
  flex-shrink: 0;
  width: 56px;
  height: auto;
  margin-top: 2px;
}
.footer-fondos p {
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.footer-fondos-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 32px;
}
.footer-fondos-tira {
  width: 100%;
  max-width: 640px;
  height: auto;
}
.footer-fondos-sello {
  width: 78px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .footer-fondos {
    padding: 20px 24px 0;
    gap: 18px;
  }
  .footer-fondos-aviso { gap: 14px; }
  .footer-fondos-aviso img { width: 44px; }
  .footer-fondos-sello { width: 64px; }
}

/* ============================================================
   AÑADIDO AL BOCETO — el titular de precios, en una línea solo
   cuando cabe.
   El h2 y el subtítulo de «Planes y precios» llevaban
   `white-space: nowrap` EN LÍNEA. En escritorio es lo buscado
   —la frase entera en un renglón— pero en móvil el subtítulo
   medía 650px dentro de una caja de 311: el documento declaraba
   682px de scroll a 375px de ancho, que es el desplazamiento
   lateral que se veía en el móvil.
   Un estilo en línea no lo puede corregir ninguna media query,
   así que el nowrap sale del HTML y se aplica desde aquí solo a
   partir de 900px, que es donde la frase cabe de verdad.
   ============================================================ */
@media (min-width: 900px) {
  .pricing-head h2,
  .pricing-head .section-subtitle {
    white-space: nowrap;
  }
}

/* ============================================================
   AÑADIDO AL BOCETO — el aviso de cookies, sin nada encima.
   El banner y el FAB de WhatsApp compartían `z-index: 200` y,
   al ir el FAB después en el DOM, se pintaba encima: en móvil
   el círculo de WhatsApp caía sobre la esquina del aviso y le
   comía el borde derecho al botón «Aceptar» (el botón llegaba
   a x=298 y el FAB empezaba en x=295). Se veía como si el aviso
   estuviera cortado, y la insignia de reCAPTCHA se sumaba.
   Que el botón de aceptar quede tapado no es solo estética: el
   consentimiento tiene que poder darse y rechazarse con la
   misma facilidad.
   consent-js.php crea el banner y lo quita del DOM al elegir,
   así que `:has()` basta para apartar los flotantes justo
   mientras está en pantalla, sin JavaScript del proyecto.
   ============================================================ */
.cookie-banner {
  z-index: 300;   /* por encima de los flotantes (200) y de la insignia */
}
body:has(.cookie-banner) .whatsapp-fab,
body:has(.cookie-banner) .subir-fab {
  display: none;
}