/* ════════════════════════════════════════════════════════════════════════
   css/tienda.css · Estilos propios de la tienda
   ------------------------------------------------------------------------
   Secciones: temas de producto · cabecera · portada · carrusel y tarjetas ·
              ventajas · ficha · características · visor · cómo trabajamos ·
              pie y botón flotante
   Depende de: comun/css/tema.css (colores) y comun/css/base.css (piezas).
   ════════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-size: var(--f-m); line-height: 1.55; }
.envoltura { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 520px) { .envoltura { padding: 0 16px; } }
.titulo { font-family: var(--display); font-weight: 400; letter-spacing: .04em; line-height: 1.1; font-size: clamp(var(--f-2xl), 4.4vw, var(--f-3xl)); margin-top: 6px; }
.centrado { text-align: center; }
section { padding-top: 96px; }

/* ---------- Cabecera ---------- */
/* La cabecera es la común (comun/css/base.css): secciones al centro, modo y «Pomodoro ↗» al final.
   En celular las secciones pasan a .saltos, una fila al inicio de la página. */
.saltos { display: none; }
@media (max-width: 759.98px) {
  .saltos { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; padding: 12px 16px 0; }
  .saltos a { font-family: var(--display); letter-spacing: .06em; font-size: var(--f-xs); color: var(--enlace); text-decoration: none;
    padding: 6px 2px; border-bottom: 1px solid var(--linea-suave); }
}

/* ---------- Temas de producto ----------
   Temas de producto: color y flor de cada modelo (se eligen en el catálogo) */
[data-tema="iris"] { --tema: var(--ciruela); --tema-campo: var(--lavanda-palida); }
[data-tema="laurel"] { --tema: var(--olivo); --tema-campo: var(--salvia-palida); }
[data-tema="amapola"] { --tema: var(--amapola); --tema-campo: var(--campo-verano); }
[data-tema="loto"] { --tema: var(--agua); --tema-campo: var(--campo-invierno); }
[data-tema="girasol"] { --tema: var(--girasol); --tema-campo: var(--girasol-palido); }
[data-tema="cerezo"] { --tema: var(--rosa); --tema-campo: var(--rosa-palida); }
.filete { display: block; width: 210px; max-width: 70%; height: 22px; margin: 10px auto 0; color: var(--oro); }



/* Portada: texto + ilustración del teclado en su halo */
.portada { padding-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .portada { grid-template-columns: 1fr; gap: 34px; padding-top: 34px; } }
.portada h1 { font-family: var(--display); font-weight: 400; font-size: clamp(var(--f-3xl), 6.4vw, var(--f-4xl)); line-height: 1.02; letter-spacing: .02em; margin-top: 10px; }
.portada h1 em { font-family: var(--texto); font-style: italic; font-weight: 500; color: var(--terracota); letter-spacing: 0; }
.portada .filete { margin: 14px 0 0; }
.portada .intro { color: var(--sepia); font-size: var(--f-l); line-height: 1.5; max-width: 26em; margin-top: 16px; }
.portada .acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 900px) { .portada-texto { text-align: center; } .portada .filete { margin: 14px auto 0; } .portada .intro { margin-left: auto; margin-right: auto; } .portada .acciones { justify-content: center; } }
.portada-arte { position: relative; }
.portada-arte svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 900px) { .portada-arte { max-width: 460px; margin: 0 auto; width: 100%; } }
.encabezado-seccion { text-align: center; padding-top: 88px; }

/* ---------- Carrusel y tarjetas ---------- */
.carrusel { margin-top: 44px; }
.grilla { display: flex; gap: 34px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 10px 6px 30px; }
.grilla::-webkit-scrollbar { display: none; }
.grilla .tarjeta { flex: 0 0 calc(50% - 17px); scroll-snap-align: start; }
.grilla[data-cantidad="1"] { justify-content: center; }
@media (max-width: 720px) {
  .grilla { gap: 14px; margin: 0 -16px; padding: 10px 16px 30px; scroll-padding: 0 16px; }
  .grilla .tarjeta { flex-basis: 86%; scroll-snap-align: center; }
}
.carrusel-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 4px; }
.carrusel-nav[hidden] { display: none; }
.puntos { display: flex; gap: 10px; }
.puntos button { width: 11px; height: 11px; padding: 0; border-radius: 50% 0; transform: rotate(45deg); border: 1.2px solid var(--contorno); background: var(--marfil); cursor: pointer; }
.puntos button[aria-current="true"] { background: var(--estado); }

/* Tarjeta: panel vertical con arco, halo y ventana para la foto */
.tarjeta { border-radius: 300px 300px 18px 18px / 230px 230px 18px 18px; overflow: hidden; display: flex; flex-direction: column; }
@media (max-width: 720px) { .tarjeta { border-radius: 200px 200px 16px 16px / 150px 150px 16px 16px; } }
.ventana { position: relative; padding: 0 0 30px; background: radial-gradient(85% 70% at 50% 30%, var(--tema-campo), transparent 75%); }
.semihalo { position: absolute; left: 50%; top: 26px; width: 108%; transform: translateX(-50%); pointer-events: none; overflow: visible; -webkit-mask: linear-gradient(#000 60%, transparent 98%); mask: linear-gradient(#000 60%, transparent 98%); }
.tarjeta-foto { position: relative; display: block; width: 66%; margin: 25% auto 0; border: 2px solid var(--contorno); border-radius: 220px 220px 10px 10px / 110px 110px 10px 10px; background: var(--foto); padding: 40px 16px 14px; cursor: zoom-in; box-shadow: 0 0 0 4px var(--marfil), 0 0 0 5px var(--oro), 0 16px 28px -14px var(--sombra); }
.tarjeta-foto img, .kakemono img, .mini img, .visor img { filter: var(--filtro-foto); }
.tarjeta-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.tarjeta-cuerpo { position: relative; text-align: center; padding: 40px 22px 30px; border-top: 1.5px solid var(--contorno); display: flex; flex-direction: column; align-items: center; flex: 1; }
.emblema { position: absolute; top: -32px; left: 50%; margin-left: -30px; width: 60px; height: 60px; border-radius: 50%; background: var(--marfil); border: 1.5px solid var(--contorno); box-shadow: 0 0 0 4px var(--marfil); display: grid; place-items: center; }
.emblema svg { width: 42px; height: 42px; }
.tarjeta-numero { font-family: var(--display); letter-spacing: .3em; color: var(--tema); font-size: var(--f-xs); }
.tarjeta h3 { font-family: var(--display); font-weight: 400; font-size: var(--f-2xl); letter-spacing: .08em; line-height: 1.1; }
.tarjeta .filete { width: 130px; margin-top: 2px; }
.tarjeta-clave { margin-top: 12px; padding: 4px 18px; border-radius: 999px; background: var(--tema); color: var(--sobre-acento); font-family: var(--display); letter-spacing: .06em; font-size: var(--f-s); border: 1.5px solid var(--contorno); }
.tarjeta-texto { flex: 1; display: flex; flex-direction: column; align-items: center; }
.tarjeta-resumen { color: var(--sepia); font-style: italic; max-width: 24em; margin-top: 12px; }
.conexiones { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.conexiones li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 9px; border: 1px solid var(--oro-claro); border-radius: 999px; font-family: var(--display); font-size: var(--f-xs); letter-spacing: .03em; color: var(--tinta); background: var(--papel); }
.conexiones svg { width: 15px; height: 15px; color: var(--tema); flex: none; }
.tarjeta .precio { font-family: var(--display); font-size: var(--f-2xl); margin-top: 10px; }
.tarjeta-acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Ventajas ---------- */
/* Ventajas: banda oscura con filetes de oro (Beta 1.5: el friso queda solo en cabecera y pie) */
.ventajas { margin-top: 84px; background: var(--banda); color: var(--banda-texto); border-block: 3px double var(--banda-oro); }
/* Las ventajas se reparten solas en hasta 4 columnas; las líneas son el hueco de 1 px de la grilla */
.ventajas .envoltura { display: grid; grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr)); gap: 1px; background: var(--banda-linea); padding: 0; }
.ventajas .item { background: var(--banda); text-align: center; padding: 26px 12px 28px; color: var(--banda-texto); font-style: italic; }
.ventajas .item svg { display: block; width: 30px; height: 30px; margin: 0 auto 8px; color: var(--banda-oro); }
.ventajas b { display: block; font-family: var(--display); font-style: normal; font-weight: 400; letter-spacing: .06em; font-size: var(--f-m); color: var(--banda-titulo); }
@media (max-width: 700px) { .ventajas .envoltura { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Ficha ---------- */
/* Selector de modelos (vuelve al diseño de la v6: botones en una píldora; con muchos modelos pasa a dos líneas) */
.selector-producto { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 26px; padding: 4px; border: 1.5px solid var(--contorno); border-radius: 26px; background: var(--papel); max-width: 100%; }
.selector-producto[hidden] { display: none; }
.selector-producto button { background: none; border: 0; border-radius: 999px; padding: 8px 26px; cursor: pointer; font-family: var(--display); letter-spacing: .08em; color: var(--sepia); }
.selector-producto button[aria-pressed="true"] { background: var(--tema); color: var(--sobre-acento); }
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; margin-top: 42px; align-items: start; }
@media (max-width: 860px) { .ficha { grid-template-columns: 1fr; gap: 30px; } }
/* Ficha: la foto es figura → arco, como el reloj y las láminas del pomodoro (Beta 1.5) */
.kakemono { border-radius: 260px 260px 16px 16px / 120px 120px 16px 16px; padding: 46px 0 0; overflow: hidden; background: radial-gradient(80% 70% at 50% 40%, var(--tema-campo), var(--marfil) 80%); }
.kakemono .principal { display: block; position: relative; width: calc(100% - 56px); margin: 28px; padding: 18px; background: var(--foto); border: 1px solid var(--oro-claro); border-radius: 14px; cursor: zoom-in; font: inherit; box-shadow: 0 14px 28px -18px var(--sombra); }
@media (max-width: 520px) { .kakemono .principal { width: calc(100% - 32px); margin: 16px; padding: 12px; } }
.kakemono .principal img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
#miniaturas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.mini { aspect-ratio: 1; border-radius: 12px; border: 1.5px solid var(--oro-claro); background: var(--foto); padding: 6px; cursor: pointer; }
.mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mini.activa { border-color: var(--tema); box-shadow: 0 0 0 2px var(--tema); }
.mini.vacia { background: transparent; opacity: .6; border-style: dashed; color: var(--oro); font-size: var(--f-xl); cursor: default; }
.info .kicker { color: var(--tema); }
.info h2 { font-family: var(--display); font-weight: 400; font-size: clamp(var(--f-3xl), 6vw, var(--f-4xl)); letter-spacing: .06em; line-height: 1.05; margin-top: 4px; }
.info .lema { font-style: italic; font-size: var(--f-l); color: var(--sepia); }
.info .precio-grande { font-family: var(--display); font-size: var(--f-2xl); margin: 14px 0 2px; color: var(--tinta); }
.info .desc { margin-top: 10px; }
.modos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pagos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 16px; font-family: var(--display); font-size: var(--f-xs); letter-spacing: .04em; color: var(--sepia); }
.pagos::before { content: "Pagas con"; margin-right: 2px; }
.pagos li { background: var(--oro-palido); border-radius: 999px; padding: 2px 12px; color: var(--tinta); }
.modos li { border: 1.5px solid var(--tema); color: var(--tema); background: transparent; border-radius: 999px; padding: 2px 14px; font-size: var(--f-s); font-weight: 500; }
.specs { margin-top: 22px; padding: 10px 22px; border-radius: 14px; }
.specs div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 0; }
.specs div + div { border-top: 1px dashed var(--oro-claro); }
.specs dt { font-family: var(--display); letter-spacing: .06em; color: var(--rotulo); font-size: var(--f-s); padding-top: 1px; }
@media (max-width: 420px) { .specs div { grid-template-columns: 104px 1fr; } }
.compra { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
.cantidad { display: flex; align-items: center; border: 1.5px solid var(--contorno); border-radius: 999px; background: var(--marfil); height: 52px; }
.cantidad button { background: none; border: 0; width: 46px; height: 100%; cursor: pointer; font-size: var(--f-l); color: var(--sepia); }
.cantidad span { min-width: 26px; text-align: center; font-family: var(--display); font-size: var(--f-l); }
.compra .boton.lleno { flex: 1; min-width: 220px; height: 52px; font-size: var(--f-m); }
.nota { color: var(--sepia); font-style: italic; margin-top: 16px; }

/* ---------- Características ---------- */
/* Tabla: son datos → rectángulo con filete, radio 16 como En curso, Tareas y Jornada del pomodoro */
.comparar { margin: 40px auto 0; max-width: 940px; border-radius: 16px; padding: 18px 22px 22px; overflow: hidden; }
/* La tabla muestra hasta 3 modelos a la vez (2 en celular); con más, se desplaza con flechas.
   La columna de nombres queda fija a la izquierda. */
.comparar-vista { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-left: var(--col-etiqueta, 150px); }
.comparar-vista::-webkit-scrollbar { display: none; }
.comparar table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.comparar thead th, .comparar tbody td { scroll-snap-align: start; }
.comparar tbody th, .comparar thead td, .comparar tfoot td:first-child { position: sticky; left: 0; z-index: 1; background: var(--marfil); }
.comparar-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.comparar-nav[hidden] { display: none; }
.comparar-nav span { font-family: var(--display); font-size: var(--f-xs); color: var(--sepia); min-width: 7em; text-align: center; }
.comparar thead th { font-family: var(--display); font-weight: 400; font-size: var(--f-xl); letter-spacing: .06em; padding: 6px 10px 14px; color: var(--tema); text-align: center; vertical-align: bottom; }
.comparar thead small { display: block; font-size: var(--f-xs); letter-spacing: .28em; color: var(--sepia); }
.emblema-mini { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 50%; background: var(--tema-campo); border: 1.5px solid var(--contorno); }
.emblema-mini svg { width: 36px; height: 36px; }
.comparar tbody th { font-family: var(--display); font-weight: 400; color: var(--rotulo); text-align: left; padding: 11px 10px; white-space: nowrap; letter-spacing: .04em; }
.comparar tbody td { text-align: center; padding: 11px 10px; }
.comparar tbody th, .comparar tbody td { border-top: 1px dashed var(--oro-claro); }
.comparar tbody tr:nth-child(odd) td { background: var(--fila-par); }
.comparar .fila-precio td { font-family: var(--display); font-size: var(--f-xl); }
.comparar tfoot td { text-align: center; padding-top: 14px; }
@media (max-width: 560px) { .comparar { padding: 14px 10px 16px; } .comparar thead th { font-size: var(--f-l); padding: 4px 4px 10px; } .comparar tbody th, .comparar tbody td { padding: 9px 5px; font-size: var(--f-s); } .comparar tbody th { white-space: normal; } .comparar tfoot .boton { padding: 9px 12px; font-size: var(--f-xs); } .comparar .fila-precio td { font-size: var(--f-l); } }
.lupa { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--marfil); border: 1.5px solid var(--contorno); color: var(--tinta); }
.lupa svg { width: 20px; height: 20px; }

/* ---------- Visor de fotos ---------- */
dialog.visor { margin: auto; width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 22px 22px 16px; border: 2px solid var(--contorno); border-radius: 22px; background: var(--marfil); color: var(--tinta); box-shadow: inset 0 0 0 5px var(--marfil), inset 0 0 0 6px var(--oro), 0 30px 60px var(--sombra); overflow: visible; }
dialog.visor::backdrop { background: var(--velo); }
.visor figure { background: var(--foto); border: 1.5px solid var(--contorno); border-radius: 12px; padding: 16px; }
.visor img { display: block; width: 100%; max-height: calc(100vh - 170px); object-fit: contain; }
.visor figcaption { text-align: center; font-family: var(--display); letter-spacing: .08em; padding-top: 10px; }
.visor-cerrar, .visor-flecha { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--contorno); background: var(--marfil); cursor: pointer; font-family: var(--display); font-size: var(--f-xl); line-height: 1; color: var(--tinta); display: grid; place-items: center; box-shadow: 0 6px 16px -6px var(--sombra); }
.visor-cerrar { top: -14px; right: -14px; }
.visor-flecha { top: 50%; margin-top: -22px; } .visor-flecha.ant { left: -18px; } .visor-flecha.sig { right: -18px; }
.visor-flecha[hidden] { display: none; }

/* ---------- Cómo trabajamos ---------- */
.servicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-top: 44px; }
@media (max-width: 760px) { .servicio { grid-template-columns: 1fr; } }
.servicio .panel { --c: var(--terracota); --c-campo: var(--campo-verano); text-align: center; border-radius: 160px 160px 14px 14px / 120px 120px 14px 14px; padding: 34px 22px 4px; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(70% 45% at 50% 22%, var(--c-campo), var(--marfil) 70%); }
.servicio .panel[data-estacion="primavera"] { --c: var(--olivo); --c-campo: var(--campo-primavera); }
.servicio .panel[data-estacion="invierno"] { --c: var(--agua); --c-campo: var(--campo-invierno); }
.servicio .medalla { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--marfil); border: 1.5px solid var(--contorno); box-shadow: 0 0 0 4px var(--c-campo), 0 0 0 5px var(--oro); color: var(--c); }
.servicio .medalla svg { width: 36px; height: 36px; }
.servicio h3 { font-family: var(--display); font-weight: 400; letter-spacing: .04em; font-size: var(--f-l); margin-top: 18px; line-height: 1.2; }
.servicio p { color: var(--sepia); margin: 8px 0 24px; flex: 1; }
.descargas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -8px 0 24px; }
.descargas .enlace-servicio { margin: 0; }
.enlace-manual { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--display); font-size: var(--f-xs); letter-spacing: .04em; color: var(--enlace); text-decoration: none; border-bottom: 1px solid var(--oro-claro); padding-bottom: 2px; }
.enlace-manual:hover { color: var(--contorno); border-color: var(--contorno); }
.enlace-manual svg { width: 18px; height: 18px; }
.enlace-servicio { align-self: center; margin: -8px 0 24px; padding: 8px 18px; font-size: var(--f-xs); }
.enlace-servicio svg { width: 18px; height: 18px; }
.enlace-servicio.pronto { font-family: var(--display); font-size: var(--f-xs); letter-spacing: .06em; color: var(--sepia); border: 1px dashed var(--oro-claro); border-radius: 999px; }
@media (max-width: 760px) { .servicio .panel { border-radius: 130px 130px 14px 14px / 70px 70px 14px 14px; } }
.preguntas { max-width: 780px; margin: 52px auto 0; display: flex; flex-direction: column; gap: 10px; }
details { background: var(--marfil); border: 1px solid var(--oro-claro); border-radius: 12px; padding: 14px 20px; transition: border-color var(--t-medio) var(--curva); }
details[open] { border-color: var(--estado); }
summary { cursor: pointer; font-family: var(--display); letter-spacing: .03em; font-size: var(--f-m); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "❧"; color: var(--oro); font-size: var(--f-l); transition: transform var(--t-medio) var(--curva); }
details[open] summary::after { transform: rotate(90deg); color: var(--estado); }
details p { color: var(--sepia); margin-top: 8px; }

.flotante { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 10px; text-decoration: none; background: var(--olivo); color: var(--sobre-acento); padding: 12px 20px 12px 16px; border-radius: 999px; border: 1.5px solid var(--olivo); font-family: var(--display); letter-spacing: .04em; box-shadow: 0 0 0 3px var(--papel), 0 12px 26px -8px var(--sombra); }
.flotante:hover { filter: brightness(1.08); }
.flotante svg { width: 22px; height: 22px; }
@media (max-width: 480px) { .flotante span { display: none; } .flotante { padding: 13px; } }

/* Pétalos alternos más suaves en el medio halo de cada tarjeta (comun/js/arte.js) */
.petalo-suave { fill-opacity: .55; }
.semihalo ellipse { stroke-width: .8; }

/* ---------- Pie ---------- */


/* ---------- Apertura del visor (Beta 1.6): fundido corto, como Ajustes en el pomodoro ---------- */
dialog.visor, dialog.visor::backdrop { transition: opacity var(--t-medio) var(--curva), overlay var(--t-medio) allow-discrete, display var(--t-medio) allow-discrete; }
dialog.visor:not([open]), dialog.visor:not([open])::backdrop { opacity: 0; }
@starting-style { dialog.visor[open], dialog.visor[open]::backdrop { opacity: 0; } }