/* =========================================================
   ZIHKON · ESTILOS DE LAS SECCIONES DE LA PÁGINA PRINCIPAL
   Cada bloque está marcado con "SECCIÓN: ..." y el id del HTML.
   Colores, tamaños, espaciados, radios y sombras vienen de las
   variables de css/styles.css (y del tema activo en css/tema.css).
   ========================================================= */

/* ---------- Conversaciones de WhatsApp (hero y productos) ---------- */
.msg { max-width: 84%; margin: 0; padding: 8px 12px; border-radius: var(--radio-burbuja); box-shadow: 0 1px 1px #0f1c4514; color: var(--color-texto); font-size: 14px; line-height: 1.4; }
.msg--in { align-self: flex-start; border-top-left-radius: 4px; background: var(--color-chat-recibido); }
.msg--out { align-self: flex-end; border-top-right-radius: 4px; background: var(--color-chat-enviado); }
.msg--out .cmd { padding: 0; background: none; }

/* ---------- SECCIÓN: Inicio / Hero (#inicio) ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(3rem, 1.8rem + 4vw, 5.5rem) 0 clamp(3.5rem, 2rem + 4vw, 6rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: var(--espacio-8); }
.hero-place { margin: 0 0 var(--espacio-5); color: var(--color-primario); font-size: var(--texto-sm); font-weight: 700; }
.hero h1 { max-width: 13ch; margin: 0 0 var(--espacio-5); font-size: var(--titulo-hero); line-height: 1.02; letter-spacing: -0.02em; }
.hero-lede { max-width: 34em; margin: 0; color: var(--color-texto-suave); font-size: var(--texto-md); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--espacio-3); margin-top: var(--espacio-6); }

/* Demostración: un WhatsApp cambia el horario de una web de ejemplo.
   Es la única animación automática de la página: se reproduce una vez. */
.demo { position: relative; z-index: 2; margin: 0; }
.demo-stage { display: grid; }
.demo-chat { width: min(100%, 380px); overflow: hidden; border-radius: 24px; background: var(--color-chat-fondo); box-shadow: var(--sombra-lg); }
.demo-head { display: flex; align-items: center; gap: var(--espacio-3); margin: 0; padding: 14px 18px; background: var(--color-primario-oscuro); color: var(--color-texto-invertido); font-weight: 700; }
.demo-head small { display: block; color: var(--color-texto-invertido-suave); font-size: 12px; font-weight: 400; }
.demo-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--color-acento); color: var(--color-primario-oscuro); font: 18px var(--fuente-titulos); }
.demo-msgs { display: flex; flex-direction: column; gap: var(--espacio-2); padding: var(--espacio-5) var(--espacio-4) 88px; }
/* La tarjeta de la web solo tapa el hueco vacío del final del chat */
.demo-site { position: relative; justify-self: end; width: min(290px, 78%); margin-top: -64px; padding: var(--espacio-4) var(--espacio-5) var(--espacio-5); border: 1px solid var(--color-borde); border-radius: var(--radio-tarjeta); background: var(--color-superficie); box-shadow: var(--sombra-lg); }
.demo-url { display: flex; align-items: center; gap: var(--espacio-2); margin: 0 0 var(--espacio-4); padding: 6px 12px; border-radius: 999px; background: var(--color-fondo); color: var(--color-texto-suave); font-size: 12px; }
.demo-url span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-whatsapp); }
.demo-name { margin: 0; font: var(--texto-lg)/1.1 var(--fuente-titulos); }
.demo-label { margin: var(--espacio-3) 0 var(--espacio-1); color: var(--color-texto-suave); font-size: 12px; }
.demo-hours { margin: 0; font-size: 14px; }
.demo-hours div { display: flex; justify-content: space-between; gap: var(--espacio-3); margin: 0 -8px; padding: 7px 8px; border-top: 1px solid var(--color-borde); border-radius: 6px; }
.demo-hours dt { color: var(--color-texto-suave); }
.demo-hours dd { display: grid; margin: 0; font-weight: 700; text-align: right; }
.demo-old, .demo-new { grid-area: 1 / 1; }
.demo figcaption { margin-top: var(--espacio-3); color: var(--color-texto-suave); font-size: var(--texto-xs); }
.demo-replay { margin-left: var(--espacio-2); padding: 4px 2px; border: 0; background: none; color: var(--color-primario); font-size: var(--texto-xs); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Secuencia: mensaje → propuesta → SÍ → la web cambia → confirmación */
.demo-step { animation: demo-msg .45s cubic-bezier(.22, 1, .36, 1) both; }
.demo-step--1 { animation-delay: .5s; }
.demo-step--2 { animation-delay: 1.6s; }
.demo-step--3 { animation-delay: 2.8s; }
.demo-step--5 { animation-delay: 4.2s; }
.demo-old { animation: demo-out .35s ease 3.4s both; }
.demo-new { animation: demo-in .45s cubic-bezier(.22, 1, .36, 1) 3.5s both; }
.demo-change { animation: demo-flash 1.8s ease 3.4s both; }
.demo--reset * { animation: none !important; }
@keyframes demo-msg { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes demo-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes demo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes demo-flash { 0%, 100% { background: transparent; } 15%, 55% { background: var(--color-aviso-fondo); } }

/* ---------- SECCIÓN: El problema (#problema) ---------- */
.pain { padding: var(--espacio-seccion) 0; border-block: 1px solid var(--color-borde); background: var(--color-superficie); }
.pain-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-7) var(--espacio-6); margin: var(--espacio-7) 0 0; padding: 0; list-style: none; }
.pain-list li::before { display: block; width: 32px; height: 4px; margin-bottom: var(--espacio-4); border-radius: 2px; background: var(--color-detalle); content: ""; }
.pain-list h3 { margin: 0 0 var(--espacio-2); font-size: 1.375rem; line-height: 1.2; }
.pain-list p { max-width: 34ch; margin: 0; color: var(--color-texto-suave); font-size: var(--texto-base); line-height: 1.55; }

/* ---------- SECCIÓN: Productos (#productos) ---------- */
.products { padding: var(--espacio-seccion) 0; background: var(--color-fondo-alterno); }
.products-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: var(--espacio-5) var(--espacio-8); margin-bottom: var(--espacio-7); }
.products-head .section-title { margin: 0; }
/* Pestañas (las activa js/main.js) */
.product-tabs { display: inline-flex; gap: 4px; margin-bottom: var(--espacio-7); padding: 4px; border: 1px solid var(--color-borde); border-radius: 999px; background: var(--color-superficie); }
.product-tabs[hidden] { display: none; }
.product-tabs button { min-height: 44px; padding: 0 var(--espacio-5); border: 0; border-radius: 999px; background: transparent; color: var(--color-texto-suave); font-size: var(--texto-sm); font-weight: 700; cursor: pointer; transition: background-color var(--transicion), color var(--transicion); }
.product-tabs button:hover { color: var(--color-texto); }
.product-tabs button[aria-selected="true"] { background: var(--color-primario-oscuro); color: var(--color-texto-invertido); }
.product-list { display: grid; gap: var(--espacio-9); }
.product { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); align-items: center; gap: var(--espacio-8); }
.product[hidden] { display: none; }
.product.is-entering { animation: demo-in .35s cubic-bezier(.22, 1, .36, 1) both; }
.product-media { justify-self: center; width: 100%; max-width: 330px; padding: 10px; border-radius: 34px; background: var(--color-primario-oscuro); box-shadow: var(--sombra-lg); }
.product-media video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 25px; background: var(--color-primario-oscuro); object-fit: cover; }
.chat-mock { display: flex; aspect-ratio: 9 / 16; flex-direction: column; justify-content: center; gap: var(--espacio-2); padding: var(--espacio-5) var(--espacio-3); border-radius: 25px; background: var(--color-chat-fondo); }
.chat-photos { display: flex; gap: 4px; padding: 5px; }
.chat-photos i { width: 46px; height: 46px; border-radius: 8px; background: linear-gradient(135deg, var(--color-acento), var(--color-primario)); }
.chat-photos i:nth-child(2) { background: linear-gradient(135deg, #f6b3cf, var(--color-detalle)); }
.product-copy { max-width: 580px; }
.product-copy h3 { margin: 0 0 var(--espacio-4); font-size: var(--texto-xl); line-height: 1.12; }
.product-intro { margin: 0 0 var(--espacio-6); color: var(--color-texto-suave); font-size: var(--texto-md); line-height: 1.55; }
.product-intro strong { color: var(--color-texto); }
.product-steps { display: grid; gap: var(--espacio-4); margin: 0 0 var(--espacio-6); padding: 0; list-style: none; counter-reset: paso; }
.product-steps li { position: relative; display: grid; gap: 2px; padding-left: 48px; counter-increment: paso; }
.product-steps li::before { position: absolute; top: -2px; left: 0; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--color-primario); color: #fff; content: counter(paso); font: 16px/1 var(--fuente-titulos); }
.product-steps strong { font-weight: 700; }
.product-steps span:not(.cmd) { color: var(--color-texto-suave); font-size: var(--texto-sm); line-height: 1.55; }
.product-extra { margin-bottom: var(--espacio-5); padding: var(--espacio-4) var(--espacio-5); border-radius: var(--radio-burbuja); background: var(--color-superficie); }
.product-extra h4 { margin: 0 0 var(--espacio-2); font-size: var(--texto-base); }
.product-extra p { margin: 0; color: var(--color-texto-suave); font-size: var(--texto-sm); line-height: 1.8; }
.product-extra strong { color: var(--color-texto); }
.product-safe { margin: 0 0 var(--espacio-6); padding-left: var(--espacio-4); border-left: 3px solid var(--color-primario); color: var(--color-texto-suave); font-size: var(--texto-sm); line-height: 1.55; }

/* ---------- SECCIÓN: Precios (#precios) ---------- */
.pricing { padding: var(--espacio-seccion) 0; }
.launch-band { display: inline-block; margin: var(--espacio-2) 0 var(--espacio-8); padding: var(--espacio-3) var(--espacio-5); border-radius: var(--radio-boton); background: var(--color-aviso-fondo); color: var(--color-aviso); font-size: var(--texto-sm); font-weight: 700; }
/* Franja de la prueba gratuita de 7 días (encima de los planes). Verde fijo = "gratis": no cambia con los temas */
.trial-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--espacio-6); margin: 0 0 var(--espacio-8); padding: var(--espacio-6) var(--espacio-7); border: 2px solid #1f9d5c; border-radius: var(--radio-tarjeta); background: #e3f7ea; box-shadow: var(--sombra-md); color: #0d3b24; }
.trial-dias { display: grid; justify-items: center; gap: var(--espacio-3); margin: 0; color: #0f7a43; line-height: 1; }
.trial-dias strong { font: 400 4.5rem/1 var(--fuente-titulos); }
.trial-dias span { font-size: var(--texto-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.trial-copy h3 { margin: 0 0 var(--espacio-2); color: #0d3b24; font-size: var(--texto-lg); }
.trial-copy p { margin: 0; color: #24533a; }
.trial-band .button svg { width: 20px; height: 20px; }
/* Latido (zoom in con leve inclinación a la izquierda / zoom out a su posición).
   transform no mueve el resto de elementos. Se mantiene también con "reducir movimiento"
   activado en el sistema (la regla global de css/styles.css la anularía): por eso los !important. */
.trial-band { animation: trial-latido 2.4s ease-in-out infinite !important; will-change: transform; }
@keyframes trial-latido { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.05) rotate(-1.5deg); } }
.price-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: stretch; gap: var(--espacio-5); }
.price-card { position: relative; display: flex; flex-direction: column; padding: var(--espacio-6); border: 1px solid var(--color-borde); border-radius: var(--radio-tarjeta); background: var(--color-superficie); }
.price-card h3 { margin: 0 0 var(--espacio-4); font-size: var(--texto-lg); line-height: 1.2; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--espacio-2); margin: 0; }
.price strong { font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.price > span { color: var(--color-texto-suave); font-size: var(--texto-sm); }
.price del { color: var(--color-texto-suave); font-size: var(--texto-md); }
.price-day { margin: var(--espacio-2) 0 0; font-weight: 700; }
.price-setup { margin: var(--espacio-2) 0 0; color: var(--color-texto-suave); font-size: var(--texto-sm); }
.price-setup strong { color: var(--color-texto); font-size: var(--texto-base); }
.price-setup-nota { display: block; color: var(--color-aviso); font-size: var(--texto-xs); font-weight: 700; }
.price-card--featured .price-setup strong { color: var(--color-texto-invertido); }
.price-card--featured .price-setup-nota { color: var(--color-acento); }
.price-features { display: grid; flex: 1; align-content: start; gap: var(--espacio-3); margin: var(--espacio-5) 0 var(--espacio-6); padding: var(--espacio-5) 0 0; border-top: 1px solid var(--color-borde); list-style: none; }
.price-features li { position: relative; padding-left: 28px; font-size: var(--texto-sm); line-height: 1.5; }
.price-features li::before { position: absolute; top: .1em; left: 0; color: var(--color-primario); content: "✓"; font-weight: 700; }
.price-card .button { width: 100%; }
/* Plan destacado: más grande y en tinta marino */
.price-card--featured { margin-block: calc(var(--espacio-5) * -1); padding: var(--espacio-7) var(--espacio-6) var(--espacio-6); border-color: var(--color-primario-oscuro); background: var(--color-primario-oscuro); box-shadow: var(--sombra-lg); color: var(--color-texto-invertido); }
.price-card--featured h3 { font-size: var(--texto-xl); }
.price-card--featured .price strong { font-size: 3.5rem; }
.price-card--featured .price > span, .price-card--featured .price del, .price-card--featured .price-setup { color: var(--color-texto-invertido-suave); }
.price-card--featured .price-day { color: var(--color-acento); }
.price-card--featured .price-features { border-color: #ffffff2c; }
.price-card--featured .price-features li::before { color: var(--color-acento); }
.price-badge { position: absolute; top: 0; left: var(--espacio-6); margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--color-acento); color: var(--color-primario-oscuro); font-size: var(--texto-xs); font-weight: 700; white-space: nowrap; transform: translateY(-50%); }
.price-terms { display: flex; flex-wrap: wrap; gap: var(--espacio-3) var(--espacio-6); margin: var(--espacio-8) 0 var(--espacio-4); padding: 0; list-style: none; color: var(--color-texto-suave); font-size: var(--texto-sm); }
.price-terms li { position: relative; padding-left: 22px; }
.price-terms li::before { position: absolute; left: 0; color: var(--color-primario); content: "✓"; font-weight: 700; }
.price-single summary { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-primario); font-size: var(--texto-sm); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.price-table-wrap { max-width: 620px; margin-top: var(--espacio-3); overflow-x: auto; border: 1px solid var(--color-borde); border-radius: var(--radio-tarjeta); background: var(--color-superficie); }
.price-table { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); }
.price-table th, .price-table td { padding: var(--espacio-3) var(--espacio-4); border-bottom: 1px solid var(--color-borde); text-align: left; }
.price-table thead th { color: var(--color-texto-suave); font: 700 var(--texto-xs) var(--fuente-principal); letter-spacing: 0; }
.price-table tbody th { font: 500 var(--texto-sm) var(--fuente-principal); letter-spacing: 0; }
.price-table tbody tr:last-child > * { border-bottom: 0; }
.price-table td { white-space: nowrap; }

/* ---------- SECCIÓN: Auditoría gratuita y prueba de 7 días por WhatsApp (#contacto, #auditoria) ---------- */
.contact { padding: var(--espacio-seccion) 0; border-top: 1px solid var(--color-borde); background: var(--color-superficie); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: var(--espacio-8); }
.contact .section-title { max-width: 18ch; font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem); }
.contact .section-lede { font-size: var(--texto-base); }
.audit-list { display: grid; gap: var(--espacio-2); margin: var(--espacio-5) 0 var(--espacio-6); padding: 0; list-style: none; }
.audit-list li { position: relative; padding-left: 28px; }
.audit-list li::before { position: absolute; top: 0; left: 0; color: var(--color-primario); content: "✓"; font-weight: 700; }
.contact-card { display: grid; gap: var(--espacio-4); padding: var(--espacio-6); border: 1px solid var(--color-borde); border-radius: var(--radio-tarjeta); background: var(--color-fondo); }
.contact-card h3 { margin: 0; font-size: var(--texto-lg); }
.contact-card p { margin: 0; }
.contact-datos { display: grid; gap: var(--espacio-3); margin: 0; padding-left: 1.25em; font-weight: 700; }
.contact-datos span { display: block; color: var(--color-texto-suave); font-size: var(--texto-sm); font-weight: 400; }
/* Mensaje de ejemplo con forma de burbuja de WhatsApp enviada */
.contact-ejemplo { padding: var(--espacio-4); border: 1px solid var(--color-whatsapp); border-radius: var(--radio-burbuja); border-top-right-radius: 4px; background: #f1fbf3; color: #141b33; font-size: var(--texto-sm); line-height: 1.6; white-space: pre-line; }
.contact-card .button { justify-self: start; }
.contact-note { color: var(--color-texto-suave); font-size: var(--texto-xs); line-height: 1.55; }
.contact-note a { color: var(--color-primario); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- SECCIÓN: Quién está detrás (#quien) ---------- */
.about { padding: var(--espacio-seccion) 0; background: var(--color-fondo-alterno); }
.about-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: var(--espacio-8); max-width: 900px; }
/* Hueco de la foto: vale para el <span> provisional y para la <img> definitiva */
.about-photo { display: grid; width: 220px; height: 220px; place-items: center; border-radius: 50%; background: var(--color-acento); color: var(--color-primario-oscuro); font: 5.5rem/1 var(--fuente-titulos); object-fit: cover; }
.about .section-title { margin-bottom: var(--espacio-1); }
.about-role { margin: 0 0 var(--espacio-5); color: var(--color-texto-suave); font-weight: 700; }
.about-text { max-width: 56ch; margin: 0 0 var(--espacio-6); font-size: var(--texto-md); line-height: 1.6; }
.about-google { margin: calc(-1 * var(--espacio-4)) 0 var(--espacio-6); font-weight: 700; }
.about-google a { color: inherit; text-underline-offset: 3px; }

/* ---------- SECCIÓN: Preguntas frecuentes (#preguntas) ---------- */
.faq { padding: var(--espacio-seccion) 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--espacio-8); }
.faq .section-lede { font-size: var(--texto-base); }
.faq-list { border-top: 1px solid var(--color-borde-fuerte); }
.faq-item { border-bottom: 1px solid var(--color-borde-fuerte); }
.faq-question { display: flex; width: 100%; min-height: 72px; align-items: center; justify-content: space-between; gap: var(--espacio-5); padding: 18px 0; border: 0; background: transparent; color: var(--color-texto); text-align: left; font: 1.25rem/1.3 var(--fuente-titulos); cursor: pointer; transition: color var(--transicion); }
.faq-question:hover { color: var(--color-primario); }
.faq-question svg { width: 32px; height: 32px; flex: 0 0 auto; padding: 7px; border-radius: 50%; background: var(--color-fondo-icono); color: var(--color-primario); transition: transform .2s; }
.faq-question[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s; }
.faq-answer > div { overflow: hidden; visibility: hidden; transition: visibility .25s; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer > div { visibility: visible; }
.faq-answer p { max-width: 62ch; margin: 0; padding: 0 52px var(--espacio-5) 0; color: var(--color-texto-suave); line-height: 1.65; }
.faq-answer a { color: var(--color-primario); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- SECCIÓN: Llamada a la acción final (#llamada-final) ---------- */
.final-cta { position: relative; overflow: hidden; padding: var(--espacio-seccion) 0; background: var(--color-primario); color: var(--color-texto-invertido); }
.final-inner { position: relative; z-index: 1; }
.final-cta .section-title { max-width: 16ch; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.final-cta p { max-width: 46ch; margin: 0; color: var(--color-texto-invertido); font-size: var(--texto-md); line-height: 1.55; opacity: .9; }
.final-actions { display: flex; flex-wrap: wrap; gap: var(--espacio-3); margin-top: var(--espacio-6); }
.final-actions .button--ghost svg { color: currentColor; }

/* ---------- Responsive de las secciones ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--espacio-7); }
  .demo { width: min(100%, 520px); }
  .products-head { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; max-width: 520px; gap: var(--espacio-7); }
  .trial-band { grid-template-columns: auto minmax(0, 1fr); }
  .trial-band .button { grid-column: 1 / -1; justify-self: start; }
  .price-card--featured { order: -1; margin-block: 0; }
  .contact-grid, .faq-grid { grid-template-columns: 1fr; gap: var(--espacio-7); }
}
@media (max-width: 900px) {
  .pain-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .product { grid-template-columns: 1fr; gap: var(--espacio-6); }
  .product-media { max-width: 280px; }
  .product-copy h3 { font-size: var(--texto-lg); }
}
@media (max-width: 680px) {
  .hero h1 { letter-spacing: -0.015em; }
  .hero-lede { font-size: var(--texto-base); }
  .hero-actions .button { width: 100%; }
  .demo-site { width: 76%; padding: var(--espacio-3) var(--espacio-4) var(--espacio-4); }
  .pain-list { grid-template-columns: 1fr; gap: var(--espacio-6); margin-top: var(--espacio-6); }
  .product-tabs { display: flex; width: 100%; }
  .product-tabs button { flex: 1; padding: 0 var(--espacio-2); }
  .launch-band { margin-bottom: var(--espacio-7); }
  .trial-band { grid-template-columns: 1fr; justify-items: start; gap: var(--espacio-4); margin-bottom: var(--espacio-8); padding: var(--espacio-6) var(--espacio-5); }
  .trial-dias { grid-auto-flow: column; align-items: baseline; gap: var(--espacio-2); }
  .trial-dias strong { font-size: 3.25rem; }
  .trial-band .button { width: 100%; }
  .price-card, .price-card--featured { padding: var(--espacio-6) var(--espacio-5); }
  .price-badge { left: var(--espacio-5); }
  .price-terms { flex-direction: column; margin-top: var(--espacio-7); }
  .contact-card { padding: var(--espacio-5) 20px; }
  .contact-card .button { justify-self: stretch; }
  .about-grid { grid-template-columns: 1fr; gap: var(--espacio-5); }
  .about-photo { width: 120px; height: 120px; font-size: 3rem; }
  .about-text { font-size: var(--texto-base); }
  .about .button, .final-actions .button { width: 100%; }
  .faq-question { font-size: 1.125rem; }
  .faq-answer p { padding-right: 0; }
}

/* Enlace a la página propia de cada producto (bajo el botón) */
.product-more { margin: var(--espacio-4) 0 0; font-size: var(--texto-sm); }
.product-more a, .product-extra h4 a { color: var(--color-primario); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- SECCIÓN: Testimonio (#opiniones) ---------- */
.testimonio { padding: var(--espacio-8) 0; }
.testimonio-card { max-width: 760px; margin: 0 auto; padding: var(--espacio-6); border: 1px solid var(--color-borde); border-radius: var(--radio-tarjeta); background: var(--color-superficie); box-shadow: var(--sombra-sm); text-align: center; }
.testimonio-estrellas { margin: 0 0 var(--espacio-3); color: #e8a400; font-size: var(--texto-lg); letter-spacing: .15em; }
.testimonio-card blockquote { margin: 0; }
.testimonio-card blockquote p { margin: 0; font: var(--texto-md)/1.5 var(--fuente-titulos); text-wrap: pretty; }
.testimonio-card figcaption { margin-top: var(--espacio-4); color: var(--color-texto-suave); font-size: var(--texto-sm); }
.testimonio-card figcaption a { color: var(--color-primario); text-decoration: underline; text-underline-offset: 3px; }