/* ============================================================
   Sistema de diseño de looop.ar  (ds = design system)
   Papel y razonamiento: ../negocio/ecosistema/sistema-de-diseno.md
   Primera parte (3/11/2026): tokens + componentes de las landings.
   Prefijo --ds- / .ds- para convivir con styles.css y paginas.css
   hasta la migración del resto del sitio (enero).
   Criterio tomado de: Radix/Tailwind (escalas de color), Utopia
   (tipografía fluida), Material/Polaris (base 4), GOV.UK (formularios),
   WCAG 2.2 AA (contraste).
   ============================================================ */

:root {
  /* ---- Color: marca (la paleta de design.md no cambia) ---- */
  --ds-orange-50:  #FFF4EC;   /* = light-accent */
  --ds-orange-100: #FFE4CF;
  --ds-orange-200: #FBC9A0;
  --ds-orange-500: #E87722;   /* naranja de marca: superficies y acentos */
  --ds-orange-600: #D06820;   /* encima */
  --ds-orange-700: #B85A1A;   /* texto naranja sobre claro (4,65:1) */

  --ds-navy-50:  #EEF3F8;
  --ds-navy-100: #D9E3EE;
  --ds-navy-700: #1E4D7B;
  --ds-navy-800: #163456;
  --ds-navy-900: #0A2540;     /* títulos, texto sobre naranja (5,25:1) */

  /* Neutros con tinte navy */
  --ds-gray-0:   #FFFFFF;
  --ds-gray-25:  #FAFBFC;     /* fondo de página */
  --ds-gray-50:  #F4F6F8;     /* superficie */
  --ds-gray-100: #E2E8EE;     /* bordes */
  --ds-gray-200: #CBD5DF;     /* bordes de campos */
  --ds-gray-600: #5F7385;     /* texto secundario (4,5:1 sobre blanco, fondo y superficie) */
  --ds-gray-700: #3D4F5F;     /* texto de cuerpo (8,5:1) */

  /* Estados */
  --ds-error-bg: #FDECEC;  --ds-error-border: #F0B4B4;  --ds-error-text: #A32D2D;
  --ds-ok-bg:    #EAF6EE;  --ds-ok-border:    #A9D8B8;  --ds-ok-text:    #1F6B3A;
  --ds-info-bg:  #EEF3F8;  --ds-info-border:  #C3D3E4;  --ds-info-text:  #163456;

  /* Roles (lo que usan los componentes) */
  --ds-bg: var(--ds-gray-25);
  --ds-surface: var(--ds-gray-50);
  --ds-card: var(--ds-gray-0);
  --ds-border: var(--ds-gray-100);
  --ds-heading: var(--ds-navy-900);
  --ds-text: var(--ds-gray-700);
  --ds-muted: var(--ds-gray-600);
  --ds-link: var(--ds-orange-700);
  --ds-accent: var(--ds-orange-500);
  --ds-focus: 0 0 0 3px var(--ds-gray-0), 0 0 0 5px var(--ds-navy-900);

  /* ---- Tipografía: escala fluida (Utopia), 360px a 1240px ---- */
  --ds-font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);  /* 13 a 14 */
  --ds-step-0:  clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);     /* 16 a 17 */
  --ds-step-1:  clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);   /* 18 a 20 */
  --ds-step-2:  clamp(1.35rem, 1.24rem + 0.5vw, 1.625rem);    /* 22 a 26 */
  --ds-step-3:  clamp(1.6rem, 1.4rem + 0.9vw, 2.125rem);      /* 26 a 34 */
  --ds-step-4:  clamp(1.9rem, 1.55rem + 1.6vw, 2.75rem);      /* 30 a 44 */
  --ds-step-5:  clamp(2.125rem, 1.6rem + 2.5vw, 3.5rem);      /* 34 a 56 */
  --ds-lh-tight: 1.1;
  --ds-lh-snug: 1.3;
  --ds-lh-body: 1.6;

  /* ---- Espacio: base 4 ---- */
  --ds-space-1: 4px;  --ds-space-2: 8px;  --ds-space-3: 12px; --ds-space-4: 16px;
  --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px;
  --ds-space-9: 96px;
  --ds-section: clamp(56px, 4rem + 4vw, 112px);   /* alto de sección */
  --ds-gutter: clamp(16px, 4vw, 40px);
  --ds-max: 1180px;

  /* ---- Redondeo, sombra, movimiento ---- */
  --ds-radius-sm: 6px;  --ds-radius-md: 12px;  --ds-radius-lg: 20px;  --ds-radius-pill: 999px;
  --ds-shadow-1: 0 1px 2px rgba(10,37,64,.06), 0 1px 3px rgba(10,37,64,.04);
  --ds-shadow-2: 0 4px 12px rgba(10,37,64,.08), 0 2px 4px rgba(10,37,64,.04);
  --ds-shadow-3: 0 18px 40px rgba(10,37,64,.12), 0 6px 12px rgba(10,37,64,.05);
  --ds-fast: 150ms;  --ds-base: 250ms;  --ds-ease: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) { :root { --ds-fast: 0ms; --ds-base: 0ms; } }

/* ---- Base (solo dentro de .ds, para no tocar el resto del sitio) ---- */
.ds { font-family: var(--ds-font); font-size: var(--ds-step-0); line-height: var(--ds-lh-body); color: var(--ds-text); background: var(--ds-bg); -webkit-font-smoothing: antialiased; }
:where(.ds) :where(h1, h2, h3) { color: var(--ds-heading); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
:where(.ds) h1 { font-size: var(--ds-step-5); line-height: var(--ds-lh-tight); }
:where(.ds) h2 { font-size: var(--ds-step-4); line-height: var(--ds-lh-tight); }
:where(.ds) h3 { font-size: var(--ds-step-1); line-height: var(--ds-lh-snug); font-weight: 700; letter-spacing: -0.01em; }
:where(.ds) p { margin: 0; }
:where(.ds) a { color: var(--ds-link); }
.ds :focus-visible { outline: none; box-shadow: var(--ds-focus); border-radius: var(--ds-radius-sm); }
.ds .serif { font-style: italic; font-weight: 300; color: var(--ds-orange-700); }
.ds-wrap { max-width: var(--ds-max); margin: 0 auto; padding: 0 var(--ds-gutter); }
.ds-stack > * + * { margin-top: var(--ds-space-4); }
.ds-lead { font-size: var(--ds-step-1); color: var(--ds-text); max-width: 62ch; }
.ds-muted { color: var(--ds-muted); font-size: var(--ds-step--1); }
.ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Sección ---- */
.ds-section { padding: var(--ds-section) 0; }
.ds-section--surface { background: var(--ds-surface); }
.ds-section--dark { background: var(--ds-navy-900); color: var(--ds-navy-100); }
.ds-section--dark h2, .ds-section--dark h3 { color: var(--ds-gray-0); }
.ds-section__head { max-width: 760px; margin-bottom: var(--ds-space-7); }
.ds-section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ds-section__head > * + * { margin-top: var(--ds-space-4); }
/* Antetítulo: dice en qué paso del recorrido está la persona */
.ds-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-orange-700); }
.ds-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--ds-accent); border-radius: 2px; }
.ds-section--dark .ds-eyebrow { color: var(--ds-orange-200); }

/* ---- Botón ---- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: 48px; padding: 0 var(--ds-space-5); font: 700 var(--ds-step-0)/1 var(--ds-font); text-decoration: none; border: 2px solid transparent; border-radius: var(--ds-radius-sm); cursor: pointer; transition: background var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease); }
.ds-btn:active { transform: translateY(1px); }
.ds-btn--primary { background: var(--ds-orange-500); color: var(--ds-navy-900); box-shadow: var(--ds-shadow-1); }
.ds-btn--primary:hover { background: var(--ds-orange-600); }
.ds-btn--secondary { background: var(--ds-navy-900); color: var(--ds-gray-0); }
.ds-btn--secondary:hover { background: var(--ds-navy-800); }
.ds-btn--ghost { background: transparent; color: var(--ds-navy-900); border-color: var(--ds-gray-200); }
.ds-btn--ghost:hover { border-color: var(--ds-navy-900); }
.ds-btn--lg { min-height: 56px; padding: 0 var(--ds-space-6); font-size: var(--ds-step-1); }
.ds-btn--sm { min-height: 40px; padding: 0 var(--ds-space-4); font-size: var(--ds-step--1); }
.ds-btn--block { width: 100%; }
.ds-btn[disabled], .ds-btn[aria-busy="true"] { opacity: .65; cursor: progress; transform: none; }
.ds-btn[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ds-spin .7s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); align-items: center; }

/* ---- Formulario (criterio GOV.UK) ---- */
.ds-form > * + * { margin-top: var(--ds-space-5); }
.ds-field label, .ds-legend { display: block; font-weight: 700; color: var(--ds-heading); font-size: var(--ds-step-0); margin-bottom: var(--ds-space-2); padding: 0; }
.ds-hint { display: block; color: var(--ds-muted); font-size: var(--ds-step--1); margin: calc(var(--ds-space-1) * -1) 0 var(--ds-space-2); }
.ds-input { width: 100%; box-sizing: border-box; min-height: 52px; padding: var(--ds-space-3) var(--ds-space-4); font: inherit; font-size: 16px; color: var(--ds-heading); background: var(--ds-card); border: 2px solid var(--ds-gray-200); border-radius: var(--ds-radius-sm); transition: border-color var(--ds-fast); }
.ds-input:hover { border-color: var(--ds-gray-600); }
.ds-input:focus { outline: none; border-color: var(--ds-navy-900); box-shadow: 0 0 0 3px var(--ds-orange-100); }
.ds-field--error .ds-input { border-color: var(--ds-error-text); }
.ds-field__error { display: block; color: var(--ds-error-text); font-weight: 700; font-size: var(--ds-step--1); margin-bottom: var(--ds-space-2); }
.ds-grid-2 { display: grid; gap: var(--ds-space-5) var(--ds-space-4); }
@media (min-width: 560px) { .ds-grid-2 { grid-template-columns: 1fr 1fr; } }
.ds-fieldset { border: 0; padding: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; min-width: 0; }
/* Opciones en pastilla (radio o checkbox) */
.ds-choices { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-choice { position: relative; }
.ds-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ds-choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ds-space-4); border: 2px solid var(--ds-gray-200); border-radius: var(--ds-radius-pill); background: var(--ds-card); color: var(--ds-text); font-weight: 600; transition: border-color var(--ds-fast), background var(--ds-fast); }
.ds-choice input:hover + span { border-color: var(--ds-gray-600); }
.ds-choice input:checked + span { border-color: var(--ds-navy-900); background: var(--ds-navy-900); color: var(--ds-gray-0); }
.ds-choice input:focus-visible + span { box-shadow: var(--ds-focus); }
/* Casilla */
.ds-check { display: flex; gap: var(--ds-space-3); align-items: flex-start; cursor: pointer; }
.ds-check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--ds-navy-900); }
.ds-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- Aviso ---- */
.ds-notice { border: 1px solid; border-radius: var(--ds-radius-md); padding: var(--ds-space-3) var(--ds-space-4); font-size: var(--ds-step--1); }
.ds-notice--error { background: var(--ds-error-bg); border-color: var(--ds-error-border); color: var(--ds-error-text); }
.ds-notice--ok { background: var(--ds-ok-bg); border-color: var(--ds-ok-border); color: var(--ds-ok-text); }
.ds-notice--info { background: var(--ds-info-bg); border-color: var(--ds-info-border); color: var(--ds-info-text); }

/* ---- Tarjeta ---- */
.ds-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: var(--ds-space-5); box-shadow: var(--ds-shadow-1); }
.ds-card--raised { box-shadow: var(--ds-shadow-3); border-radius: var(--ds-radius-lg); padding: var(--ds-space-6); }
.ds-cards { display: grid; gap: var(--ds-space-4); }
@media (min-width: 720px) { .ds-cards--2 { grid-template-columns: repeat(2, 1fr); } .ds-cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Lista de dolores ---- */
.ds-pains { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); }
@media (min-width: 720px) { .ds-pains { grid-template-columns: 1fr 1fr; } }
.ds-pains li { display: flex; gap: var(--ds-space-3); align-items: flex-start; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: var(--ds-space-4) var(--ds-space-5); color: var(--ds-text); }
.ds-pains li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .55em; border-radius: 50%; background: var(--ds-accent); box-shadow: 0 0 0 4px var(--ds-orange-50); }

/* ---- Pasos ---- */
.ds-steps { list-style: none; margin: 0; padding: 0; counter-reset: ds-paso; display: grid; gap: var(--ds-space-4); }
@media (min-width: 820px) { .ds-steps { grid-template-columns: repeat(var(--ds-cols, 3), 1fr); } }
.ds-steps li { counter-increment: ds-paso; position: relative; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: var(--ds-space-5); }
.ds-steps li::before { content: counter(ds-paso); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--ds-space-4); border-radius: 50%; background: var(--ds-navy-900); color: var(--ds-gray-0); font-weight: 800; }
.ds-steps h3 { margin-bottom: var(--ds-space-2); }

/* ---- Preguntas ---- */
.ds-faq { max-width: 820px; border-top: 1px solid var(--ds-border); }
.ds-faq details { border-bottom: 1px solid var(--ds-border); }
.ds-faq summary { display: flex; justify-content: space-between; gap: var(--ds-space-4); padding: var(--ds-space-5) 0; font-weight: 700; color: var(--ds-heading); font-size: var(--ds-step-1); cursor: pointer; list-style: none; }
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after { content: "+"; color: var(--ds-orange-700); font-size: 1.4em; line-height: 1; transition: transform var(--ds-base) var(--ds-ease); }
.ds-faq details[open] summary::after { transform: rotate(45deg); }
.ds-faq details p { padding-bottom: var(--ds-space-5); max-width: 68ch; }

/* ---- Marco de imagen (nuevo: lugares fijos para imágenes reales) ---- */
.ds-media { margin: 0; }
.ds-media__frame { position: relative; overflow: hidden; border-radius: var(--ds-radius-lg); background: var(--ds-surface); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-2); aspect-ratio: var(--ds-ratio, 16 / 10); }
.ds-media__frame > img, .ds-media__frame > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-media--square { --ds-ratio: 1 / 1; }
.ds-media--wide { --ds-ratio: 16 / 9; }
.ds-media--phone .ds-media__frame { --ds-ratio: 9 / 16; max-width: 300px; margin: 0 auto; border-radius: 32px; border: 8px solid var(--ds-navy-900); }
.ds-media figcaption { margin-top: var(--ds-space-3); color: var(--ds-muted); font-size: var(--ds-step--1); }
/* Mientras no hay imagen: un lugar marcado que dice qué foto va */
.ds-media__placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--ds-space-5); color: var(--ds-muted); font-size: var(--ds-step--1); background: repeating-linear-gradient(-45deg, var(--ds-gray-50), var(--ds-gray-50) 12px, var(--ds-gray-25) 12px, var(--ds-gray-25) 24px); }
.ds-media__placeholder strong { display: block; color: var(--ds-heading); font-size: var(--ds-step-0); margin-bottom: var(--ds-space-1); }

/* ---- Bloque de texto + imagen ---- */
.ds-split { display: grid; gap: var(--ds-space-7); align-items: center; }
@media (min-width: 900px) { .ds-split { grid-template-columns: 1fr 1fr; gap: var(--ds-space-8); } .ds-split--reverse > :first-child { order: 2; } }

/* ---- Fila de confianza ---- */
.ds-trust { display: flex; flex-wrap: wrap; gap: var(--ds-space-3) var(--ds-space-6); align-items: center; color: var(--ds-muted); font-size: var(--ds-step--1); }
.ds-trust strong { color: var(--ds-heading); }
.ds-stat { font-size: var(--ds-step-4); font-weight: 800; color: var(--ds-heading); line-height: 1; }

/* ---- Foto con tarjetas flotantes (patrón UiCore, 3/11/2026) ---- */
.ds-photo { position: relative; padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-7) 0; }
.ds-photo__bg { position: absolute; inset: var(--ds-space-7) 0 0 var(--ds-space-7); border-radius: var(--ds-radius-lg); background: var(--ds-orange-100); }
.ds-photo__img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-2); display: block; }
.ds-float { position: absolute; display: flex; align-items: center; gap: var(--ds-space-3); background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: var(--ds-space-3) var(--ds-space-4); box-shadow: var(--ds-shadow-3); font-size: var(--ds-step--1); line-height: 1.3; color: var(--ds-text); max-width: 240px; }
.ds-float strong { display: block; color: var(--ds-heading); font-size: var(--ds-step-0); }
.ds-float__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ds-orange-50); color: var(--ds-orange-700); }
.ds-float__icon--ok { background: var(--ds-ok-bg); color: var(--ds-ok-text); }
.ds-float__icon--navy { background: var(--ds-navy-900); color: var(--ds-gray-0); }
.ds-float__icon svg { width: 18px; height: 18px; }
.ds-float--tl { top: 0; left: calc(var(--ds-space-5) * -1); }
.ds-float--br { bottom: 0; right: calc(var(--ds-space-3) * -1); }
.ds-float--ml { top: 48%; left: calc(var(--ds-space-6) * -1); }
@media (max-width: 640px) { .ds-photo { padding: var(--ds-space-4) 0 var(--ds-space-7); } .ds-float--tl, .ds-float--ml { left: var(--ds-space-2); } .ds-float--br { right: var(--ds-space-2); } }
@media (prefers-reduced-motion: no-preference) { .ds-float { animation: ds-flotar 6s ease-in-out infinite; } .ds-float--br { animation-delay: -3s; } }
@keyframes ds-flotar { 50% { transform: translateY(-6px); } }

/* ---- Franja de prueba rápida bajo la portada ---- */
.ds-proofbar { border-top: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border); background: var(--ds-card); padding: var(--ds-space-4) 0; }
.ds-proofbar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-3) var(--ds-space-7); }
.ds-proofbar li { display: flex; align-items: center; gap: var(--ds-space-2); font-weight: 700; color: var(--ds-heading); font-size: var(--ds-step--1); }
.ds-proofbar li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-accent); }

/* ---- La oferta: qué te llevás (stack sin cifras) ---- */
.ds-offer { background: var(--ds-card); border: 2px solid var(--ds-navy-900); border-radius: var(--ds-radius-lg); overflow: hidden; box-shadow: var(--ds-shadow-3); }
.ds-offer__head { background: var(--ds-navy-900); color: var(--ds-gray-0); padding: var(--ds-space-5) var(--ds-space-6); }
.ds-offer__head h3 { color: var(--ds-gray-0); font-size: var(--ds-step-2); }
.ds-offer__head p { color: var(--ds-navy-100); margin-top: var(--ds-space-2); }
.ds-offer ul { list-style: none; margin: 0; padding: var(--ds-space-3) var(--ds-space-6); }
.ds-offer li { display: grid; grid-template-columns: 28px 1fr; gap: var(--ds-space-3); padding: var(--ds-space-4) 0; border-bottom: 1px solid var(--ds-border); }
.ds-offer li:last-child { border-bottom: 0; }
.ds-offer li::before { content: ""; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--ds-orange-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2540' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/14px no-repeat; }
.ds-offer li strong { display: block; color: var(--ds-heading); }
.ds-offer li span { color: var(--ds-muted); font-size: var(--ds-step--1); }
.ds-offer__foot { padding: var(--ds-space-5) var(--ds-space-6); background: var(--ds-surface); display: flex; flex-wrap: wrap; gap: var(--ds-space-4); align-items: center; justify-content: space-between; }
.ds-offer__price { color: var(--ds-gray-0) !important; font-size: var(--ds-step-0); }
.ds-offer__price strong { font-size: var(--ds-step-5); font-weight: 800; color: var(--ds-orange-500); letter-spacing: -0.02em; margin-right: var(--ds-space-2); }

/* ---- Tabla de packs (precio por volumen) ---- */
.ds-packs { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-5) var(--ds-space-6) 0; }
.ds-pack { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--ds-space-4); align-items: baseline; padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-card); }
.ds-pack__n { font-weight: 700; color: var(--ds-heading); }
.ds-pack__c { font-weight: 800; color: var(--ds-heading); font-size: var(--ds-step-1); text-align: right; }
.ds-pack__c small { font-weight: 600; font-size: var(--ds-step--1); color: var(--ds-muted); }
.ds-pack__t { grid-column: 1 / -1; color: var(--ds-muted); font-size: var(--ds-step--1); }
@media (min-width: 640px) { .ds-pack { grid-template-columns: 1fr auto 150px; } .ds-pack__t { grid-column: auto; text-align: right; } }
.ds-pack--destacado { background: var(--ds-orange-50); border-color: var(--ds-orange-200); }

/* Preguntas frecuentes con el mismo estilo que la home (Flor, 6/11/2026: consistencia) */
.ds-faq { max-width: 800px; border-top: 0; }
.ds-faq details { border-top: 1px solid var(--border, #E5E7EB); border-bottom: 0; padding: 28px 0; }
.ds-faq details:last-child { border-bottom: 1px solid var(--border, #E5E7EB); }
.ds-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0; font-size: 18px; font-weight: 700; color: var(--heading, #05273C); cursor: pointer; list-style: none; }
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after { content: "+"; font-size: 24px; font-weight: 300; color: var(--orange, #FF6C01); line-height: 1; flex-shrink: 0; transition: transform .3s ease; }
.ds-faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.ds-faq details p { margin-top: 16px; padding-bottom: 0; font-size: 16px; color: var(--body, #4B5563); line-height: 1.6; max-width: 60ch; }