@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..700&family=Inter:wght@400;500;600&display=swap');

/* ------------------------------------------------------------------
   Willy Boat Trips — sistema visual
   Paleta: Atlántico profundo + ocre canario.
   No se toca ningún ID ni atributo data-*; esto es solo presentación.
------------------------------------------------------------------ */

:root {
	--wb-deep:      #082F49;  /* sky-950, el azul del hero */
	--wb-deep-soft: #0C4A6E;  /* sky-900 */
	--wb-sea:       #0284C7;  /* sky-600 */
	--wb-sea-dark:  #0369A1;  /* sky-700 */
	--wb-accent:    #06B6D4;  /* cyan-500 */
	--wb-foam:      #F0F9FF;  /* sky-50 */
	--wb-ink:       #1E293B;  /* slate-800 */
	--wb-ink-soft:  #64748B;  /* slate-500 */
	--wb-line:      rgba(2, 132, 199, .16);
	--wb-line-soft: rgba(2, 132, 199, .08);
}

/* Los colores de DaisyUI se dejan como estaban: btn-info, text-info y
   bg-info siguen siendo el azul original. Aqui solo se ajusta el radio. */
[data-theme="corporate"] {
	--radius-box:      1rem;
	--radius-field:    .65rem;
	--radius-selector: .65rem;
}

body {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	color: var(--wb-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, .wb-display {
	font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
	letter-spacing: -.025em;
	line-height: 1.08;
}

h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }

p { max-width: 68ch; }

/* Acento cálido para cifras y precios: rompe el monocromo azul */
.wb-price, .wb-figure {
	font-family: "Bricolage Grotesque", "Inter", sans-serif;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
}

/* --- Accesibilidad y movimiento --- */
:focus-visible {
	outline: 2px solid var(--wb-sea);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

/* --- Tarjetas y secciones (aplica a seccion-04, 05, 06, 07, 09) --- */
.card {
	border-color: var(--wb-line-soft) !important;
}

.card:not(.shadow-2xl) {
	box-shadow: 0 1px 2px rgba(11, 43, 60, .04);
}

/* Los iconos de "Incluido" y "Por qué elegirnos" venían a 1000px
   para mostrarse a 64. Se limitan y se suavizan. */
#included img, #features img {
	max-width: 64px;
	height: auto;
	image-rendering: auto;
}

/* --- Reserva: rejilla de checkout --- */
.wb-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.wb-checkout {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
	.wb-summary { position: sticky; top: 6rem; }
}

.wb-summary {
	background: var(--wb-foam);
	border: .5px solid var(--wb-line);
	border-radius: 1rem;
	padding: 1.15rem 1.25rem;
}

.wb-summary dl { margin: 0; }

.wb-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 4px 0;
	font-size: .875rem;
}

/* Tailwind declara .hidden dentro de @layer utilities, y las capas pierden
   frente al CSS sin capa. Sin esta regla, .wb-summary-row{display:flex}
   ganaba y las filas del resumen no se podian ocultar. */
.wb-summary-row.hidden { display: none; }

/* Rejilla de pasajeros y extras. Se hace con CSS propio y no con las
   utilidades de Tailwind, porque los templates se cargan por AJAX y no
   siempre entran a tiempo en el escaneo del CDN. */
.wb-pax-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 2rem;
	row-gap: .25rem;
}

@media (min-width: 640px) {
	.wb-pax-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wb-summary-row dt { color: var(--wb-ink-soft); }
.wb-summary-row dd { margin: 0; text-align: right; font-weight: 500; }

.wb-rule {
	border: 0;
	border-top: .5px solid var(--wb-line);
	margin: .85rem 0;
}

/* --- Selector de pasajeros --- */
.wb-stepper {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wb-stepper button {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: .65rem;
	border: .5px solid var(--wb-line);
	background: #fff;
	color: var(--wb-sea-dark);
	font-size: 1rem;
	cursor: pointer;
	transition: background .15s ease;
}

.wb-stepper button:hover { background: var(--wb-foam); }
.wb-stepper button:active { transform: scale(.96); }

.wb-stepper input {
	width: 64px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Oculta las flechas nativas del input number */
.wb-stepper input::-webkit-outer-spin-button,
.wb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wb-stepper input[type=number] { -moz-appearance: textfield; }

/* --- Señales de confianza --- */
.wb-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem 1rem;
	margin-top: .75rem;
	font-size: .8125rem;
	color: var(--wb-ink-soft);
}

.wb-trust span { display: inline-flex; align-items: center; gap: .35rem; }

/* --- Barra de acción fija en móvil --- */
@media (max-width: 767px) {
	.wb-actions {
		position: sticky;
		bottom: 0;
		background: rgba(255, 255, 255, .96);
		backdrop-filter: blur(8px);
		border-top: .5px solid var(--wb-line);
		padding: .75rem 0;
		margin: 0 -.5rem -.5rem;
		z-index: 20;
	}
	.wb-actions .btn { min-height: 48px; }
}

/* --- Cinta de confianza bajo el hero --- */
.wb-ribbon {
	background: var(--wb-deep);
	color: #E8F1F1;
	font-size: .875rem;
}

.wb-ribbon strong { color: var(--wb-accent); font-weight: 600; }

/* --- Galeria --- */
.wb-galeria {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .6rem;
}

@media (min-width: 768px) {
	.wb-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
	.wb-galeria > button:first-child { grid-column: span 2; grid-row: span 2; }
}

.wb-galeria > button {
	position: relative;
	padding: 0;
	border: 0;
	border-radius: .9rem;
	overflow: hidden;
	cursor: pointer;
	background: var(--wb-foam);
	aspect-ratio: 1 / 1;
	display: block;
}

.wb-galeria img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.wb-galeria > button:hover img,
.wb-galeria > button:focus-visible img { transform: scale(1.05); }

.wb-galeria > button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 47, 73, .35), transparent 45%);
	opacity: 0;
	transition: opacity .3s ease;
}

.wb-galeria > button:hover::after { opacity: 1; }

/* Tailwind aplica margin:0 a todo, lo que anula el centrado automatico
   del <dialog>. Por eso se posiciona a mano. */
dialog#wb_lightbox {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100dvh;
	max-width: 100vw;
	max-height: 100dvh;
	margin: 0;
	border: 0;
	padding: 2vh 3vw;
	background: transparent;
	overflow: hidden;
}

dialog#wb_lightbox[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}

#wb_lightbox::backdrop { background: rgba(8, 47, 73, .92); }

#wb_lightbox img {
	max-width: 100%;
	max-height: 78dvh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: .9rem;
	display: block;
	margin: 0;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.wb-lb-barra {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	color: #E0F2FE;
	font-size: .875rem;
	flex: 0 0 auto;
}

.wb-lb-barra button {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 50%;
	border: 1px solid rgba(224, 242, 254, .35);
	background: rgba(8, 47, 73, .5);
	color: #E0F2FE;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wb-lb-barra button:hover { background: rgba(224, 242, 254, .2); }

/* --- Boton flotante de WhatsApp --- */
#wa_flotante {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9998;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
	transition: transform .2s ease, box-shadow .2s ease;
}

#wa_flotante:hover {
	transform: scale(1.06);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

/* En movil la barra de acciones de la reserva va pegada abajo:
   se sube el boton para que no se solapen. */
@media (max-width: 767px) {
	#wa_flotante { bottom: 84px; width: 52px; height: 52px; font-size: 27px; }
}