/*
 * Fichas ligeras de producto: excursiones de un dia y espectaculos.
 *
 * Reune lo que hasta la Fase 2 vivia en dos bloques <style> dentro de
 * tour-detail.php y show-detail.php, con reglas casi identicas duplicadas entre
 * ambos (galeria, tarjetas de reserva, destacados, desglose de precio). Aqui
 * estan una sola vez y el navegador puede cachearlas.
 *
 * La ficha de circuito NO usa este fichero: public/assets/css/pages/product.css
 * es suyo. Las clases nuevas llevan el prefijo .product-lite- precisamente para
 * que las dos hojas puedan convivir sin pisarse ni un nombre.
 */

/* ---------------------------------------------------------------- Portada */
.tour-hero,
.show-hero {position:relative;display:flex;align-items:center;background:#0a0a0a;overflow:hidden;}
.tour-hero {min-height:420px;padding:2.5rem 0;}
.show-hero {min-height:420px;padding:2.5rem 0;}
/* Fase 3: la portada es un <img> con srcset (antes un div con background-image).
   El <picture> que lo envuelve no debe ser un hijo flex del heroe: display:contents. */
.tour-hero > picture,
.show-hero > picture {display:contents;}
.tour-hero-image,
.show-hero-image {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.tour-hero-overlay,
.show-hero-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(0,0,0,0.45),rgba(0,0,0,0.8));}
.tour-hero h1, .tour-hero p,
.show-hero h1, .show-hero p {color:#fff !important;}
.tour-price-badge,
.show-price-badge {background:rgba(255,255,255,0.15);border-radius:12px;padding:0.85rem 1.5rem;display:inline-block;border:1px solid rgba(255,255,255,0.25);}

/* ------------------------------------------------------------ Miga de pan */
.product-lite-breadcrumb {margin:1.25rem 0 0.25rem;}
.product-lite-breadcrumb-list {list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem 0.5rem;padding:0;margin:0;font-size:0.9rem;}
.product-lite-breadcrumb-item {display:flex;align-items:center;gap:0.5rem;color:#6b7280;}
.product-lite-breadcrumb-item + .product-lite-breadcrumb-item::before {content:"\203A";color:#9ca3af;}
.product-lite-breadcrumb-item a {color:#0a6fb3;text-decoration:none;}
.product-lite-breadcrumb-item a:hover {text-decoration:underline;}
.product-lite-breadcrumb-item [aria-current="page"] {color:#0f172a;font-weight:600;}

/* --------------------------------------------------------------- Secciones */
.product-lite-section,
.tour-section,
.show-section {margin-bottom:2rem;scroll-margin-top:90px;}
.product-lite-section-title,
.tour-section-title,
.show-section-title {font-size:1.5rem;font-weight:600;margin-bottom:1.25rem;padding-bottom:0.75rem;border-bottom:2px solid #e5e7eb;}
.tour-intro,
.show-intro {font-size:1.125rem;line-height:1.75;color:#4b5563;}
.tour-description,
.show-description {line-height:1.75;color:#4b5563;}

/* -------------------------------------------------------- Tira de datos clave */
.product-lite-keyfacts {display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0.75rem;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,0.06);padding:1rem 1.15rem;margin-bottom:1.75rem;}
.product-lite-keyfact {display:flex;gap:0.75rem;align-items:flex-start;min-width:0;}
.product-lite-keyfact-icon {width:2.25rem;height:2.25rem;flex-shrink:0;border-radius:12px;background:#e0f2fe;color:#0a6fb3;display:flex;align-items:center;justify-content:center;font-size:1.05rem;}
.product-lite-keyfact-body {min-width:0;display:flex;flex-direction:column;gap:0.15rem;}
.product-lite-keyfact-label {text-transform:uppercase;letter-spacing:0.04em;font-size:0.72rem;color:#6b7280;font-weight:700;}
.product-lite-keyfact-value {font-weight:700;color:#0f172a;font-size:1.02rem;line-height:1.35;overflow-wrap:anywhere;}
.product-lite-keyfact-sub {font-size:0.82rem;font-weight:500;color:#6b7280;line-height:1.35;}
/* Una celda cuyo valor es una frase (el punto de encuentro) ocupa la fila
   entera: en dos columnas de movil se parte en siete lineas y se come la tira. */
.product-lite-keyfact-wide {grid-column:1 / -1;}
.product-lite-keyfact-wide .product-lite-keyfact-value {font-weight:600;font-size:0.95rem;}

/* --------------------------------------------------------- Programa horario */
.product-lite-timeline {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.product-lite-timeline-step {display:flex;gap:1rem;padding:0 0 1.1rem 0;}
.product-lite-timeline-step:last-child {padding-bottom:0;}
.product-lite-timeline-marker {flex-shrink:0;width:2.6rem;display:flex;flex-direction:column;align-items:center;}
.product-lite-timeline-badge {width:2.1rem;height:2.1rem;border-radius:50%;background:#0a6fb3;color:#fff;font-weight:700;font-size:0.9rem;display:flex;align-items:center;justify-content:center;line-height:1;}
.product-lite-timeline-time {color:#0a6fb3;white-space:nowrap;}
.product-lite-timeline-line {flex:1;width:2px;background:#e5e7eb;margin-top:0.35rem;}
.product-lite-timeline-step:last-child .product-lite-timeline-line {display:none;}
.product-lite-timeline-text {flex:1;min-width:0;line-height:1.65;color:#374151;padding-top:0.15rem;}

/* ------------------------------------------------------------- Destacados */
.highlight-item {display:flex;gap:0.75rem;padding:0.75rem;background:#f9fafb;border-radius:8px;}
.highlight-icon {flex-shrink:0;font-size:1.25rem;line-height:1;}
.highlight-text {flex:1;line-height:1.5;}

/* ----------------------------------------------------- Lugares que se visitan */
.visit-places-list {display:flex;flex-direction:column;gap:0.75rem;}
.visit-place-item {display:flex;align-items:flex-start;gap:0.75rem;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:0.85rem 1rem;}
.visit-place-number {width:2rem;height:2rem;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ecfdf3;color:#15803d;font-weight:700;}
.visit-place-content {flex:1;min-width:0;}
.visit-place-title {font-weight:700;color:#0f172a;line-height:1.3;}
.visit-place-text {color:#4b5563;line-height:1.5;margin-top:0.2rem;}

/* -------------------------------------------- Punto de encuentro y recogida */
.product-lite-place-card {display:flex;gap:0.9rem;align-items:flex-start;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:1rem 1.1rem;height:100%;}
.product-lite-place-icon {width:2.4rem;height:2.4rem;flex-shrink:0;border-radius:12px;background:#e0f2fe;color:#0a6fb3;display:flex;align-items:center;justify-content:center;font-size:1.15rem;}
.product-lite-place-label {font-weight:700;color:#0f172a;margin-bottom:0.2rem;}
.product-lite-place-text {color:#4b5563;line-height:1.6;}

/* ------------------------------------------------------- Incluye / no incluye */
.service-card {background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1.25rem;box-shadow:0 4px 12px rgba(15,23,42,0.04);height:100%;}
.inclusion-list {list-style:none;padding:0;margin:0;}
.inclusion-list li {padding:0.4rem 0;display:flex;align-items:flex-start;gap:0.5rem;line-height:1.5;}

/* --------------------------------------------------------------- Precios */
.price-detail-list {list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.5rem;}
.price-detail-row {display:flex;align-items:center;gap:0.75rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:0.65rem 0.75rem;}
.price-detail-text {display:flex;flex-direction:column;gap:0.1rem;flex:1;}
.price-label {font-weight:600;color:#0f172a;}
.price-value {color:#0a6fb3;font-weight:700;}
.price-dot {width:38px;height:38px;border-radius:12px;background:#e0f2fe;display:flex;align-items:center;justify-content:center;color:#0f172a;font-size:1.05rem;flex-shrink:0;}
.price-dot.child {background:#fef3c7;color:#92400e;}
.product-lite-note {color:#6b7280;font-size:0.9rem;line-height:1.55;}
.price-pill {background:#f2f6ff;border:1px solid #dbe7ff;border-radius:999px;padding:0.35rem 0.65rem;white-space:nowrap;}
.supp-card {background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1rem;display:flex;gap:0.6rem;box-shadow:0 6px 18px rgba(0,0,0,0.04);height:100%;}
.supp-icon {width:42px;height:42px;border-radius:12px;background:#e8f3ff;display:grid;place-items:center;font-size:1.2rem;flex-shrink:0;}

/* --------------------------------------------------- Entradas (espectaculos) */
.ticket-card {background:#fff;border:2px solid #e5e7eb;border-radius:12px;padding:1.25rem;transition:border-color .2s ease,box-shadow .2s ease;height:100%;cursor:pointer;}
.ticket-card:hover {border-color:#0a6fb3;box-shadow:0 4px 12px rgba(10,111,179,0.15);}
.ticket-card.ticket-selected {border-color:#0a6fb3;background:#f0f9ff;box-shadow:0 4px 12px rgba(10,111,179,0.2);}
.ticket-header {border-bottom:1px solid #f3f4f6;padding-bottom:0.75rem;margin-bottom:0.75rem;}
.ticket-name {font-size:1.1rem;color:#1f2937;}
.ticket-area {font-size:0.875rem;}
.ticket-price {padding:0.5rem 0;white-space:nowrap;}
.ticket-description {font-size:0.9rem;line-height:1.5;}

/* ------------------------------------------------------------ Lugar y horario */
.product-lite-facts {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.65rem;}
.product-lite-facts li {display:flex;flex-wrap:wrap;gap:0.35rem 0.65rem;padding:0.7rem 0.85rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;}
.product-lite-facts-term {font-weight:700;color:#0f172a;flex-shrink:0;}
.product-lite-facts-value {color:#4b5563;line-height:1.55;min-width:0;overflow-wrap:anywhere;}

/* --------------------------------------------------------------- Galeria */
.product-lite-gallery {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.65rem;}
.product-lite-gallery-item {position:relative;padding:0;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#f1f5f9;cursor:zoom-in;aspect-ratio:4/3;transition:transform .2s ease,box-shadow .2s ease;}
.product-lite-gallery-item:hover {transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,0.12);}
.product-lite-gallery-item:focus-visible {outline:3px solid #0a6fb3;outline-offset:2px;}
.product-lite-gallery-item picture,
.product-lite-gallery-item .product-lite-gallery-img {display:block;width:100%;height:100%;object-fit:cover;}

.product-lite-lightbox {position:fixed;inset:0;z-index:2000;background:rgba(8,12,20,0.94);display:flex;align-items:center;justify-content:center;padding:1.5rem;}
.product-lite-lightbox[hidden] {display:none;}
body.product-lite-lightbox-open {overflow:hidden;}
.product-lite-lightbox-figure {margin:0;max-width:min(1200px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:0.5rem;}
.product-lite-lightbox-img {max-width:100%;max-height:74vh;border-radius:10px;object-fit:contain;}
.product-lite-lightbox-caption {color:#f8fafc;text-align:center;font-size:0.95rem;line-height:1.5;margin:0;}
.product-lite-lightbox-counter {color:#94a3b8;font-size:0.82rem;margin:0;}
.product-lite-lightbox-close {position:absolute;top:0.75rem;right:0.75rem;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,0.14);color:#fff;font-size:1.1rem;display:grid;place-items:center;}
.product-lite-lightbox-nav {position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,0.14);color:#fff;font-size:1.25rem;display:grid;place-items:center;}
.product-lite-lightbox-prev {left:0.75rem;}
.product-lite-lightbox-next {right:0.75rem;}
.product-lite-lightbox-close:hover,
.product-lite-lightbox-nav:hover {background:rgba(255,255,255,0.28);}

/* ------------------------------------------------------- Reserva y contacto */
.booking-card {background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);padding:1.5rem;}
/* El rotulo del bloque de preguntas pasa de <div> a <h2> (jerarquia de
   encabezados). margin-top:0 y line-height evitan que el estilo por defecto de
   h2 mueva la tarjeta: la clase manda y el aspecto es el mismo de antes. */
.booking-card-title {font-size:1.125rem;font-weight:600;margin-top:0;line-height:1.4;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:2px solid #e5e7eb;display:flex;align-items:center;}
.booking-info-card {background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1rem;display:flex;gap:0.85rem;align-items:flex-start;box-shadow:0 6px 18px rgba(0,0,0,0.04);height:100%;}
.booking-info-icon {width:38px;height:38px;border-radius:12px;background:#e8f3ff;display:grid;place-items:center;font-size:1.1rem;flex-shrink:0;}
.contact-info-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0.75rem;}
.contact-item {display:flex;gap:0.75rem;align-items:flex-start;padding:0.7rem;background:#f9fafb;border-radius:8px;}
.contact-item i {font-size:1.2rem;margin-top:0.15rem;}
.contact-item a {color:#1f2937;text-decoration:none;}
.contact-item a:hover {color:#0a6fb3;}
.price-breakdown {background:#f9fafb;border-radius:8px;padding:1rem;}
.price-row {display:flex;justify-content:space-between;gap:0.75rem;padding:0.4rem 0;color:#6b7280;}
.price-total {display:flex;justify-content:space-between;gap:0.75rem;padding-top:0.75rem;margin-top:0.5rem;border-top:2px solid #e5e7eb;font-size:1.125rem;font-weight:600;}
.total-amount {color:#0a6fb3;}

/* -------------------------------------------------------------- Acordeon */
.accordion-button {font-weight:500;}
.accordion-button:not(.collapsed) {background-color:#f3f4f6;color:#1f2937;}
.accordion-body {line-height:1.6;color:#4b5563;}
.product-lite-faq-heading {margin:0;}
.product-lite-faq-heading .accordion-button {font-size:1rem;font-weight:600;}

/* ------------------------------------------------------------- Responsive */
@media (max-width:991px) {
  .tour-hero, .show-hero {min-height:360px;}
  .highlight-item {font-size:0.95rem;}
}

@media (max-width:575px) {
  .tour-hero, .show-hero {min-height:300px;padding:1.75rem 0;}
  .product-lite-section, .tour-section, .show-section {margin-bottom:1.5rem;}
  .product-lite-section-title, .tour-section-title, .show-section-title {font-size:1.2rem;}
  .tour-intro, .show-intro {font-size:1rem;line-height:1.75;}
  .show-description, .tour-description {font-size:0.98rem;line-height:1.75;}
  .product-lite-keyfacts {grid-template-columns:repeat(2,minmax(0,1fr));gap:0.85rem 0.6rem;padding:0.9rem;}
  .product-lite-keyfact-icon {width:2rem;height:2rem;font-size:0.95rem;}
  .product-lite-keyfact-value {font-size:0.95rem;}
  .product-lite-timeline-step {gap:0.7rem;}
  .product-lite-timeline-marker {width:2.1rem;}
  .product-lite-timeline-badge {width:1.9rem;height:1.9rem;font-size:0.82rem;}
  .product-lite-gallery {grid-template-columns:repeat(2,minmax(0,1fr));}
  .ticket-card {padding:1rem;}
  .booking-card {padding:1rem;}
  .product-lite-lightbox {padding:0.75rem;}
  .product-lite-lightbox-img {max-height:64vh;}
}

/* ------------------------------------- Consentimiento legal del formulario

   main.css:811 pone `display:flex` a `.form-check-label`. La frase de
   consentimiento lleva dos enlaces dentro ("He leido y acepto la <a>Politica
   de privacidad</a> y <a>Terminos del servicio</a>") y flex los promociona a
   elementos flexibles hermanos: medido con CDP a 390x844 en la excursion de un
   dia, la etiqueta salia partida en tres columnas ({label: flex w299 h94,
   links: [block w101 h62 x149, block w98 h94 x259]}). Es la unica casilla de
   la pagina que tiene que entenderse sin ambiguedad.

   No se toca main.css: otros usos de .form-check-label del sitio dependen de
   ese flex. Misma correccion acotada que quote.css:445-461 hace para
   /es/cotizacion y product.css para la ficha de circuito. Aqui se acota al
   envoltorio de las dos plantillas ligeras. */
.tour-section .form-check-label,
.show-section .form-check-label,
.product-lite-section .form-check-label {display:block;}

/* El enlace no se parte a mitad de palabra: quedaba "Politica de" en una linea
   y "privacidad" sola en la siguiente. */
.tour-section .form-check-label a,
.show-section .form-check-label a,
.product-lite-section .form-check-label a {white-space:nowrap;}

/* La casilla medía 23x23, muy por debajo del objetivo tactil de 44x44 de la
   WCAG 2.2 (2.5.8). Se sube la casilla y se le da a la fila entera 44 px de
   alto: pulsar la etiqueta ya marca la casilla, asi que lo que de verdad se
   toca es la fila. El desplazamiento negativo acompana al relleno para que la
   casilla siga colgando a la izquierda del texto, como hace Bootstrap. */
.tour-section .form-check,
.show-section .form-check,
.product-lite-section .form-check {min-height:44px;padding-left:2.5rem;}

.tour-section .form-check-input,
.show-section .form-check-input,
.product-lite-section .form-check-input {width:1.75rem;height:1.75rem;margin-left:-2.5rem;margin-top:0.1rem;}

@media (max-width:575px) {
  /* En movil la casilla llega a 44x44 exactos. */
  .tour-section .form-check,
  .show-section .form-check,
  .product-lite-section .form-check {padding-left:3.5rem;min-height:48px;}

  .tour-section .form-check-input,
  .show-section .form-check-input,
  .product-lite-section .form-check-input {width:2.75rem;height:2.75rem;margin-left:-3.5rem;margin-top:0;}
}

/* ---------------------------------- Barra pegajosa de llamada a la accion

   Misma geometria que la de la ficha de circuito (product.css), porque es el
   mismo componente y el mismo partial. Se repite aqui en vez de mover las
   reglas a main.css: product.css y product-lite.css no se cargan juntas nunca,
   y una tercera hoja compartida por dos paginas obligaria a cargar reglas de
   la barra en todo el sitio.

   --product-sticky-h lo escribe product-lite.js sobre <html> con la altura
   real de la barra, para que el final de la pagina no quede debajo de ella;
   --product-cookie-h la levanta por encima del aviso de cookies mientras este
   visible. */
:root {--product-sticky-h:0px;--product-cookie-h:0px;}

body.has-product-sticky {padding-bottom:calc(var(--product-sticky-h) + 1rem);}

.product-sticky {
  position:fixed;left:0;right:0;bottom:var(--product-cookie-h,0px);
  /* Por debajo del boton flotante de WhatsApp del pie (z-index 1000): la barra
     le reserva el hueco de la derecha con su relleno, pero si ademas se pintara
     por encima, su fondo blanco le comeria medio circulo. */
  z-index:999;
  padding:0.5rem calc(0.75rem + 76px) 0.5rem 0.75rem;
  background:rgba(255,255,255,0.97);
  border-top:1px solid #e5e7eb;
  box-shadow:0 -4px 16px rgba(15,23,42,0.1);
}

.product-sticky[hidden] {display:none;}

.product-sticky__btn {width:100%;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;}

@media (min-width:992px) {
  /* En escritorio el boton de la portada y el del bloque de reserva estan
     siempre a un golpe de rueda: la barra sobra. */
  .product-sticky {display:none !important;}
}

/* --------------------------------------- Compromiso de respuesta en el heroe
   Sustituye al precio retirado (decision del cliente de 2026-09-20) y vive
   junto al boton, no en los datos clave: medido a 390x844 en primera visita,
   los datos clave empiezan en 839 px en la excursion y en 706 en el
   espectaculo, y el aviso de cookies ocupa de 736 a 844. Ahi abajo la unica
   senal de conversion que queda no se veia sin desplazar. El texto hereda el
   blanco del heroe; se le deja algo de peso para que no parezca un pie de
   foto. */
.tour-hero-commitment,
.show-hero-commitment {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}