/*
Theme Name: sëa — Tema hijo de Blocksy
Theme URI: https://www.aguasea.com
Description: Identidad visual de sëa aplicada sobre Blocksy. Dirección "Inmersión": fondo profundo, atmósfera de agua, superficies de vidrio esmerilado y una serif editorial contra el sans del cuerpo. Incluye el sistema completo de WooCommerce y la pantalla de equipos en alquiler.
Author: Yuval Gilad
Template: blocksy
Version: 2.4.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sea-blocksy-child
Tags: woocommerce, dark-mode, custom-colors, custom-logo, e-commerce
*/


/* ==========================================================================
   1. TOKENS — DIRECCIÓN "INMERSIÓN"
   El sitio vive sobre un fondo profundo. Todo lo demás se define contra él.
   ========================================================================== */

:root {

	/* --- Fondos ----------------------------------------------------------
	   --sea-abyss es el suelo de todo el sitio. --sea-surface es el escalón
	   siguiente, para paneles opacos donde el vidrio no alcanza (tablas,
	   formularios largos).
	   --------------------------------------------------------------------- */
	--sea-abyss:   #06191b;
	--sea-deep:    #0a2124;
	--sea-surface: #0d2528;
	--sea-raised:  #123034;

	/* --- Vidrio esmerilado ------------------------------------------------
	   El material de la dirección. Va SIEMPRE sobre un fondo con color o
	   gradiente: sobre negro plano no se ve.
	   --------------------------------------------------------------------- */
	--sea-glass:        rgba(255, 255, 255, 0.055);
	--sea-glass-strong: rgba(255, 255, 255, 0.085);
	--sea-glass-line:   rgba(255, 255, 255, 0.13);
	--sea-hairline:     rgba(255, 255, 255, 0.22);

	/* --- Texto -----------------------------------------------------------
	   Contrastes medidos sobre --sea-abyss:
	   ink 18,5:1 · ink-70 9,7:1 · teal 9,5:1 · ink-45 4,9:1
	   Sobre fondo oscuro el turquesa de marca por fin sirve para texto.
	   --------------------------------------------------------------------- */
	--sea-ink:      #eaf5f5;
	--sea-ink-70:   #a8c4c5;
	--sea-ink-45:   #6f8b8c;
	--sea-teal:     #78cacd;
	--sea-teal-mid: #0fafb7;
	--sea-teal-deep:#007f7f;

	/* --- Semánticos (separados del acento de marca) ----------------------- */
	--sea-ok-bg:   rgba(120, 202, 205, 0.14);
	--sea-ok-fg:   #78cacd;
	--sea-warn-bg: rgba(240, 180, 90, 0.16);
	--sea-warn-fg: #f0b45a;
	--sea-error:   #ff8b8b;

	/* --- Tipografía ------------------------------------------------------
	   Instrument Serif para titulares (contraste alto, editorial) contra
	   Hanken Grotesk para el cuerpo. El logo sigue yendo como SVG.
	   Sofia Pro, del manual, requiere licencia webfont: para migrar el
	   cuerpo alcanza con cambiar --sea-font-body.
	   --------------------------------------------------------------------- */
	--sea-font-body:    'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--sea-font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;

	--sea-fs-display: clamp(3rem, 7vw, 6.5rem);
	--sea-fs-h1:      clamp(2.6rem, 5.5vw, 4.5rem);
	--sea-fs-h2:      clamp(2.2rem, 4.4vw, 3.75rem);
	--sea-fs-h3:      clamp(1.6rem, 2.4vw, 2rem);
	--sea-fs-body:    1.0625rem;
	--sea-fs-small:   0.90625rem;
	--sea-fs-micro:   0.6875rem;

	--sea-lh-display: 1.0;
	--sea-lh-body:    1.7;
	--sea-ls-display: -0.015em;
	--sea-ls-wide:    0.24em;

	/* --- La gota ----------------------------------------------------------
	   Se mantiene del manual: tres esquinas redondeadas, una en punta.
	   --sea-r-pill se adapta solo a la altura del elemento.
	   --------------------------------------------------------------------- */
	--sea-r-drop: 50% 0 50% 50%;
	--sea-r-pill: 999px 0 999px 999px;
	--sea-r-sm:   14px 0 14px 14px;
	--sea-r-md:   28px 0 28px 28px;
	--sea-r-lg:   36px 0 36px 36px;
	--sea-r-xl:   44px 0 44px 44px;

	--sea-control-h: 3.5rem;
	--sea-tap-min:   44px;
}


/* ==========================================================================
   2. LA ATMÓSFERA
   Las cáusticas de agua se arman con gradientes: sin imágenes, sin peso, y
   se adaptan a cualquier ancho. Es lo que separa esta dirección de "un sitio
   con fondo oscuro".
   ========================================================================== */

.sea-caustics {
	background-color: var(--sea-abyss);
	background-image:
		radial-gradient(120% 90% at 78% 8%,  rgba(15, 175, 183, 0.42) 0%, rgba(6, 25, 27, 0) 58%),
		radial-gradient(80% 70% at 12% 82%,  rgba(120, 202, 205, 0.22) 0%, rgba(6, 25, 27, 0) 62%),
		repeating-radial-gradient(circle at 74% 12%, rgba(180, 235, 236, 0.11) 0 1px, transparent 1px 38px),
		repeating-radial-gradient(circle at 18% 76%, rgba(180, 235, 236, 0.07) 0 1px, transparent 1px 52px);
}

/* Variante tenue, para secciones intermedias que no deben competir. */
.sea-caustics--soft {
	background-color: var(--sea-abyss);
	background-image:
		radial-gradient(90% 70% at 85% 10%, rgba(15, 175, 183, 0.20) 0%, rgba(6, 25, 27, 0) 62%),
		repeating-radial-gradient(circle at 82% 14%, rgba(180, 235, 236, 0.06) 0 1px, transparent 1px 44px);
}

/* Halo detrás de un producto o un ícono. */
.sea-halo {
	background-image: radial-gradient(circle at 42% 32%, rgba(120, 202, 205, 0.30), rgba(6, 25, 27, 0) 70%);
}


/* ==========================================================================
   3. PUENTE CON BLOCKSY
   Mapeo de la paleta interna del padre. Si en alguna versión Blocksy renombra
   estas variables, el bloque queda inerte y no rompe nada: el resto del CSS
   no depende de él. En ese caso, cargar la paleta desde Personalizar → Colores.
   ========================================================================== */

:root {
	--theme-palette-color-1: var(--sea-teal);
	--theme-palette-color-2: var(--sea-teal-mid);
	--theme-palette-color-3: var(--sea-ink);
	--theme-palette-color-4: var(--sea-ink-70);
	--theme-palette-color-5: var(--sea-glass-line);
	--theme-palette-color-6: var(--sea-surface);
	--theme-palette-color-7: var(--sea-deep);
	--theme-palette-color-8: var(--sea-abyss);

	--theme-text-color: var(--sea-ink);
	--theme-link-initial-color: var(--sea-teal);
	--theme-link-hover-color: #ffffff;
	--theme-border-color: var(--sea-glass-line);
	--theme-font-family: var(--sea-font-body);
	--theme-content-background-color: var(--sea-abyss);
}


/* ==========================================================================
   4. BASE
   ========================================================================== */

body {
	font-family: var(--sea-font-body);
	font-size: var(--sea-fs-body);
	line-height: var(--sea-lh-body);
	color: var(--sea-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* --------------------------------------------------------------------------
   EL SUELO DEL SITIO
   Blocksy imprime su color de fondo como CSS en línea, DESPUÉS de esta hoja.
   Con la misma especificidad gana el último, así que acá hay que subirla.

   Lo correcto además es fijarlo en Personalizar → General → Fondo del sitio
   (#06191b). Si se hace, estas reglas quedan de más pero no estorban.
   -------------------------------------------------------------------------- */

html { background-color: var(--sea-abyss); }

/* "html body" (0,0,2) le gana a "body" (0,0,1) sin importar el orden.
   El !important es el seguro para cuando el padre lo imprime en el atributo
   style del propio body, donde la especificidad ya no alcanza. */
html body { background-color: var(--sea-abyss) !important; }

/* Contenedores que el padre pinta por su cuenta: se los deja transparentes
   para que la atmósfera llegue hasta el borde. */
#main-container,
.site-main,
main.site-main,
.ct-drawer-canvas,
.entry-content,
[class*="ct-container"] { background-color: transparent; }


/* --------------------------------------------------------------------------
   HEADER Y FOOTER DEL CONSTRUCTOR DE BLOCKSY
   Estas reglas los dejan usables de entrada. Lo prolijo, cuando tengas tiempo,
   es fijar el color de cada fila en Personalizar → Header / Footer: ahí el
   constructor tiene su propio ajuste de fondo por fila y no hay que pelearle.
   -------------------------------------------------------------------------- */

/* EL COLOR DEL HEADER Y DEL FOOTER TAMPOCO SE TOCA DESDE ACÁ.

   Igual que el menú de la cuenta, el constructor de Blocksy los expone como
   ajustes del sitio, por fila:

     Personalizar → Header → (clic en la fila) → Diseño → Color de fondo
     Personalizar → Footer → (clic en la fila) → Diseño → Color de fondo

   Ese ajuste se imprime después de esta hoja y gana siempre. Forzarlo desde
   acá dejaba el pie a medias — la fila pintada y el contenedor no — que es
   justo lo que se veía.

   Valores para la dirección Inmersión: fondo #06191b, texto #eaf5f5,
   enlaces #78cacd al pasar por encima.

   Lo único que queda acá es el panel lateral del menú en celular, que no
   tiene ajuste propio. */

#offcanvas .ct-panel-inner,
#offcanvas .ct-panel-content { background-color: var(--sea-deep); }

/* La franja de título de página que dibuja Blocksy arriba del contenido */
.hero-section,
[class*="hero-section"] { background-color: transparent; background-image: none; }

.hero-section .page-title,
.page-title,
.entry-title { color: var(--sea-ink); }

.hero-section .ct-breadcrumbs,
.ct-breadcrumbs { color: var(--sea-ink-45); }
.ct-breadcrumbs a { color: var(--sea-ink-70); }

/* Aire propio para las pantallas que dibuja WooCommerce.

   El espaciado vertical del área de contenido de Blocksy va en "sin
   espaciado": las páginas armadas con bloques abren con un hero a sangre y
   cualquier relleno del tema padre les deja una franja muerta bajo el header.

   Pero ese ajuste es global. Las pantallas de WooCommerce no tienen hero
   propio —arrancan directo con el menú de la cuenta o con la tabla— así que
   sin relleno quedan pegadas al header. El aire se los da el tema. */

body.woocommerce-account .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-shop .site-main,
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main,
body.single-product .site-main {
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

h1, h2, h3, h4 {
	font-family: var(--sea-font-display);
	font-weight: 400;
	line-height: var(--sea-lh-display);
	letter-spacing: var(--sea-ls-display);
	color: var(--sea-ink);
	text-wrap: balance;
}

h1 { font-size: var(--sea-fs-h1); }
h2 { font-size: var(--sea-fs-h2); }
h3 { font-size: var(--sea-fs-h3); }

h5, h6 {
	font-family: var(--sea-font-body);
	font-weight: 600;
	color: var(--sea-ink);
}

p { text-wrap: pretty; color: var(--sea-ink-70); }

/* La bajada de una sección: más grande y más clara que el cuerpo. */
.sea-lede {
	font-size: 1.125rem;
	line-height: var(--sea-lh-body);
	color: var(--sea-ink-70);
	max-width: 62ch;
}

a { color: var(--sea-teal); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: #ffffff; }

/* Cursiva de la serif: el gesto de énfasis de la dirección.
   Va también sobre el <em> pelado dentro de un titular, para que el editor
   pueda aplicarlo con el botón de cursiva sin depender de una clase —
   Gutenberg no conserva clases dentro del texto enriquecido. */
.sea-em,
h1 em, h2 em, h3 em,
.wp-block-heading em {
	font-family: var(--sea-font-display);
	font-style: italic;
	color: var(--sea-teal);
}

/* Antetítulo */
.sea-eyebrow {
	display: inline-block;
	font-family: var(--sea-font-body);
	font-size: var(--sea-fs-micro);
	font-weight: 600;
	letter-spacing: var(--sea-ls-wide);
	text-transform: uppercase;
	color: var(--sea-teal);
}

/* Wordmark de apoyo. El isologo real va como SVG. */
.sea-wordmark {
	font-family: var(--sea-font-display);
	font-weight: 400;
	line-height: 1;
	color: var(--sea-ink);
}


/* ==========================================================================
   5. SUPERFICIES Y FORMAS
   ========================================================================== */

/* El panel de vidrio: el contenedor por defecto de esta dirección. */
.sea-glass {
	background: var(--sea-glass);
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-md);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.sea-glass--strong { background: var(--sea-glass-strong); }

/* Se mantiene el nombre .sea-card de la v1 para no romper markup existente,
   pero ahora es vidrio. */
.sea-card {
	background: var(--sea-glass);
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-md);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	overflow: hidden;
}

/* Bloque de sección */
.sea-block {
	background: var(--sea-surface);
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-xl);
	padding: clamp(2rem, 4vw, 4.375rem);
}

.sea-block--glow { background: transparent; }
.sea-block--teal { background: var(--sea-teal-deep); border-color: transparent; }
.sea-block--light { background: var(--sea-ink); border-color: transparent; color: var(--sea-abyss); }
.sea-block--light h1,
.sea-block--light h2,
.sea-block--light h3,
.sea-block--light p { color: var(--sea-abyss); }

/* Formas de la gota, sueltas */
.sea-drop   { border-radius: var(--sea-r-drop); }
.sea-cut    { border-radius: var(--sea-r-md); }
.sea-cut-l  { border-radius: var(--sea-r-lg); }
.sea-cut-xl { border-radius: var(--sea-r-xl); }

/* Línea fina de sección */
.sea-rule { height: 1px; background: var(--sea-hairline); border: 0; }

/* Filete superior: para columnas de una serie (el proceso, los pasos).
   Es una clase y no un borde por bloque a propósito: los bordes por lado
   no están soportados en todos los bloques y se pierden al reeditar. */
.sea-topline {
	border-top: 1px solid var(--sea-hairline);
	padding-top: 1.375rem;
}

/* --- Bloques nativos de Gutenberg -----------------------------------------
   Se estilan acá para que las páginas se armen con bloques de WordPress y no
   con marcado a medida: lo que se pega es editable, y el aspecto lo pone el
   tema. Si mañana alguien agrega una pregunta a las frecuentes desde el
   editor, sale bien sin tocar nada.
   -------------------------------------------------------------------------- */

/* Listas con viñeta turquesa */
.wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.wp-block-list li {
	position: relative;
	padding-left: 1.625rem;
	color: var(--sea-ink-70);
}

.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 8px;
	height: 8px;
	border-radius: var(--sea-r-drop);
	background: var(--sea-teal);
}

/* Preguntas frecuentes: el bloque Detalles de WordPress */
.wp-block-details {
	border-bottom: 1px solid var(--sea-glass-line);
	padding: 1.5rem 0;
}

.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	font-family: var(--sea-font-display);
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--sea-ink);
	cursor: pointer;
	list-style: none;
}

/* El triángulo por defecto se reemplaza por un signo que sigue el estado */
.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--sea-font-body);
	font-size: 1.625rem;
	font-weight: 300;
	line-height: 1;
	color: var(--sea-teal);
}

.wp-block-details[open] summary { color: var(--sea-teal); }
.wp-block-details[open] summary::after { content: "−"; }

.wp-block-details > p {
	margin-top: 1rem;
	max-width: 70ch;
	color: var(--sea-ink-70);
}

/* Numeral en serif, como en el proceso */
.sea-numeral {
	font-family: var(--sea-font-display);
	font-size: 2.875rem;
	line-height: 1;
	color: var(--sea-teal);
}

/* Marcador circular */
.sea-marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--sea-r-drop);
	background: var(--sea-glass-strong);
	border: 1px solid var(--sea-glass-line);
	color: var(--sea-teal);
	font-family: var(--sea-font-display);
	font-size: 1.25rem;
	flex: 0 0 auto;
}

/* Etiquetas de estado */
.sea-pill {
	display: inline-flex;
	align-items: center;
	height: 1.875rem;
	padding: 0 0.875rem;
	border-radius: var(--sea-r-sm);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sea-pill--ok   { background: var(--sea-ok-bg);   color: var(--sea-ok-fg); }
.sea-pill--warn { background: var(--sea-warn-bg); color: var(--sea-warn-fg); }
.sea-pill--off  { background: var(--sea-glass);   color: var(--sea-ink-45); }
.sea-pill--live { background: var(--sea-teal);    color: var(--sea-abyss); }


/* ==========================================================================
   6. BOTONES
   Sobre fondo oscuro el botón sólido es claro, no turquesa: el blanco da
   18:1 contra el fondo y no compite con el acento.
   ========================================================================== */

.sea-btn,
.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: var(--sea-control-h);
	padding: 0 2rem;
	border: none;
	border-radius: var(--sea-r-pill);
	background: var(--sea-ink);
	color: var(--sea-abyss);
	font-family: var(--sea-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sea-btn:hover,
.wp-block-button__link:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
	background: var(--sea-teal);
	color: var(--sea-abyss);
}

/* Secundario: contorno sobre el vidrio */
.sea-btn--line,
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sea-ink);
	border: 1px solid var(--sea-hairline);
}

.sea-btn--line:hover,
.is-style-outline .wp-block-button__link:hover {
	background: var(--sea-glass-strong);
	color: #ffffff;
	border-color: var(--sea-teal);
}

/* Acento, para el CTA principal de una sección de color.
   En un botón de Gutenberg la clase adicional queda en el contenedor, no en
   el enlace: por eso la segunda forma del selector. */
.sea-btn--teal,
.wp-block-button.sea-btn--teal .wp-block-button__link {
	background: var(--sea-teal);
	color: var(--sea-abyss);
}

.sea-btn--teal:hover,
.wp-block-button.sea-btn--teal .wp-block-button__link:hover {
	background: #ffffff;
	color: var(--sea-abyss);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
	background: var(--sea-glass);
	color: var(--sea-ink-45);
	cursor: not-allowed;
}


/* ==========================================================================
   7. FORMULARIOS
   El punto delicado de un sitio oscuro. Los campos llevan fondo propio y
   borde visible: un input sin relleno sobre fondo oscuro no se lee como
   campo y la gente no sabe dónde escribir.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	min-height: var(--sea-control-h);
	width: 100%;
	padding: 0 1.125rem;
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-sm);
	background: var(--sea-deep);
	font-family: var(--sea-font-body);
	font-size: 1rem;
	color: var(--sea-ink);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

textarea,
.woocommerce form .form-row textarea {
	padding: 0.9375rem 1.125rem;
	line-height: 1.6;
	min-height: 7rem;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--sea-teal);
	outline: none;
	box-shadow: 0 0 0 3px rgba(120, 202, 205, 0.22);
}

::placeholder { color: var(--sea-ink-45); opacity: 1; }

label,
.woocommerce form .form-row label {
	display: block;
	font-size: var(--sea-fs-small);
	font-weight: 600;
	color: var(--sea-ink-70);
	margin-bottom: 0.5rem;
}

/* El navegador dibuja los desplegables nativos con su propio tema: hay que
   pedirle el oscuro o las opciones salen en blanco sobre blanco. */
select { color-scheme: dark; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--sea-teal);
	outline-offset: 3px;
}


/* ==========================================================================
   8. WOOCOMMERCE — TIENDA
   ========================================================================== */

.woocommerce ul.products li.product {
	background: var(--sea-glass);
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-md);
	overflow: hidden;
	padding: 0 0 1.75rem;
	text-align: left;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: rgba(120, 202, 205, 0.45);
	transform: translateY(-2px);
}

/* Las fotos de producto suelen venir con fondo blanco: el marco claro evita
   el recorte duro contra el fondo oscuro. */
.woocommerce ul.products li.product a img {
	margin: 0 0 1.5rem;
	background: #ffffff;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .sea-loop-cat {
	margin-left: 1.5rem;
	margin-right: 1.5rem;
}

/* Categoría sobre el título, inyectada desde functions.php */
.sea-loop-cat {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sea-teal);
	margin-bottom: 0.5rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sea-font-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.15;
	padding: 0;
	color: var(--sea-ink);
}

.woocommerce ul.products li.product .price {
	display: block;
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--sea-teal);
	margin-top: 0.5rem;
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price del {
	font-size: 1rem;
	font-weight: 400;
	color: var(--sea-ink-45);
	margin-right: 0.5rem;
}

.woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 600; }

.woocommerce ul.products li.product .button {
	display: flex;
	min-height: var(--sea-tap-min);
	margin-top: 1rem;
	font-size: 0.9375rem;
}

.woocommerce span.onsale {
	top: 1rem;
	left: 1rem;
	right: auto;
	min-height: 0;
	min-width: 0;
	padding: 0.375rem 0.875rem;
	border-radius: var(--sea-r-sm);
	background: var(--sea-teal);
	color: var(--sea-abyss);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

.woocommerce .woocommerce-result-count { color: var(--sea-ink-45); font-size: 0.9375rem; }

.woocommerce nav.woocommerce-pagination ul { border: none; display: flex; gap: 0.625rem; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: none; overflow: visible; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sea-tap-min);
	height: var(--sea-tap-min);
	padding: 0;
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-pill);
	font-size: 0.9375rem;
	color: var(--sea-ink-70);
	background: transparent;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--sea-teal);
	border-color: var(--sea-teal);
	color: var(--sea-abyss);
	font-weight: 600;
}


/* ==========================================================================
   9. WOOCOMMERCE — PRODUCTO
   ========================================================================== */

.woocommerce div.product .product_title {
	font-family: var(--sea-font-display);
	font-size: var(--sea-fs-h1);
	font-weight: 400;
	line-height: 1.05;
}

.woocommerce div.product div.images img {
	border-radius: var(--sea-r-lg);
	background: #ffffff;
}

.woocommerce div.product .flex-control-thumbs li img {
	border-radius: var(--sea-r-sm);
	border: 1px solid var(--sea-glass-line);
	background: #ffffff;
}

.woocommerce div.product .flex-control-thumbs li img.flex-active { border: 2px solid var(--sea-teal); }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 2.75rem;
	font-weight: 600;
	color: var(--sea-teal);
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product .woocommerce-product-details__short-description { color: var(--sea-ink-70); }

.woocommerce .quantity .qty {
	width: 5.5rem;
	text-align: center;
	border-radius: var(--sea-r-pill);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product form.cart .variations td.label label {
	font-size: var(--sea-fs-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sea-ink-45);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 2.25rem;
	display: flex;
	gap: 2.5rem;
	border-bottom: 1px solid var(--sea-glass-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 1rem;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--sea-ink-45);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sea-teal);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 0 var(--sea-teal);
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--sea-teal); }


/* ==========================================================================
   10. WOOCOMMERCE — CARRITO Y CHECKOUT
   Es la parte que hay que mirar con más cuidado en un sitio oscuro: si algo
   va a costar conversión, es acá. Las superficies de trabajo suben un
   escalón de luz para separarse del fondo.
   ========================================================================== */

.woocommerce table.shop_table {
	border: none;
	border-radius: 0;
	color: var(--sea-ink);
}

.woocommerce table.shop_table th {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sea-ink-45);
	border-bottom: 1px solid var(--sea-hairline);
	padding-bottom: 1rem;
}

.woocommerce table.shop_table td {
	border-top: none;
	border-bottom: 1px solid var(--sea-glass-line);
	padding: 1.5rem 0.75rem;
	font-variant-numeric: tabular-nums;
}

.woocommerce table.shop_table img { border-radius: var(--sea-r-sm); background: #ffffff; }

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--sea-surface);
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-lg);
	padding: 2.25rem;
}

.woocommerce-cart .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
	font-size: 2rem;
	font-weight: 600;
	color: var(--sea-teal);
}

.woocommerce-checkout #payment { background: transparent; border-radius: 0; }

.woocommerce-checkout #payment ul.payment_methods {
	border: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.woocommerce-checkout #payment ul.payment_methods li {
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-md);
	padding: 1.25rem 1.375rem;
	margin: 0;
	background: var(--sea-glass);
}

.woocommerce-checkout #payment div.payment_box {
	background: transparent;
	color: var(--sea-ink-70);
	font-size: var(--sea-fs-small);
	line-height: 1.6;
	padding: 0.75rem 0 0;
	margin: 0;
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: none;
	border-left: 2px solid var(--sea-teal);
	border-radius: var(--sea-r-md);
	padding: 1.125rem 1.375rem 1.125rem 3.25rem;
	background: var(--sea-surface);
	color: var(--sea-ink);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--sea-teal); top: 1.125rem; }

.woocommerce-error { border-left-color: var(--sea-error); color: var(--sea-error); }
.woocommerce-error::before { color: var(--sea-error); top: 1.125rem; }


/* ==========================================================================
   11. WOOCOMMERCE — MI CUENTA
   ========================================================================== */

/* --- 11.a Acceso y registro ------------------------------------------------
   Es la primera pantalla que ve un cliente que no inició sesión, y la que
   WooCommerce deja más cruda. Dos paneles de vidrio, uno por columna.
   -------------------------------------------------------------------------- */

.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce #customer_login h2 {
	font-family: var(--sea-font-display);
	font-size: var(--sea-fs-h3);
	margin-bottom: 1.25rem;
}

.woocommerce #customer_login {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem;
	align-items: start;
}

.woocommerce #customer_login > div,
.woocommerce #customer_login .col-1,
.woocommerce #customer_login .col-2 {
	width: 100%;
	max-width: none;
	float: none;
	background: var(--sea-glass);
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-lg);
	padding: 2.25rem 2rem;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.woocommerce form.login,
.woocommerce form.register {
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.woocommerce form.login .form-row,
.woocommerce form.register .form-row { padding: 0 0 1.125rem; margin: 0; }

/* Casilla "Recordarme": la nativa es invisible sobre fondo oscuro. */
.woocommerce form .form-row .input-checkbox,
.woocommerce-form__input-checkbox {
	width: 1.125rem;
	height: 1.125rem;
	min-height: 0;
	margin-right: 0.5rem;
	accent-color: var(--sea-teal);
	vertical-align: middle;
}

.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	color: var(--sea-ink-70);
	margin-bottom: 0;
}

.woocommerce-LostPassword { margin: 0.75rem 0 0; font-size: var(--sea-fs-small); }

/* --- 11.b Estructura de la cuenta ------------------------------------------ */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

/* La pantalla de acceso no lleva la grilla de dos columnas. */
.woocommerce-account:not(.logged-in) .woocommerce { display: block; }

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	font-size: 1.125rem;
	color: var(--sea-ink-70);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--sea-font-display);
	margin-bottom: 1rem;
}

/* --- 11.c Pedidos, descargas y direcciones --------------------------------- */

.woocommerce-account .woocommerce-orders-table__cell-order-number a { font-weight: 600; }

.woocommerce-account .woocommerce-orders-table .button,
.woocommerce-account .woocommerce-Message .button {
	min-height: var(--sea-tap-min);
	padding: 0 1.25rem;
	font-size: 0.9375rem;
}

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}

.woocommerce-account .woocommerce-Address {
	width: auto;
	float: none;
	background: var(--sea-glass);
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-md);
	padding: 1.75rem;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.875rem;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-size: 1.375rem; }
.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: 1.8; color: var(--sea-ink-70); }

/* --- 11.d Datos de la cuenta ----------------------------------------------- */

.woocommerce-EditAccountForm fieldset {
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-md);
	padding: 1.75rem;
	margin: 2rem 0 1.5rem;
	background: var(--sea-glass);
}

.woocommerce-EditAccountForm legend {
	font-family: var(--sea-font-display);
	font-size: 1.375rem;
	color: var(--sea-ink);
	padding: 0 0.5rem;
}

.woocommerce-EditAccountForm .form-row { padding: 0 0 1.125rem; margin: 0; }
.woocommerce-EditAccountForm em { color: var(--sea-ink-45); font-size: var(--sea-fs-small); font-style: normal; }

/* --- 11.e Navegación lateral -----------------------------------------------
   LOS COLORES DE ESTE MENÚ NO SE TOCAN DESDE ACÁ.

   Blocksy los expone como ajustes del sitio en
   Personalizar → General → Página de la cuenta → Diseño
   (texto de navegación, fondo de navegación, separador), y de ahí salen las
   variables --account-nav-* que ganan a cualquier regla de esta hoja.

   Pelearle con CSS es pelearle al dueño del sitio, no al tema padre: si
   mañana alguien cambia ese color desde el Personalizador y no pasa nada,
   la culpa sería de este archivo. Así que acá queda solo la disposición —
   espaciado, área táctil, tipografía — y el color vive en su ajuste.

   Valores cargados para la dirección Inmersión:
     Texto      #a8c4c5   ·  activo #78cacd
     Fondo      #0d2528   ·  activo #123034
     Separador  #1d3a3d
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }

/* Área táctil y ritmo de los ítems. Sin color: eso es del Personalizador. */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 0.8125rem;
	min-height: var(--sea-tap-min);
	padding: 0.875rem 1.125rem;
	font-size: 1rem;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { font-weight: 600; }

/* Los iconos siguen el color del texto del ítem, sea cual sea. */
.woocommerce-account .woocommerce-MyAccount-navigation li a svg,
.woocommerce-account .woocommerce-MyAccount-navigation li a svg * {
	fill: currentColor;
	stroke: currentColor;
	color: inherit;
	opacity: 1;
}


/* ==========================================================================
   12. MI CUENTA → MIS EQUIPOS EN ALQUILER
   ========================================================================== */

.sea-equipos { display: flex; flex-direction: column; gap: 1.5rem; }

.sea-service {
	display: flex;
	align-items: center;
	gap: 1.625rem;
	flex-wrap: wrap;
	border-radius: var(--sea-r-lg);
	padding: 2rem 2.25rem;
	background-color: var(--sea-teal-deep);
	background-image: radial-gradient(90% 120% at 88% 0%, rgba(120, 202, 205, 0.42) 0%, rgba(0, 127, 127, 0) 60%);
	color: #ffffff;
}

.sea-service__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	flex: 0 0 3.5rem;
	border-radius: var(--sea-r-drop);
	background: rgba(255, 255, 255, 0.18);
}

.sea-service__body { display: flex; flex-direction: column; gap: 0.375rem; }

.sea-service__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #b7e4e5;
}

.sea-service__when {
	font-family: var(--sea-font-display);
	font-size: 1.75rem;
	color: #ffffff;
}

.sea-service__what { font-size: 0.9375rem; color: #d6efef; }
.sea-service__actions { margin-left: auto; display: flex; gap: 0.75rem; flex-wrap: wrap; }

.sea-equipos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}

.sea-equipo {
	display: flex;
	gap: 1.125rem;
	border: 1px solid var(--sea-glass-line);
	border-radius: var(--sea-r-md);
	padding: 1.25rem;
	background: var(--sea-glass);
}

.sea-equipo__media {
	flex: 0 0 4.625rem;
	height: 5.75rem;
	border-radius: var(--sea-r-sm);
	background: var(--sea-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sea-equipo__media img { width: 100%; height: 100%; object-fit: contain; }

.sea-equipo__body { display: flex; flex-direction: column; gap: 0.375rem; align-items: flex-start; }
.sea-equipo__name { font-family: var(--sea-font-display); font-size: 1.25rem; line-height: 1.15; color: var(--sea-ink); }
.sea-equipo__meta { font-size: 0.875rem; color: var(--sea-ink-45); }
.sea-equipo__fee  { font-size: 0.9375rem; color: var(--sea-ink-70); }

.sea-empty {
	border: 1px dashed var(--sea-glass-line);
	border-radius: var(--sea-r-lg);
	padding: 3rem 2rem;
	text-align: center;
	background: var(--sea-glass);
}

.sea-empty h3 { margin: 0 0 0.5rem; }
.sea-empty p  { margin: 0 auto 1.5rem; max-width: 42ch; }


/* ==========================================================================
   13. RESPONSIVE Y ACCESIBILIDAD
   ========================================================================== */

@media (max-width: 782px) {

	.woocommerce ul.products li.product .button,
	.woocommerce a.button,
	.woocommerce button.button { min-height: var(--sea-tap-min); }

	.sea-service { flex-direction: column; align-items: flex-start; }
	.sea-service__actions { margin-left: 0; }

	/* La cuenta pasa a una columna: el menú arriba, el contenido debajo. */
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a { min-height: var(--sea-tap-min); }

	.woocommerce #customer_login > div,
	.woocommerce #customer_login .col-1,
	.woocommerce #customer_login .col-2 { padding: 1.75rem 1.5rem; }

	.woocommerce table.shop_table_responsive,
	.woocommerce-account .woocommerce-orders-table { display: block; overflow-x: auto; }

	/* En pantallas chicas las cáusticas se concentran arriba: en vertical,
	   repartidas, ensucian la lectura. */
	.sea-caustics {
		background-image:
			radial-gradient(140% 60% at 70% 0%, rgba(15, 175, 183, 0.38) 0%, rgba(6, 25, 27, 0) 60%),
			repeating-radial-gradient(circle at 70% 4%, rgba(180, 235, 236, 0.09) 0 1px, transparent 1px 34px);
	}
}

/* El desenfoque de vidrio es caro en GPU: si el equipo pide menos
   movimiento, se cambia por un fondo sólido equivalente. */
@media (prefers-reduced-motion: reduce) {

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.sea-glass, .sea-card {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: var(--sea-surface);
	}
}