/* Estilos que la PORTADA no usa.
   Se separaron porque el navegador tiene que emparejar cada regla contra
   cada elemento de la página, y en la home eso costaba 300 ms de cálculo de
   estilos con más de la mitad de las reglas sin aplicar a nada.

   Lo carga base.html POR DEFECTO: cualquier plantilla nueva se lo lleva sin
   hacer nada. Solo la portada lo anula, con un bloque vacío. Si algún día la
   portada necesita algo de aquí, se quita ese bloque de inicio.html y ya. */

/* --- Team --- */
.team-card {
  text-align: center;
  padding: 2rem 1.5rem;
}
.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
}
.team-name { font-size: 1.05rem; margin-bottom: .25rem; }
.team-role { font-size: .85rem; color: var(--text-muted); }

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--text-muted);
  padding: 1rem 0;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb-sep { color: var(--text-light); }

/* Breadcrumb sobre fondos oscuros (inner-hero, page-hero) */
.inner-hero-content .breadcrumb,
.page-hero .breadcrumb { color: rgba(255,255,255,.75); padding: 0; }
.inner-hero-content .breadcrumb a,
.page-hero .breadcrumb a { color: rgba(255,255,255,.75); }
.inner-hero-content .breadcrumb a:hover,
.page-hero .breadcrumb a:hover { color: var(--white); }
.inner-hero-content .breadcrumb-sep,
.page-hero .breadcrumb-sep { color: rgba(255,255,255,.4); }

/* --- Carrito / Checkout --- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  text-align: left;
  padding: .75rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.cart-table td {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.cart-item-info { display: flex; align-items: center; gap: 1rem; }
.cart-item-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.cart-item-name { font-weight: 600; font-size: .95rem; color: var(--navy); }
.cart-item-meta { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }
.cart-qty {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 1.1rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
}
.qty-btn:hover { background: var(--border); }
.qty-val { font-weight: 600; min-width: 24px; text-align: center; }
.cart-remove {
  background: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  padding: .25rem;
  border-radius: 4px;
  transition: color var(--transition);
}
.cart-remove:hover { color: #e53e3e; }
.cart-price { font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.order-summary {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.75rem;
}
.order-summary h3 { margin-bottom: 1.25rem; font-size: 1.1rem; }
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 0;
  font-size: .9rem;
  border-bottom: 1px solid var(--border);
}
.summary-row:last-child { border-bottom: none; }
.summary-total {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  padding-top: .75rem;
}
.summary-total span { color: var(--navy); font-size: 1.35rem; }

/* --- Forms --- */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .4rem;
}
.form-label .req { color: #e53e3e; margin-left: .2rem; }
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(74,124,237,.12);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-hint { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; }

/* --- Page hero (interno) --- */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 3.5rem 0;
  color: var(--white);
}
.page-hero h1 { color: var(--white); margin-bottom: .5rem; }
.page-hero p { color: rgba(255,255,255,.7); font-size: 1.1rem; }

/* --- Inner hero — páginas interiores con visual decorativo --- */
.inner-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 5rem 0 4rem;
  color: var(--white);
  overflow: hidden;
  position: relative;
}
.inner-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(74,124,237,.22) 0%, transparent 70%);
  pointer-events: none;
}
.inner-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: 3%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,190,86,.1) 0%, transparent 70%);
  pointer-events: none;
}
.inner-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.inner-hero-content { display: flex; flex-direction: column; gap: .75rem; }
.inner-hero-content .breadcrumb { margin-bottom: .25rem; }
.inner-hero-content .section-eyebrow { color: var(--gold); background: rgba(255,190,86,.15); display: inline-block; }
.inner-hero-content h1 { color: var(--white); margin: 0; }
.inner-hero-content h1 em { color: var(--gold); font-style: normal; }
.inner-hero-content p { color: rgba(255,255,255,.8); font-size: 1.1rem; max-width: 480px; margin: 0; }
.inner-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner-hero-icon {
  width: 260px;
  height: 260px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(6px);
}
.inner-hero-icon svg { width: 110px; height: 110px; }
.inner-hero-img {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  display: block;
}
@media (max-width: 768px) {
  .inner-hero-grid { grid-template-columns: 1fr; }
  .inner-hero-visual { display: none; }
  .inner-hero { padding: 3.5rem 0 3rem; }
}

/* --- Pagination --- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin-top: 3rem;
}
.page-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.page-btn:hover,
.page-btn.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* --- Blog single --- */
.article-header { margin-bottom: 2.5rem; }
.article-header h1 { margin-bottom: 1rem; }
.article-featured {
  width: 100%;
  aspect-ratio: 2/1;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2.5rem;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-featured span { font-size: 4rem; }
.article-featured-img { width: 100%; aspect-ratio: 2/1; object-fit: cover; border-radius: var(--radius); margin-bottom: 2.5rem; display: block; }
.article-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
}
.article-body h2 { margin: 2rem 0 1rem; font-size: 1.5rem; }
.article-body h3 { margin: 1.5rem 0 .75rem; }
.article-body p { margin-bottom: 1.25rem; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-body li { margin-bottom: .5rem; }
.article-body strong { color: var(--navy); }
.article-body blockquote {
  border-left: 4px solid var(--gold);
  padding: 1rem 1.5rem;
  background: rgba(255,190,86,.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--text);
}

/* --- Checkout steps --- */
.checkout-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2.5rem;
}
.checkout-step {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1;
  position: relative;
}
.checkout-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(50% + 20px);
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
}
.checkout-step.done::after { background: var(--blue); }
.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-weight: 700;
  font-size: .875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.checkout-step.active .step-num { background: var(--blue); color: var(--white); }
.checkout-step.done .step-num { background: var(--navy); color: var(--white); }
.step-label { font-size: .8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.checkout-step.active .step-label,
.checkout-step.done .step-label { color: var(--navy); }

/* --- Stripe payment box --- */
.stripe-box {
  background: var(--bg);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  margin: 1.5rem 0;
}
.stripe-logo {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: #635bff;
  margin-bottom: .5rem;
}
.stripe-box p { font-size: .875rem; color: var(--text-muted); }
.stripe-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* --- Contact --- */
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(74,124,237,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.contact-info-title { font-weight: 600; font-size: .95rem; margin-bottom: .25rem; }
.contact-info-val { color: var(--text-muted); font-size: .9rem; }

/* --- Planes mensuales --- */
.planes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
.plan-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition);
}
.plan-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.plan-card--featured {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}
.plan-card--featured:hover { transform: translateY(-9px); box-shadow: var(--shadow-lg); }
.plan-featured-label {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .4rem;
}
.plan-header {
  background: var(--bg);
  padding: 1.75rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.plan-card--featured .plan-header { background: var(--navy); }
.plan-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .75rem;
}
.plan-card--featured .plan-badge { color: rgba(255,255,255,.85); }
.plan-price {
  display: flex;
  align-items: flex-start;
  gap: .2rem;
  margin-bottom: .5rem;
}
.plan-price-amount {
  font-family: var(--font-head);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
}
.plan-card--featured .plan-price-amount { color: var(--white); }
.plan-price-meta {
  display: flex;
  flex-direction: column;
  padding-top: .4rem;
}
.plan-price-currency {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.plan-card--featured .plan-price-currency { color: var(--white); }
.plan-price-period {
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.plan-card--featured .plan-price-period { color: rgba(255,255,255,.8); }
.plan-after {
  font-size: .8rem;
  color: var(--text-muted);
  margin: 0;
}
.plan-card--featured .plan-after { color: rgba(255,255,255,.78); }
.plan-card--featured .plan-after strong { color: var(--gold); }
.plan-body {
  padding: 1.5rem 1.75rem 1.75rem;
}
.plan-desc {
  font-size: .875rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.plan-features {
  margin-bottom: 1.5rem;
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .875rem;
  padding: .35rem 0;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features li::before {
  content: '✓';
  color: var(--blue);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: .05rem;
}
.planes-note {
  text-align: center;
  font-size: .8rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
}

/* --- Pago único slider --- */
.unico-slider-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.unico-slider-viewport {
  flex: 1;
  overflow: hidden;
}
.unico-slider-track {
  display: flex;
  transition: transform .35s ease;
}
.unico-slide {
  flex: 0 0 calc(100% / 3);
  padding: 0 .5rem;
  box-sizing: border-box;
}
.unico-card-v {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: box-shadow var(--transition), transform var(--transition);
}
.unico-card-v:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.unico-card-icon { font-size: 1.75rem; }
.unico-card-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.unico-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}
.unico-card-price {
  font-family: var(--font-head);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.unico-card-price span {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-muted);
}
.unico-card-desc {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.unico-card-features {
  flex: 1;
  margin: .25rem 0 .75rem;
}
.unico-card-features li {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .82rem;
  padding: .3rem 0;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.unico-card-features li:last-child { border-bottom: none; }
.unico-card-features li::before {
  content: '✓';
  color: var(--blue);
  font-weight: 700;
  flex-shrink: 0;
}
.unico-arrow {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--navy);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.unico-arrow:hover:not(:disabled) { background: var(--navy); color: var(--white); border-color: var(--navy); }
.unico-arrow:disabled,
.unico-arrow--hidden { opacity: .25; cursor: default; pointer-events: none; }

/* --- Tablas del blog: legibles y con estilo de marca (aplica a todas las notas) --- */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: .82rem;
  line-height: 1.5;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15, 30, 60, .08);
}
.article-body thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: .7rem .8rem;
  font-size: .8rem;
  letter-spacing: .02em;
}
.article-body td, .article-body tbody th {
  padding: .65rem .8rem;
  border-bottom: 1px solid #edf1f7;
  text-align: left;
  vertical-align: top;
  color: var(--text);
}
.article-body tbody tr:last-child td { border-bottom: none; }
.article-body tbody tr:nth-child(even) { background: #f7f9fc; }
.article-body td:first-child, .article-body thead th:first-child { font-weight: 600; color: var(--navy); }
.article-body thead th:first-child { color: #fff; }
@media (max-width: 720px) {
  .article-body table { display: block; overflow-x: auto; white-space: nowrap; font-size: .78rem; }
}

/* Layout de contenido + barra lateral (contacto, detalle de servicio): responsive */
.layout-sidebar {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  align-items: start;
}
.layout-sidebar > * { min-width: 0; }
.layout-sidebar img { max-width: 100%; height: auto; }
@media (max-width: 900px) {
  .layout-sidebar { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Blog: tarjeta destacada responsive (imagen arriba en móvil) */
.post-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  margin-bottom: 3rem;
  overflow: hidden;
}
.post-featured-img { min-height: 280px; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .post-featured { grid-template-columns: 1fr; }
  .post-featured-img { min-height: 0; height: 220px; }
}

/* Packs de pago único: en móvil, columna en lugar de slider */
@media (max-width: 900px) {
  .unico-slider-track { flex-direction: column; gap: 1rem; transform: none !important; }
  .unico-slide { flex: 1 1 auto; padding: 0; }
  .unico-arrow { display: none; }
}

/* =====================================================================
   AÑADIDO AL PORTAR A DJANGO — 2026-08-06
   ---------------------------------------------------------------------
   Todo lo de aquí abajo son estilos que en las plantillas Blade iban
   EN LÍNEA, repetidos página a página (los cuatro pasos del proceso, las
   columnas pegajosas, las cajas de aviso, la ficha de servicio...). Se
   bajan a clases para que la maqueta se pueda seguir tocando de una pieza
   y para no llevar reglas dentro del HTML.
   Se usan los cortes que ya tenía la hoja: 1024 / 900 / 768 / 720 / 480.
   No se inventa ninguno nuevo.
   ===================================================================== */

/* --- Contenedores de ancho reducido --- */
.container--articulo    { max-width: 820px; }
.container--estrecho    { max-width: 760px; }
.container--legal       { max-width: 800px; }
.container--checkout    { max-width: 900px; }
.container--confirmacion{ max-width: 680px; }

.pt-1 { padding-top: 1rem; }
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1.25rem; }
.section--sin-tope { padding-top: 0; }

/* --- Columna lateral que acompaña al hacer scroll.
       Solo se pega cuando hay dos columnas: al colapsar a una, pegarla deja
       el resumen flotando sobre el formulario. --- */
.columna-pegajosa { min-width: 0; }
@media (min-width: 901px) {
  .columna-pegajosa { position: sticky; top: 90px; }
}

/* --- Cajas de aviso --- */
.aviso-azul {
  background: rgba(74,124,237,.05);
  border-color: rgba(74,124,237,.2);
  margin-top: 1.5rem;
}
.aviso-azul p { margin: 0; font-size: .9rem; }
.aviso-dorado { background: rgba(255,190,86,.06); border-color: rgba(255,190,86,.25); }
.aviso-dorado h4 { font-size: .95rem; margin-bottom: .75rem; }
.aviso-dorado p  { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; }
.aviso-pendiente {
  background: rgba(74,124,237,.06);
  border: 1px solid rgba(74,124,237,.2);
  border-radius: var(--radius);
  padding: 1.25rem; margin-bottom: 2rem;
  font-size: .9rem; color: var(--text-muted);
}
.aviso-proceso {
  margin: 1.5rem 0; padding: 1rem;
  background: rgba(74,124,237,.05);
  border: 1px solid rgba(74,124,237,.15);
  border-radius: var(--radius);
  font-size: .85rem; color: var(--text-muted); line-height: 1.6;
}
.aviso-proceso strong { color: var(--navy); }
.enlace-azul { color: var(--blue); font-weight: 600; }

/* --- Errores de formulario. En Blade era un div con estilos a mano. --- */
.alert {
  border-radius: var(--radius-sm);
  padding: 1rem; margin-bottom: 1.5rem; font-size: .875rem;
}
.alert-error { background: rgba(220,38,38,.07); border: 1px solid rgba(220,38,38,.2); color: #b91c1c; }
.alert ul { margin: 0; padding-left: 1.25rem; }

/* --- Formularios --- */
.form-titulo    { font-size: 1.3rem; margin-bottom: 1.5rem; }
.form-entradilla{ color: var(--text-muted); font-size: .95rem; margin-bottom: 1.5rem; }
.form-consentimiento {
  display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.5rem;
}
.form-consentimiento input[type="checkbox"] { margin-top: .25rem; flex-shrink: 0; }
.form-consentimiento label { font-size: .85rem; color: var(--text-muted); }
.form-consentimiento a { color: var(--blue); }
.enviado-ok { text-align: center; padding: 3rem 1rem; }
.enviado-ok h2 { margin-bottom: .75rem; }
.enviado-ok p  { color: var(--text-muted); font-size: 1.05rem; }
.enviado-emoji { font-size: 3.5rem; margin-bottom: 1rem; }
.contacto-titulo { font-size: 1rem; margin-bottom: 1.25rem; }
.faq-lista { display: flex; flex-direction: column; gap: 1rem; }
.faq-lista h4 { margin-bottom: .5rem; }
.faq-lista p  { font-size: .9rem; color: var(--text-muted); margin: 0; }

/* --- Ficha de servicio --- */
.ficha-titulo    { margin: .75rem 0; }
.ficha-entradilla{ font-size: 1.15rem; color: var(--text-muted); margin-bottom: 2rem; }
.ficha-img {
  width: 100%; max-width: 100%; height: auto;
  border-radius: var(--radius); aspect-ratio: 16/9; object-fit: cover;
  margin-bottom: 2.5rem; display: block;
}
.ficha-img-vacia { border-radius: var(--radius); aspect-ratio: 16/9; margin-bottom: 2.5rem; }
.ficha-emoji     { font-size: clamp(2.5rem, 8vw, 4rem); }
.ficha-h2        { font-size: 1.4rem; margin-bottom: 1.25rem; }
.ficha-texto     { margin-bottom: 2.5rem; line-height: 1.75; }
.ficha-incluye   { margin-bottom: 2.5rem; }

/* --- Resumen de compra --- */
.resumen-cabecera { text-align: center; margin-bottom: 1.5rem; }
.resumen-cabecera h3 { margin: 0 0 .25rem; }
.resumen-emoji  { font-size: 3rem; margin-bottom: .5rem; }
.resumen-precio { font-weight: 700; font-size: 1.5rem; color: var(--navy); }
.resumen-acciones { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.resumen-garantias {
  margin: 1.25rem 0 0; padding: 1.25rem 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  display: flex; flex-direction: column; gap: .6rem;
}
.resumen-garantias li {
  display: flex; align-items: center; gap: .6rem;
  font-size: .8rem; color: var(--text-muted);
}
.resumen-cargando  { color: var(--text-muted); font-size: .85rem; }
.resumen-asterisco { font-size: .75rem; color: var(--text-muted); margin-top: .5rem; }

/* --- Blog --- */
.filtro-blog { margin-bottom: 2.5rem; }
.post-featured-vacia { aspect-ratio: auto; min-height: 280px; border-radius: 0; }
.post-featured-body  { display: flex; flex-direction: column; justify-content: center; }
.post-title--grande  { font-size: 1.5rem; }
.emoji-xxl { font-size: clamp(3rem, 10vw, 5rem); }
.articulo-pie { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.cta-banner--articulo { margin-top: 3rem; }
.cta-banner--articulo h2 { font-size: 1.5rem; }
.relacionados { margin-top: 3.5rem; }
.relacionados h3 { margin-bottom: 1.5rem; }
.autor-caja {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.5rem; padding: 1rem;
  background: var(--bg); border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
  min-height: 44px;
}
.autor-avatar { width: 48px; height: 48px; font-size: 1.1rem; flex-shrink: 0; margin: 0; }
.autor-nombre { font-weight: 600; font-size: .9rem; }
.autor-rol    { font-size: .8rem; color: var(--text-muted); }

/* --- Quiénes somos --- */
.historia-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 4rem; align-items: center;
}
@media (max-width: 900px) {
  .historia-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.cifras-caja  { text-align: center; padding: 3rem 2rem; }
.cifras-emoji { font-size: 4rem; margin-bottom: 1rem; }
.cifras-grid  {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1.5rem; text-align: center; margin-top: 1rem;
}
.cifra {
  font-family: var(--font-head); font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 800; color: var(--navy);
}
.cifra-label { font-size: .85rem; color: var(--text-muted); }

.fundador-card {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr);
  gap: 0; margin-bottom: 2.5rem; overflow: hidden;
}
@media (max-width: 720px) {
  .fundador-card { grid-template-columns: 1fr; }
  .fundador-foto { min-height: 220px; }
}
.fundador-foto { display: flex; align-items: center; justify-content: center; }
.fundador-foto img { width: 100%; height: 100%; object-fit: cover; }
.fundador-inicial {
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(255,190,86,.25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 2.5rem; color: var(--gold);
}
.fundador-cabecera {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .5rem; flex-wrap: wrap;
}
.fundador-cabecera h3 { margin: 0; }
.fundador-rol { color: var(--blue); font-weight: 600; font-size: .9rem; margin-bottom: .75rem; }
.fundador-bio { font-size: .9rem; color: var(--text-muted); }
.team-avatar--foto { object-fit: cover; padding: 0; }
.team-bio { font-size: .85rem; color: var(--text-muted); margin-top: .75rem; }

/* --- Carrito y checkout --- */
.carrito-vacio { text-align: center; padding: 4rem 1rem; display: none; }
.carrito-vacio h2 { margin-bottom: .75rem; }
.carrito-vacio p  { color: var(--text-muted); margin-bottom: 2rem; }
.carrito-vacio-emoji { font-size: 4rem; margin-bottom: 1rem; }

.carrito-grid, .checkout-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: 2.5rem; align-items: start;
}
.checkout-grid { grid-template-columns: minmax(0,1fr) 340px; }
@media (max-width: 900px) {
  .carrito-grid, .checkout-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* La tabla del carrito NO se reordena: scrollea su propia caja, nunca la
   página. Sin esto, con cinco columnas se sale de la pantalla en móvil. */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-scroll .cart-table { width: 100%; min-width: 520px; }

.carrito-acciones {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1.5rem; flex-wrap: wrap; gap: 1rem;
}
.btn-vaciar { color: var(--text-muted); background: none; border: 1px solid var(--border); }
.carrito-continuar { margin-top: 1.5rem; }
.carrito-nota { margin-top: .6rem; text-align: center; font-size: .78rem; color: var(--text-muted); }
.checkout-nota { text-align: center; font-size: .8rem; color: var(--text-muted); margin-top: .75rem; }
.volver-carrito { text-align: center; margin-top: .75rem; }
.volver-carrito a { font-size: .8rem; color: var(--text-muted); }

/* --- Confirmación --- */
.confirmacion-caja  { text-align: center; padding: 3rem 2rem; }
.confirmacion-caja h1 { font-size: clamp(1.4rem, 5vw, 1.8rem); margin-bottom: .75rem; }
.confirmacion-emoji { font-size: 4rem; margin-bottom: 1rem; }
.confirmacion-texto { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 2rem; }
.confirmacion-resumen { text-align: left; margin-bottom: 2rem; }
.confirmacion-resumen-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem; gap: .75rem; flex-wrap: wrap;
}
.confirmacion-resumen-cabecera h3 { margin: 0; }
.confirmacion-numero { font-size: .85rem; color: var(--text-muted); }
.que-pasa-ahora {
  background: rgba(74,124,237,.05);
  border: 1px solid rgba(74,124,237,.15);
  border-radius: var(--radius);
  padding: 1.25rem; font-size: .9rem; color: var(--text-muted);
  text-align: left; margin-bottom: 2rem;
}
.que-pasa-ahora strong { color: var(--navy); }
.que-pasa-ahora ol { margin: .75rem 0 0; padding-left: 1.25rem; line-height: 1.9; }
.confirmacion-acciones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* --- Páginas legales --- */
.legal-titulo { font-size: clamp(1.5rem, 5vw, 2rem); margin-bottom: 2rem; }
.legal-cuerpo h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
.legal-cuerpo h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.legal-cuerpo p, .legal-cuerpo li { line-height: 1.75; }
.legal-cuerpo ul { padding-left: 1.25rem; margin-bottom: 1rem; }
/* Un correo o una URL sin espacios ensancha la caja y saca la página de la
   pantalla: que parta donde haga falta. */
.legal-cuerpo a { overflow-wrap: anywhere; }
.legal-volver { margin-top: 3rem; text-align: center; }
/* El texto legal viene de WordPress: trae apartados numerados y la tabla del
   listado de cookies, que la hoja original no contemplaba. */
.legal-cuerpo ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal-cuerpo ol li { font-weight: 600; }
.legal-cuerpo .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; }
/* La tabla llega con width=1025 clavado desde WordPress: se le quita y se
   deja que scrolle su caja, nunca la página. */
.legal-cuerpo table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .82rem; }
.legal-cuerpo th, .legal-cuerpo td { border: 1px solid var(--borde, #e2e8f0); padding: .5rem .6rem; vertical-align: top; }
.legal-cuerpo td p { margin: 0; line-height: 1.5; }

/* Las rejillas que ya traía el diseño y que no llevaban tope: un título
   largo, una URL sin espacios o un input ancho hacían crecer la columna y
   sacaban la página de la pantalla. Solo se les pone el tope; la disposición
   y los cortes no se tocan. */
.post-featured > *, .form-grid > *,
.inner-hero-grid > *, .hero-inner > * { min-width: 0; }