/* ==========================================================================
   Capítulos Culturales — Proceso de reserva
   Carrito, caja, confirmación y Mi cuenta.

   Reescrita sobre el marcado propio de `theme/capitulos-child/woocommerce/`.
   La versión anterior vestía el marcado de WooCommerce tal cual venía: tablas
   de seis columnas con el `thead` escondido, importes alineados con anchos de
   celda y una capa de correcciones encima de otra. Ahora las plantillas emiten
   listas y pares rótulo/importe, y esta hoja solo tiene que maquetarlos.

   Orden:
     1.  Cifras
     2.  Envoltorio de página (cabecera, pasos, garantías)
     3.  Avisos
     4.  Botones
     5.  Campos de formulario
     6.  Carrito
     7.  Resumen y totales
     8.  Caja
     9.  Confirmación y detalle del pedido
     10. Mi cuenta
     11. Panel lateral del carrito
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cifras

   Regla de marca, no de página: ninguna cifra va en la tipografía de acento.
   Playfair lleva cifras de estilo antiguo —el 3 y el 9 bajan de la línea base,
   el 1 es más estrecho que el 8— y una columna de importes con ellas no se
   alinea ni se compara. Todo lo que sea número se pone en Inter con cifras de
   ancho fijo.
   -------------------------------------------------------------------------- */

.cc-num,
.cc-num .amount,
.woocommerce .amount,
.woocommerce .woocommerce-Price-amount,
.woocommerce .quantity .qty,
.woocommerce .product-quantity,
.woocommerce .product-price,
.woocommerce .product-subtotal,
.woocommerce .product-total {
	font-family: var(--cc-font-numeric);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	letter-spacing: 0;
}

/* El símbolo de moneda, un punto más pequeño: acompaña a la cifra, no compite. */
.woocommerce .woocommerce-Price-currencySymbol { font-size: 0.86em; }

/* --------------------------------------------------------------------------
   2. Envoltorio de página — lo compone Elementor en scripts/design/parts/shop.php
   -------------------------------------------------------------------------- */

.cc-shop-head { padding-block: var(--cc-space-9) var(--cc-space-5); }
.cc-shop-head .cc-shop__lead { max-width: 58ch; }

.cc-shop__title {
	margin: 0;
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: var(--cc-type-page-title);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--cc-black);
}

.cc-shop__lead {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--cc-text-muted);
}

.cc-shop-body { padding-block-start: 0; }
.cc-shop-body > .e-con-inner > * { margin-block-start: 0; }

/* La caja de 1200 px ya la pone el envoltorio de Elementor: si WooCommerce pone
   la suya encima, la tabla queda indentada respecto al titular. */
.cc-shop-body .woocommerce,
.cc-shop-body .woocommerce-account,
.cc-shop-body .woocommerce-cart-form {
	max-width: none;
	margin-inline: 0;
	padding: 0;
}

.woocommerce .woocommerce-breadcrumb { display: none; }

/* Barra de pasos de la caja: una línea continua que avanza. El tramo recorrido
   se pinta en oro, y el número va en un disco para que la posición no dependa
   del color.

   Se llamaba `cc-step`, igual que los principios numerados de la portada, y las
   dos hojas se pisaban: el filete de 2 px y el disco del número aparecían bajo
   cada principio del Home. Son componentes distintos y ahora tienen nombres
   distintos. */
.cc-checkout-steps { margin-block-start: var(--cc-space-6); }

.cc-checkout-step {
	flex: 1 1 0;
	min-width: 0;
	padding-block-end: var(--cc-space-3);
	border-block-end: 2px solid var(--cc-border);
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

/* El widget de encabezado envuelve el contenido en `.elementor-heading-title`:
   el flex hay que aplicarlo ahí o el número y el texto se pegan. */
.cc-checkout-step .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	min-width: 0;
}

.cc-checkout-step span {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--cc-stone);
	border-radius: 50%;
	font-family: var(--cc-font-numeric);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: var(--cc-type-label);
	letter-spacing: 0;
	color: var(--cc-text-muted);
}

.cc-checkout-step--done,
.cc-checkout-step--on { border-block-end-color: var(--cc-gold); }

.cc-checkout-step--done span {
	background-color: var(--cc-gold);
	border-color: var(--cc-gold);
	color: var(--cc-black);
}

.cc-checkout-step--on { color: var(--cc-black); }

.cc-checkout-step--on span {
	border-color: var(--cc-gold);
	border-width: 2px;
	color: var(--cc-black);
	font-weight: 600;
}

/* Franja de garantías */
.cc-shop-guarantees {
	padding-block: var(--cc-space-8);
	border-block-start: 1px solid var(--cc-border);
}

.cc-guarantee .cc-icon { color: var(--cc-gold); }

.cc-guarantee__title {
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cc-black);
}

.cc-guarantee__text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--cc-text-muted);
}

/* «Pedido recibido» es un endpoint de la página de la caja: comparten árbol de
   Elementor, así que se sirven las dos cabeceras y se enseña la que toca. */
.cc-shop-head--done { display: none; }
.woocommerce-order-received .cc-shop-head--done { display: flex; }
.woocommerce-order-received .cc-shop-head--checkout { display: none; }

/* --------------------------------------------------------------------------
   3. Avisos
   -------------------------------------------------------------------------- */

.cc-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-space-4);
	margin: 0 0 var(--cc-space-6);
	padding: var(--cc-space-4) var(--cc-space-5);
	border: 1px solid var(--cc-border);
	border-inline-start: 2px solid var(--cc-gold);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--cc-text);
}

/* El pseudoelemento de WooCommerce dibujaba su propio icono encima del nuestro. */
.cc-notice::before,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none !important; display: none !important; }

.cc-notice__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	margin-block-start: 0.05em;
	border-radius: 50%;
	background-color: var(--cc-gold);
	color: var(--cc-black);
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
}

.cc-notice__list { margin: 0; padding: 0; list-style: none; }
.cc-notice__list li + li { margin-block-start: var(--cc-space-2); }
.cc-notice p:last-child { margin-block-end: 0; }

/* El aviso trae su propio botón —«Ver carrito», «Deshacer»— y venía flotado a
   la derecha, saliéndose de la caja. */
.cc-notice .button {
	margin-inline-start: auto;
	align-self: center;
	float: none;
}

.cc-notice--error {
	border-inline-start-color: var(--cc-error);
	background-color: rgba(179, 38, 30, 0.05);
}

.cc-notice--error .cc-notice__mark { background-color: var(--cc-error); color: var(--cc-white); }

.cc-notice--success { border-inline-start-color: var(--cc-green); }
.cc-notice--success .cc-notice__mark { background-color: var(--cc-green); color: var(--cc-ivory); }

/* --------------------------------------------------------------------------
   4. Botones

   La forma del botón —medidas, tipografía, variantes— vive en base.css §4 y no
   se repite aquí. Esta sección solo hace dos cosas:

     a) vestir con esa forma los botones que imprime WooCommerce sin pasar por
        nuestras plantillas (avisos, «Mis reservas», pasarelas);
     b) ganar en especificidad a `.button.alt`, con el que WooCommerce pinta sus
        botones principales y de donde salía el morado de la tienda. Su selector
        tiene dos clases, así que el nuestro lleva también el nombre de etiqueta
        en lugar de recurrir a !important.
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce-page #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2);
	min-height: 48px;
	padding: 0 26px;
	border: 1px solid var(--cc-gold);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-gold);
	color: var(--cc-black);
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page #place_order:hover {
	background-color: var(--cc-gold-dark);
	border-color: var(--cc-gold-dark);
	color: var(--cc-black);
}

/* El secundario del sistema (`.cc-btn--secondary-light`) tiene que volver a
   declararse con la especificidad de WooCommerce o el oro del bloque de arriba
   se lo come: cupón, «Actualizar selección» y acciones del pedido son
   secundarios y no deben competir con la acción principal de la pantalla. */
.woocommerce a.button.cc-btn--secondary-light,
.woocommerce button.button.cc-btn--secondary-light,
.woocommerce input.button.cc-btn--secondary-light {
	background-color: transparent;
	border-color: var(--cc-green);
	color: var(--cc-green);
}

.woocommerce a.button.cc-btn--secondary-light:hover,
.woocommerce button.button.cc-btn--secondary-light:hover,
.woocommerce input.button.cc-btn--secondary-light:hover {
	background-color: var(--cc-green);
	border-color: var(--cc-green);
	color: var(--cc-ivory);
}

.woocommerce .button:focus-visible {
	outline: 2px solid var(--cc-black);
	outline-offset: 2px;
}

.cc-btn--block { width: 100%; }

/* Deshabilitado: se atenúa a propósito y el cursor lo explica. «Actualizar
   selección» empieza así y parecía un fallo de estilo. */
.woocommerce .button:disabled,
.woocommerce .button[disabled],
.cc-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   5. Campos de formulario
   -------------------------------------------------------------------------- */

.woocommerce form .form-row {
	padding: 0;
	margin-block-end: var(--cc-space-4);
}

.woocommerce form .form-row label {
	display: block;
	margin-block-end: var(--cc-space-2);
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cc-text);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem var(--cc-space-4);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
	font-family: var(--cc-font-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--cc-text);
}

.woocommerce form .form-row textarea { min-height: 6rem; }

/* Ver `base.css`: el borde del campo enfocado es el indicador de foco y va con
   el oro de lectura, que llega a 3:1. En la caja importa más que en ninguna
   otra parte: es el único formulario largo del sitio. */
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--cc-gold-text);
	box-shadow: 0 0 0 3px var(--cc-gold-soft);
}

/* La descripción del campo —«solo lo usamos si hay un cambio de última hora»—
   explica por qué se pide el dato: va bajo el campo, no encima. */
.woocommerce form .form-row .description {
	margin-block-start: var(--cc-space-2);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--cc-text-muted);
}

/* El asterisco venía en rojo de sistema, ajeno a la paleta. */
.woocommerce form .form-row .required,
.woocommerce .required {
	color: var(--cc-gold-text);
	text-decoration: none;
	border: 0;
}

.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--cc-error); }

/* Select2 trae su propio interlineado y su propio relleno: el campo real medía
   48 px y el que ve el visitante, 88. Se iguala por alto real, no por relleno. */
.woocommerce .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: 3rem;
	min-height: 3rem;
	padding: 0 var(--cc-space-4);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	font-family: var(--cc-font-body);
	color: var(--cc-text);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	height: calc(3rem - 2px);
	inset-inline-end: var(--cc-space-3);
}

/* --------------------------------------------------------------------------
   6. Carrito
   -------------------------------------------------------------------------- */

/* Lista y resumen, uno al lado del otro en escritorio. `:has()` en lugar del
   `body class`: con la página compuesta en Elementor, `woocommerce-cart` no
   siempre llega, pero `.cc-cart` lo pone nuestra propia plantilla. */
@media (min-width: 1025px) {
	.woocommerce:has(> .cc-cart) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 22rem;
		align-items: start;
		gap: var(--cc-space-9);
	}

	.woocommerce:has(> .cc-cart) > .cc-cart { grid-column: 1; }

	.woocommerce:has(> .cc-cart) > .cart-collaterals {
		grid-column: 2;
		position: sticky;
		top: 96px;
		width: 100%;
	}
}

.cc-cart__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--cc-border);
}

.cc-cart__item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto 2rem;
	align-items: start;
	gap: var(--cc-space-5);
	padding-block: var(--cc-space-6);
	border-block-end: 1px solid var(--cc-border);
}

.cc-cart__media img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--cc-radius-sm);
	margin: 0;
}

.cc-cart__name {
	margin: 0;
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.cc-cart__name a {
	color: var(--cc-text);
	text-decoration: none;
	transition: color var(--cc-duration-fast) var(--cc-ease);
}

.cc-cart__name a:hover { color: var(--cc-gold-text); }

/* Fecha de salida y demás datos de la reserva: es lo que distingue una línea de
   otra, así que se lee como una ficha de datos y no como texto en negrita.

   Son dos marcados distintos y se maquetan distinto:
     - en el carrito y en la caja, `wc_get_formatted_cart_item_data()` imprime
       un `<dl>` de `dt`/`dd` hermanos → rejilla de dos columnas;
     - en el pedido, `wc_display_item_meta()` imprime `<li><strong>Clave:</strong>
       <p>valor</p></li>` → los dos datos van dentro del mismo hijo, así que la
       rejilla no puede repartirlos y se deja en línea. */
.woocommerce .variation,
.woocommerce .wc-item-meta {
	margin: var(--cc-space-3) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--cc-text-muted);
}

.woocommerce .variation {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 var(--cc-space-2);
}

.woocommerce .variation dt {
	grid-column: 1;
	margin: 0;
	font-weight: 500;
	color: var(--cc-text-muted);
}

.woocommerce .variation dd {
	grid-column: 2;
	margin: 0;
	color: var(--cc-text);
}

.woocommerce .variation dd p { display: inline; margin: 0; }

.woocommerce .wc-item-meta li { margin: 0 0 var(--cc-space-1); }
.woocommerce .wc-item-meta strong { font-weight: 500; margin-inline-end: 0.35em; }
.woocommerce .wc-item-meta p { display: inline; margin: 0; color: var(--cc-text); }

.cc-cart__unit {
	margin: var(--cc-space-3) 0 0;
	font-size: 0.8125rem;
	color: var(--cc-text-muted);
}

.cc-cart__controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--cc-space-3);
}

.cc-cart__line-total {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--cc-text);
}

.cc-cart__qty { display: flex; align-items: center; gap: var(--cc-space-2); }

.cc-cart__qty-label {
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

/* Paso a paso de «personas»: los botones tienen área táctil real y el campo
   central sigue siendo el `input.qty` que espera WooCommerce. */
.cc-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--cc-stone);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
	overflow: hidden;
}

.cc-qty__step {
	flex: none;
	width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cc-text);
	font-family: var(--cc-font-body);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--cc-duration-fast) var(--cc-ease);
}

.cc-qty__step:hover:not(:disabled) { background-color: var(--cc-green-soft); }
.cc-qty__step:disabled { opacity: 0.3; cursor: not-allowed; }

.woocommerce .cc-qty .qty,
.woocommerce .quantity .qty {
	width: 3rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	font-size: 0.9375rem;
	font-weight: 500;
	text-align: center;
	color: var(--cc-text);
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Sin el paso a paso, el campo necesita su propia caja. */
.cc-qty:not(.cc-qty--stepper) .qty { width: 5rem; }

/* Las flechas del navegador sobran: los botones hacen ese trabajo, y con área
   táctil suficiente. */
.cc-qty--stepper .qty::-webkit-outer-spin-button,
.cc-qty--stepper .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cc-cart__remove { justify-self: end; }

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--cc-border);
	border-radius: 50%;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--cc-text-muted) !important;
	text-decoration: none;
	transition:
		color var(--cc-duration-fast) var(--cc-ease),
		border-color var(--cc-duration-fast) var(--cc-ease);
}

.woocommerce a.remove:hover {
	background-color: transparent !important;
	border-color: var(--cc-gold-text);
	color: var(--cc-gold-text) !important;
}

/* Acciones bajo la lista: cupón a la izquierda, actualizar a la derecha. */
.cc-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--cc-space-5);
	padding-block-start: var(--cc-space-6);
}

.cc-cart__coupon { flex: 1 1 22rem; width: 100%; min-width: 0; max-width: 32rem; }

.cc-cart__coupon-label {
	display: block;
	margin-block-end: var(--cc-space-2);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

.cc-cart__coupon-field { display: flex; align-items: stretch; gap: var(--cc-space-3); min-width: 0; }

.woocommerce .cc-cart__coupon-field .input-text {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	min-height: 3rem;
	padding: 0.75rem var(--cc-space-4);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
	font-family: var(--cc-font-body);
	font-size: 1rem;
}

.cc-cart__coupon-field .button { flex: 0 0 auto; }
.coupon-error-notice { margin-block-start: var(--cc-space-2); font-size: 0.8125rem; color: var(--cc-error); }

/* Carrito vacío: no ha pasado nada malo, aún no hay nada elegido. */
.cc-empty {
	padding-block: var(--cc-space-9);
	text-align: center;
}

.cc-empty__title {
	margin: 0 0 var(--cc-space-3);
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--cc-black);
}

.cc-empty__text {
	margin: 0 auto var(--cc-space-6);
	max-width: 44ch;
	color: var(--cc-text-muted);
}

.cc-empty__cta { margin: 0; }

/* El aviso «tu carrito está vacío» de WooCommerce sobra: el estado vacío ya lo
   dice, y con mejor tono. */
.wc-empty-cart-message .cart-empty { display: none; }

/* --------------------------------------------------------------------------
   7. Resumen y totales — ficha compartida por el carrito y la caja
   -------------------------------------------------------------------------- */

.cc-summary {
	padding: var(--cc-space-6);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
}

.cc-summary__title {
	margin: 0 0 var(--cc-space-5);
	padding-block-end: var(--cc-space-3);
	border-block-end: 1px solid var(--cc-border);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

.cc-summary__lines { display: grid; gap: var(--cc-space-3); }

.cc-summary__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-4);
	font-size: 0.9375rem;
	color: var(--cc-text-muted);
}

.cc-summary__value {
	flex: none;
	white-space: nowrap;
	color: var(--cc-text);
}

.cc-summary__line--total {
	margin-block-start: var(--cc-space-2);
	padding-block-start: var(--cc-space-4);
	border-block-start: 1px solid var(--cc-stone);
}

.cc-summary__line--total .cc-summary__label {
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-black);
}

/* El total: la cifra más grande de la pantalla, en Inter y con cifras de ancho
   fijo. En Playfair los dígitos bailaban sobre la línea base. */
.cc-summary__line--total .cc-summary__value,
.cc-summary__line--total .cc-summary__value .amount {
	font-family: var(--cc-font-numeric);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.1;
	color: var(--cc-black);
}

/* «(sin impuestos)» acompaña al importe y no debe empujarlo fuera de la ficha. */
.cc-summary__value .tax_label,
.cc-review__amount .tax_label {
	display: block;
	font-size: var(--cc-type-label);
	font-weight: 400;
	color: var(--cc-text-muted);
}

.cc-summary__line--note { flex-direction: column; align-items: flex-start; }
.cc-summary__line--note .cc-summary__value { white-space: normal; font-size: 0.875rem; }

/* El envío conserva su tabla porque WooCommerce solo sabe imprimir `<tr>`. */
.cc-summary__shipping { width: 100%; border: 0; border-collapse: collapse; }
.cc-summary__shipping th,
.cc-summary__shipping td {
	padding: 0;
	border: 0;
	font-size: 0.9375rem;
	font-weight: 400;
	text-align: start;
	color: var(--cc-text-muted);
}
.cc-summary__shipping td { text-align: end; color: var(--cc-text); }
.cc-summary__shipping ul { margin: 0; padding: 0; list-style: none; }

.cc-summary__cta { margin-block-start: var(--cc-space-6); }
.cc-summary__cta .button,
.cc-summary__cta .checkout-button { width: 100%; }

/* Lista de reservas dentro del resumen (caja y detalle del pedido). */
.cc-review__items {
	margin: 0 0 var(--cc-space-5);
	padding: 0;
	list-style: none;
}

.cc-review__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--cc-space-4);
	padding-block: var(--cc-space-4);
	border-block-end: 1px solid var(--cc-border);
}

.cc-review__item:first-child { padding-block-start: 0; }

.cc-review__body { min-width: 0; }

.cc-review__name {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--cc-text);
}

.cc-review__name a { color: inherit; text-decoration: none; }
.cc-review__name a:hover { color: var(--cc-gold-text); }
.cc-review__name .product-quantity { font-weight: 400; color: var(--cc-text-muted); }

.cc-review__amount {
	flex: none;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--cc-text);
}

.cc-review__note {
	margin-block-start: var(--cc-space-3);
	font-size: 0.875rem;
	color: var(--cc-text-muted);
}

/* Controles de la línea dentro de la caja: con el carrito fuera del recorrido,
   este es el único sitio donde se corrigen las plazas. Discretos —son una
   corrección, no la acción principal de la pantalla— pero con área táctil real. */
.cc-review__controls {
	display: flex;
	align-items: center;
	gap: var(--cc-space-3);
	margin-block-start: var(--cc-space-3);
}

.cc-review__controls[hidden] { display: none; }

.cc-review__qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--cc-stone);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
	overflow: hidden;
}

.cc-review__qty .cc-qty__step {
	width: 2.25rem;
	min-height: 2.25rem;
	font-size: 1rem;
}

.cc-review__qty-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	font-family: var(--cc-font-numeric);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--cc-text);
}

.cc-review__qty-label {
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

.cc-review__drop {
	margin-inline-start: auto;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--cc-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color var(--cc-duration-fast) var(--cc-ease);
}

.cc-review__drop:hover { color: var(--cc-error); }
.cc-review__drop:disabled { opacity: 0.4; cursor: not-allowed; }

/* Mientras la Store API responde, el resumen deja de aceptar toques y lo dice:
   sin esto se puede pulsar «+» tres veces sobre cifras que ya no son ciertas. */
.cc-review--cargando { position: relative; }

.cc-review--cargando .cc-review__items,
.cc-review--cargando .cc-summary__lines {
	opacity: 0.45;
	transition: opacity var(--cc-duration-fast) var(--cc-ease);
}

.cc-review__error {
	margin: 0 0 var(--cc-space-4);
	padding: var(--cc-space-3) var(--cc-space-4);
	border-inline-start: 2px solid var(--cc-error);
	background-color: rgba(179, 38, 30, 0.05);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--cc-text);
}

.cc-review__link {
	margin: 0 0 var(--cc-space-5);
	font-size: 0.75rem;
}

.cc-review__link a {
	color: var(--cc-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cc-review__link a:hover { color: var(--cc-gold-text); }

.cc-review__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-3);
	margin-block-start: var(--cc-space-6);
}

/* --------------------------------------------------------------------------
   8. Caja
   -------------------------------------------------------------------------- */

.cc-checkout__details h3,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 {
	margin: 0 0 var(--cc-space-5);
	padding-block-end: var(--cc-space-3);
	border-block-end: 1px solid var(--cc-border);
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.375rem, 1.8vw, 1.75rem);
	letter-spacing: -0.02em;
	color: var(--cc-black);
}

.cc-checkout__aside { min-width: 0; }

@media (min-width: 1025px) {
	.cc-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24rem;
		align-items: start;
		gap: var(--cc-space-9);
	}

	.cc-checkout__details { grid-column: 1; }

	.cc-checkout__aside {
		grid-column: 2;
		position: sticky;
		top: 96px;
	}

	/* La rejilla interna de WooCommerce sobra: la pantalla ya está dividida en
	   datos y resumen, y partir además los datos en dos deja tres columnas y
	   ningún sitio donde leer con calma. Todo el formulario en una columna.

	   `.woocommerce-page .col2-set .col-1` son TRES clases, no dos: un selector
	   de dos perdía y las columnas seguían flotando al 48 %. */
	.cc-checkout .cc-checkout__details.col2-set .col-1,
	.cc-checkout .cc-checkout__details.col2-set .col-2 {
		width: 100%;
		float: none;
		margin: 0;
	}

	.cc-checkout .cc-checkout__details.col2-set .col-2 { margin-block-start: var(--cc-space-7); }
	.cc-checkout .cc-checkout__details.col2-set .col-2:empty { display: none; margin: 0; }
}

/* Nombre y apellidos en la misma línea; el resto, a lo ancho. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: calc(50% - (var(--cc-space-4) / 2)); }
.woocommerce form .form-row-wide { width: 100%; }

.cc-payment { margin-block-start: var(--cc-space-6); }

.cc-payment__title {
	margin: 0 0 var(--cc-space-4);
	padding-block-start: var(--cc-space-5);
	border-block-start: 1px solid var(--cc-border);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

/* WooCommerce pinta esta zona con un fondo gris y esquinas redondeadas propias
   de su hoja, ajenos a la ficha en la que vive. */
.cc-payment,
.woocommerce-checkout-payment {
	background-color: transparent !important;
	border-radius: 0 !important;
}

.cc-payment__methods {
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	list-style: none;
}

.cc-payment__methods li {
	padding-block: var(--cc-space-3);
	list-style: none;
	font-size: 0.9375rem;
}

.cc-payment__methods label { display: inline; font-weight: 500; }

.cc-payment__methods .payment_box {
	margin: var(--cc-space-3) 0 0;
	padding: var(--cc-space-4);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-ivory) !important;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--cc-text-muted);
}

.cc-payment__methods .payment_box::before { display: none !important; }
.cc-payment__methods .payment_box p:last-child { margin-block-end: 0; }

.cc-payment__place { padding: 0 !important; margin-block-start: var(--cc-space-5); }
.woocommerce-checkout #place_order { width: 100%; }

/* La casilla de condiciones: un párrafo legible, no una línea comprimida. */
.woocommerce-terms-and-conditions-wrapper { margin-block-end: var(--cc-space-4); }

.woocommerce-terms-and-conditions-wrapper .form-row label {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-space-3);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.6;
	color: var(--cc-text-muted);
}

.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin-block-start: 0.15em;
	accent-color: var(--cc-gold);
}

/* La duda antes de pulsar se resuelve aquí, no en el pie de página. */
.cc-payment__reassurance {
	margin: var(--cc-space-3) 0 0;
	font-size: 0.75rem;
	line-height: 1.6;
	text-align: center;
	color: var(--cc-text-muted);
}

.woocommerce #place_order:disabled,
.woocommerce #place_order[aria-disabled="true"] {
	opacity: 0.58;
	cursor: not-allowed;
	transform: none;
}

/* El glifo de mostrar contraseña sigue midiendo 22 px; solo crece el área que
   recibe puntero, dedo y foco. */
.woocommerce button.show-password-input {
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
}

/* --------------------------------------------------------------------------
   9. Confirmación y detalle del pedido
   -------------------------------------------------------------------------- */

/* «Gracias, tu pedido…» sobra: el titular de la página ya lo dice. */
.woocommerce-thankyou-order-received { display: none; }

/* Resguardo: los cuatro datos que el viajero va a buscar, en una fila de
   fichas. Filetes reales entre ellas y no huecos pintados con el fondo: con el
   truco del fondo quedaban tiras grises cuando los datos no llenaban la fila. */
.cc-receipt {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 var(--cc-space-7);
	padding: 0;
	list-style: none;
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
	overflow: hidden;
}

.cc-receipt__item {
	flex: 1 1 12rem;
	margin: 0;
	padding: var(--cc-space-5);
	border: 0;
}

.cc-receipt__item + .cc-receipt__item { border-inline-start: 1px solid var(--cc-border); }

.cc-receipt__label {
	display: block;
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

.cc-receipt__value {
	display: block;
	margin-block-start: var(--cc-space-2);
	font-family: var(--cc-font-body);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	word-break: break-word;
	color: var(--cc-black);
}

.cc-order__failed-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-3);
}

/* Detalle del pedido y datos del cliente: fichas, no tablas sueltas. */
.cc-card,
.woocommerce-customer-details {
	margin-block-end: var(--cc-space-7);
	padding: var(--cc-space-6);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
}

.cc-card__title,
.woocommerce-column__title {
	margin: 0 0 var(--cc-space-5);
	padding-block-end: var(--cc-space-3);
	border-block-end: 1px solid var(--cc-border);
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: 1.375rem;
	color: var(--cc-black);
}

.woocommerce-customer-details address {
	padding: 0;
	border: 0;
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--cc-text);
}

/* --------------------------------------------------------------------------
   10. Mi cuenta
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation { width: 24%; }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--cc-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li { border-block-end: 1px solid var(--cc-border); }

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding-block: var(--cc-space-4);
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cc-text);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { color: var(--cc-gold-text); }

.woocommerce-account .woocommerce-MyAccount-content { width: 70%; }

/* El acceso ocupa la caja del sitio. Estaba acotado a 480 px «porque es una
   pantalla de una sola tarea», y con la página nueva —promesa en tinta a un
   lado, formularios al otro— ese tope metía las dos columnas en 480 px:
   medido, `div.cc-cuenta` daba 480 de caja con 505 de contenido dentro, y el
   titular de la promesa 88 contra 122. El panel trae su propio ancho. */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: none; margin-inline: auto; }

/* El marco lo pone ahora `.cc-cuenta__panel`; los formularios van desnudos
   dentro de él en lugar de llevar cada uno su propia caja blanca. */
.woocommerce-account:not(.logged-in) .woocommerce form.login,
.woocommerce-account:not(.logged-in) .woocommerce form.register {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

.woocommerce form.login,
.woocommerce form.register {
	padding: var(--cc-space-7);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
}

.woocommerce-account .woocommerce-Address {
	padding: var(--cc-space-5);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
}

/* El listado de «Mis reservas» sigue siendo una tabla de WooCommerce: se le
   quita la caja y se deja el filete por fila. */
.woocommerce-account table.shop_table,
.woocommerce-account table.shop_table td,
.woocommerce-account table.shop_table th {
	border-inline: 0;
	border-radius: 0;
	background-color: transparent;
}

.woocommerce-account table.shop_table th {
	padding: 0 var(--cc-space-3) var(--cc-space-4) 0;
	border-block-end: 1px solid var(--cc-border);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: start;
	color: var(--cc-text-muted);
}

.woocommerce-account table.shop_table td {
	padding: var(--cc-space-4) var(--cc-space-3) var(--cc-space-4) 0;
	border-block-start: 0;
	border-block-end: 1px solid var(--cc-border);
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   11. Diálogo de selección (Elementor Menu Cart)

   El widget mantiene la sesión, los fragmentos y el contador de WooCommerce,
   pero deja de presentarse como el cajón lateral genérico de Elementor. La
   carcasa se convierte en un dossier centrado: encabezado editorial, recorrido
   de reserva visible y contenido claro que se lee como una selección, no como
   una tienda. En móvil se apoya en el borde inferior como una hoja de viaje.
   -------------------------------------------------------------------------- */

html.cc-cart-dialog-open { overflow: hidden; overscroll-behavior: none; }

body.cc-cart-dialog-open {
	position: fixed;
	top: var(--cc-cart-scroll-y, 0);
	inset-inline: 0;
	width: 100%;
	overflow: hidden;
}

body.elementor-default .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: var(--cc-space-6);
	/* El mismo velo que la ventana de acceso: tinta al 62 % con desenfoque, no
	   una cortina opaca. La página sigue reconociéndose detrás. */
	background-color: rgba(17, 17, 17, 0.62);
	backdrop-filter: blur(6px);
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		background-color var(--cc-duration) var(--cc-ease-soft),
		opacity var(--cc-duration) var(--cc-ease-soft),
		visibility 0s;
}

body.elementor-default .elementor-widget-woocommerce-menu-cart:not(.elementor-menu-cart--shown) .elementor-menu-cart__container {
	background-color: transparent;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: none;
	transition:
		background-color var(--cc-duration-fast) var(--cc-ease-soft),
		opacity var(--cc-duration-fast) var(--cc-ease-soft),
		visibility 0s linear var(--cc-duration-fast);
}

body.elementor-default .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
	position: relative;
	inset: auto;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	/* La misma caja que la ventana de acceso: papel elevado, filete de un
	   píxel y esquinas del sistema. Medía 736 px de ancho con 544 de alto
	   mínimo —una hoja— porque llevaba una portada dentro; sin ella, el carrito
	   pide lo que ocupan sus líneas.

	   Más ancha que los 384 px del acceso, y con motivo: cada línea lleva
	   miniatura, nombre, precio y el botón de quitar en la misma fila. Por
	   debajo de 460 el nombre de un viaje se parte en tres. */
	width: min(92vw, 460px);
	height: auto;
	min-height: 0;
	max-height: min(88svh, 680px);
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--cc-surface-raised);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-lg);
	box-shadow: 0 24px 70px rgba(17, 17, 17, 0.3);
	color: var(--cc-text);
	opacity: 1;
	transform: translateY(0) scale(1);
	transform-origin: 50% 56%;
	transition:
		transform var(--cc-duration) var(--cc-ease-out),
		opacity var(--cc-duration-fast) var(--cc-ease-soft);
}

body.elementor-default .elementor-widget-woocommerce-menu-cart:not(.elementor-menu-cart--shown) .elementor-menu-cart__main {
	opacity: 0;
	overflow: hidden;
	transform: translateY(12px) scale(0.985);
	transition:
		transform var(--cc-duration-fast) var(--cc-ease-soft),
		opacity var(--cc-duration-fast) var(--cc-ease-soft);
}

/* El filete dorado del canto superior: la firma que llevan las piezas elevadas
   del sitio, y la misma que abre la ventana de acceso. */
body.elementor-default .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 2px;
	z-index: 2;
	background-color: var(--cc-gold);
}

.cc-cart-dialog__title.cc-cart-dialog__title {
	margin: 0;
	padding: clamp(24px, 3vw, 32px) 4rem var(--cc-space-4) clamp(24px, 3vw, 32px);
	font-family: var(--cc-font-display);
	font-size: clamp(1.375rem, 2vw, 1.625rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--cc-text);
}

.elementor-menu-cart__main .elementor-menu-cart__close-button.elementor-menu-cart__close-button {
	position: absolute;
	top: var(--cc-space-5);
	inset-inline-end: var(--cc-space-5);
	z-index: 2;
	display: block;
	align-self: auto;
	width: 2.75rem;
	height: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0;
	/* Sobre papel, no sobre tinta: el aspa iba en marfil con filete claro
	   porque la cabecera era una banda oscura. Sin ella, era marfil sobre
	   marfil. Mismo trato que el cierre de la ventana de acceso: sin filete,
	   en gris apagado y con fondo solo al pasar por encima. */
	border: 0;
	border-radius: var(--cc-radius-full);
	background: transparent;
	color: var(--cc-text-muted);
	cursor: pointer;
	transition:
		background-color var(--cc-duration-fast) var(--cc-ease-soft),
		border-color var(--cc-duration-fast) var(--cc-ease-soft),
		transform var(--cc-duration-press) var(--cc-ease-soft);
}

.elementor-menu-cart__main .elementor-menu-cart__close-button::before,
.elementor-menu-cart__main .elementor-menu-cart__close-button::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1px;
	margin: 0;
	background-color: currentcolor;
	border-radius: 0;
	content: '';
	transition: none;
}

.elementor-menu-cart__main .elementor-menu-cart__close-button::before { transform: translate(-50%, -50%) rotate(45deg); }
.elementor-menu-cart__main .elementor-menu-cart__close-button::after { transform: translate(-50%, -50%) rotate(-45deg); }

.elementor-menu-cart__main .elementor-menu-cart__close-button:hover {
	background-color: var(--cc-ivory);
	color: var(--cc-text);
}

.elementor-menu-cart__main .elementor-menu-cart__close-button:active { transform: scale(var(--cc-press)); }

.elementor-menu-cart__main .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
	padding: 0 var(--cc-space-6) var(--cc-space-6);
	overflow: hidden;
}

.cc-mini,
.elementor-menu-cart__main .elementor-menu-cart__products {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	list-style: none;
	scrollbar-color: var(--cc-stone) transparent;
}

/* Doble juego de clases a propósito: WooCommerce puede reinyectar desde
   sessionStorage el marcado propio o el de Elementor durante una pestaña ya
   abierta. Las dos variantes deben conservar la misma composición. */
.elementor-menu-cart__main .elementor-menu-cart__product,
/* Las dos clases, y esta vez de verdad. Las áreas —`img`, `nombre`, `precio`,
   `quitar`— se asignaban a los hijos del marcado de Elementor, pero la rejilla
   que las define solo estaba declarada sobre `.cc-mini__item`, que es la clase
   de *nuestra* plantilla. Cuando WooCommerce reinyectaba el marcado de
   Elementor —que es lo que pasa al abrir el panel—, esas áreas no existían en
   ningún sitio: los hijos caían por colocación automática en la rejilla que
   Elementor trae de fábrica y la línea salía empujada contra el borde derecho,
   con el título partiéndose palabra a palabra y dos tercios del panel vacíos.

   Es el mismo error que el comentario de arriba dice estar evitando. */
.cc-mini__item,
.elementor-menu-cart__main .elementor-menu-cart__product {
	position: relative;
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr) 2.75rem;
	grid-template-areas: 'img nombre quitar' 'img precio quitar';
	align-items: start;
	gap: var(--cc-space-2) var(--cc-space-4);
	margin: 0;
	padding-block: var(--cc-space-5);
	padding-inline-end: 0;
	border: 0;
	border-block-end: 1px solid var(--cc-border);
}

.elementor-menu-cart__main .elementor-menu-cart__product-image { grid-area: img; }
.elementor-menu-cart__main .elementor-menu-cart__product-name { grid-area: nombre; min-width: 0; padding: 0; }
.elementor-menu-cart__main .elementor-menu-cart__product-price { grid-area: precio; padding: 0; }
.elementor-menu-cart__main .elementor-menu-cart__product-remove { grid-area: quitar; }

/* Y los hijos de **nuestra** plantilla, que es la que se pinta casi siempre.
   Estaban sin asignar: la rejilla declaraba sus tres columnas y sus dos áreas,
   y luego nadie decía qué iba dónde, así que los hijos caían por colocación
   automática en el orden en que vienen. Medido con un viaje en el carrito, a
   1440: la miniatura en la columna del nombre —238 × 80—, el cuerpo del texto
   metido en la columna de 44 px del botón de quitar y estirado a **324 px de
   alto** con el título partiéndose letra a letra, y el botón de quitar en la
   columna de la miniatura. La línea entera medía 424 px.

   La corrección anterior arregló el marcado de Elementor y dejó el nuestro
   igual de roto: era el mismo error, en el otro lado. */
.cc-mini__media { grid-area: img; }
.cc-mini__remove { grid-area: quitar; }

/* El cuerpo lleva dentro el nombre, la fecha y el importe, así que ocupa las
   dos filas de la columna central en lugar de una sola área. */
.cc-mini__body {
	grid-column: 2;
	grid-row: 1 / -1;
	min-width: 0;
}
.elementor-menu-cart__main .elementor-menu-cart__product:last-child,
.cc-mini__item:last-child { border-block-end: 0; }

.elementor-menu-cart__main .elementor-menu-cart__product-image img,
.cc-mini__media img {
	display: block;
	width: 5rem;
	height: 5rem;
	margin: 0;
	float: none;
	object-fit: cover;
	border-radius: var(--cc-radius-lg);
}

.cc-mini__body { min-width: 0; }

.elementor-menu-cart__main .elementor-menu-cart__product-name,
.elementor-menu-cart__main .elementor-menu-cart__product-name a,
.cc-mini__name {
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--cc-text);
	text-decoration: none;
}

.cc-mini__name a { color: var(--cc-text); text-decoration: none; }
.cc-mini__name a:hover,
.elementor-menu-cart__main .elementor-menu-cart__product-name a:hover { color: var(--cc-gold-on-light); }

.elementor-menu-cart__main .variation,
.elementor-menu-cart__main .wc-item-meta {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0 var(--cc-space-1);
	margin: var(--cc-space-2) 0 0;
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--cc-text-muted);
}

.elementor-menu-cart__main .variation dt,
.elementor-menu-cart__main .wc-item-meta strong { font-weight: 600; color: var(--cc-text); }

.elementor-menu-cart__main .variation dd,
.elementor-menu-cart__main .wc-item-meta li { margin: 0; color: var(--cc-text-muted); }

.elementor-menu-cart__main .elementor-menu-cart__product-price,
.elementor-menu-cart__main .elementor-menu-cart__product-price .amount,
.elementor-menu-cart__main .elementor-menu-cart__product-price .quantity,
.cc-mini__price,
.cc-mini__price .amount {
	font-family: var(--cc-font-numeric);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--cc-gold-on-light);
}

.cc-mini__price { display: block; margin-block-start: var(--cc-space-2); }

.elementor-menu-cart__main .elementor-menu-cart__product-remove,
.elementor-menu-cart__main .cc-mini__remove a {
	position: relative;
	inset: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--cc-border);
	border-radius: 50%;
	background-color: transparent;
	font-family: var(--cc-font-body);
	font-size: 1.125rem;
	line-height: 1;
	color: var(--cc-text-muted) !important;
	text-decoration: none;
	transition:
		background-color var(--cc-duration-fast) var(--cc-ease-soft),
		border-color var(--cc-duration-fast) var(--cc-ease-soft),
		color var(--cc-duration-fast) var(--cc-ease-soft);
}

.elementor-menu-cart__main .elementor-menu-cart__product-remove:hover,
.elementor-menu-cart__main .cc-mini__remove a:hover {
	background-color: var(--cc-green) !important;
	border-color: var(--cc-green);
	color: var(--cc-ivory) !important;
}

.elementor-menu-cart__main .elementor-menu-cart__subtotal,
.cc-mini__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-3);
	margin: var(--cc-space-5) 0 var(--cc-space-4);
	padding-block-start: var(--cc-space-4);
	border: 0;
	border-block-start: 1px solid var(--cc-border);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-align: start;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

.elementor-menu-cart__main .elementor-menu-cart__subtotal .amount,
.cc-mini__total .amount {
	font-family: var(--cc-font-numeric);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cc-text);
}

.cc-mini__buttons,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: var(--cc-space-3);
	margin: 0;
	padding: 0;
}

.elementor-menu-cart__main .cc-mini__buttons .button,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button,
.elementor-menu-cart__main .cc-mini__empty-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3rem;
	padding: var(--cc-space-3) var(--cc-space-4);
	border: 1px solid var(--cc-green);
	border-radius: var(--cc-radius-sm);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background-color var(--cc-duration-fast) var(--cc-ease-soft),
		border-color var(--cc-duration-fast) var(--cc-ease-soft),
		color var(--cc-duration-fast) var(--cc-ease-soft),
		transform var(--cc-duration-press) var(--cc-ease-soft);
}

.elementor-menu-cart__main .cc-mini__button--secondary,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	background-color: transparent;
	border-color: var(--cc-border);
	color: var(--cc-text);
}

.elementor-menu-cart__main .cc-mini__button--secondary:hover,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
	background-color: var(--cc-green-soft);
	border-color: var(--cc-green);
	color: var(--cc-green);
}

.elementor-menu-cart__main .cc-mini__button--primary,
.elementor-menu-cart__main .cc-mini__empty-link,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--checkout {
	background-color: var(--cc-green);
	border-color: var(--cc-green);
	color: var(--cc-ivory);
}

.elementor-menu-cart__main .cc-mini__button--primary:hover,
.elementor-menu-cart__main .cc-mini__empty-link:hover,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
	background-color: var(--cc-green-dark);
	border-color: var(--cc-green-dark);
	color: var(--cc-ivory);
}

.elementor-menu-cart__main .cc-mini__buttons .button:active,
.elementor-menu-cart__main .cc-mini__empty-link:active { transform: scale(var(--cc-press)); }

.cc-mini__empty {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 31rem;
	margin: 0 auto;
	padding: var(--cc-space-8) var(--cc-space-4);
	font-family: var(--cc-font-body);
	text-align: center;
}

.cc-mini__empty-kicker {
	margin: 0 0 var(--cc-space-3);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-gold-on-light);
}

.elementor-menu-cart__main .widget_shopping_cart_content .cc-mini__empty-title.cc-mini__empty-title {
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-align: center;
	color: var(--cc-text);
}

.cc-mini__empty-text {
	max-width: 38ch;
	margin: var(--cc-space-3) 0 var(--cc-space-5);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--cc-text-muted);
}

.elementor-menu-cart__main .cc-mini__empty-link { width: auto; min-width: 14rem; }

@media (max-width: 767px) {
	/* En teléfono también es una tarjeta centrada, no una hoja pegada al canto
	   inferior. Era la última diferencia de forma con la ventana de acceso, y
	   dos ventanas del mismo sitio que se abren de dos maneras distintas se
	   leen como dos sistemas. */
	body.elementor-default .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container {
		place-items: center;
		padding: var(--cc-space-4);
	}

	body.elementor-default .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
		width: min(92vw, 460px);
		height: auto;
		min-height: 0;
		max-height: min(88svh, 680px);
		transform-origin: 50% 56%;
	}

	.elementor-menu-cart__main .elementor-menu-cart__close-button.elementor-menu-cart__close-button {
		top: var(--cc-space-4);
		inset-inline-end: var(--cc-space-4);
	}

	.elementor-menu-cart__main .widget_shopping_cart_content { padding: 0 var(--cc-space-5) var(--cc-space-5); }

	.elementor-menu-cart__main .elementor-menu-cart__product,
	.cc-mini__item {
		grid-template-columns: 4.5rem minmax(0, 1fr) 2.75rem;
		gap: var(--cc-space-2) var(--cc-space-3);
		padding-block: var(--cc-space-4);
	}

	.elementor-menu-cart__main .elementor-menu-cart__product-image img,
	.cc-mini__media img { width: 4.5rem; height: 4.5rem; }

	.cc-mini__buttons,
	.elementor-menu-cart__main .elementor-menu-cart__footer-buttons { grid-template-columns: 1fr; gap: var(--cc-space-2); }

	.cc-mini__total { margin-block-start: var(--cc-space-4); }
	.cc-mini__empty { padding: var(--cc-space-6) 0; }
}

/* --------------------------------------------------------------------------
   Adaptación a pantallas pequeñas
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.cart-collaterals { margin-block-start: var(--cc-space-7); }
	.cc-checkout__aside { margin-block-start: var(--cc-space-7); }
}

@media (max-width: 767px) {
	/* Ya no se encoge la letra: el paso se apila en dos líneas —lo hace la
	   regla de debajo— y ahí cabe al cuerpo mínimo del sitio. */
	.cc-checkout-step { font-size: 0.75rem; letter-spacing: 0.06em; }

	.cc-checkout-step .elementor-heading-title {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--cc-space-1);
	}

	/* La línea del carrito se reordena: miniatura y nombre arriba, controles
	   debajo a lo ancho. Con cuatro columnas en 360 px no cabe nada. */
	.cc-cart__item {
		grid-template-columns: 72px minmax(0, 1fr) 2rem;
		grid-template-areas:
			'media body remove'
			'controls controls controls';
		gap: var(--cc-space-4);
		padding-block: var(--cc-space-5);
	}

	.cc-cart__media { grid-area: media; }
	.cc-cart__body { grid-area: body; }
	.cc-cart__remove { grid-area: remove; }
	.cc-cart__media img { width: 72px; height: 72px; }
	.cc-cart__name { font-size: 1.125rem; }

	.cc-cart__controls {
		grid-area: controls;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--cc-space-4);
		width: 100%;
	}

	.cc-cart__qty { min-width: 0; }
	.cc-cart__line-total { flex: none; white-space: nowrap; }

	.cc-cart__actions { flex-direction: column; align-items: stretch; }
	.cc-cart__actions > .button { width: 100%; }

	.cc-receipt__item + .cc-receipt__item {
		border-inline-start: 0;
		border-block-start: 1px solid var(--cc-border);
	}

	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last { width: 100%; }

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }

	.cc-summary,
	.cc-card,
	.woocommerce-customer-details { padding: var(--cc-space-5); }
}

/* A 320 px el campo y «Aplicar» caben matemáticamente, pero el ancho mínimo
   intrínseco del placeholder impide que el input ceda y recorta el botón.
   Se apilan solo en ese extremo; desde 360 px conservan la fila compacta. */
@media (max-width: 359px) {
	.cc-cart__coupon-field { flex-direction: column; }
	.cc-cart__coupon-field .button { width: 100%; }
}

/* ==========================================================================
   Guarda de especificidad frente al Theme Style de Elementor

   Elementor escribe su tipografía global como `.elementor-kit-10 h2 { … }`:
   una clase más un elemento, (0,1,1). Cualquier regla nuestra de una sola
   clase, (0,1,0), pierde —da igual el orden de carga—, y por eso los rótulos
   de esta hoja salían en Playfair de 56 px en lugar de en Inter de 11.

   Es el mismo problema que components.css §«Guarda de especificidad» ya
   resolvió para los microtitulares, y se resuelve igual: la clase repetida
   sube a (0,2,0) sin recurrir a !important. Aquí solo se repiten las
   propiedades que Elementor pisa, y solo en los rótulos que son elementos de
   encabezado —el resto de esta hoja cuelga de `p`, `span` o `strong` y no le
   afecta.
   ========================================================================== */

.cc-summary__title.cc-summary__title,
.cc-payment__title.cc-payment__title {
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

/* El nombre del viaje sí es editorial, pero a cuerpo de línea de carrito: en
   la lista salía a 48 px y empujaba la miniatura y el precio fuera de sitio. */
.cc-cart__name.cc-cart__name {
	font-family: var(--cc-font-display);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Los rótulos de sección de la caja son (0,1,1) igual que el kit, así que el
   empate lo decidía el orden de carga —y Elementor encola después—: salían a
   38 px. Con la clase repetida dejan de depender de eso. */
.cc-checkout__details h3,
.cc-checkout .woocommerce-billing-fields h3,
.cc-checkout .woocommerce-additional-fields h3,
.cc-checkout .woocommerce-shipping-fields h3 {
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.375rem, 1.8vw, 1.75rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* Los botones desnudos son el otro caso: el kit escribe
   `.elementor-kit-10 button { background:#B8945A; padding:15px 26px }`, así que
   TODO `<button>` sin clase de botón salía como un bloque dorado con 26 px de
   relleno a cada lado. Por eso el paso a paso de personas aparecía como un
   recuadro macizo sin signos ni cifra, y «Quitar» como un botón dorado que
   competía con «Confirmar reserva». */
.cc-qty__step.cc-qty__step {
	width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	font-family: var(--cc-font-body);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cc-text);
}

.cc-qty__step.cc-qty__step:hover:not(:disabled) { background-color: var(--cc-green-soft); }

.cc-review__qty .cc-qty__step.cc-qty__step {
	width: 2.75rem;
	min-height: 2.75rem;
	font-size: 1rem;
}

.cc-review__drop.cc-review__drop {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--cc-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cc-review__drop.cc-review__drop:hover {
	background-color: transparent;
	color: var(--cc-error);
}

.cc-card__title.cc-card__title {
	font-family: var(--cc-font-display);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.3;
}

/* ==========================================================================
   Guarda frente a woocommerce-layout.css

   `.woocommerce-page .cart-collaterals .cart_totals { float: right; width: 48% }`
   es (0,2,0) y ganaba a `.cc-summary`: el resumen salía flotado y a media
   anchura dentro de su propia columna, desbordando la caja por la derecha.
   ========================================================================== */

.woocommerce-page .cart-collaterals,
.woocommerce-page .cart-collaterals .cart_totals,
.cc-shop-body .cart-collaterals,
.cc-shop-body .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	max-width: 100%;
}

/* Las superficies transaccionales comparten la misma hoja elevada que el
   resto del sitio. El contenido cambia; su contenedor no cambia de idioma. */
.cc-summary,
.woocommerce-order-details .order_details,
.woocommerce-customer-details,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-account .woocommerce-Address {
	background-color: var(--cc-surface-raised);
	border-color: var(--cc-border);
	border-radius: var(--cc-radius-lg);
	box-shadow: var(--cc-shadow-soft);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce .button,
	.cc-btn,
	.cc-qty__step,
	.cc-cart__name a,
	.elementor-menu-cart__container,
	.elementor-menu-cart__main,
	.elementor-menu-cart__close-button { transition: none; }

	body.elementor-default .elementor-widget-woocommerce-menu-cart:not(.elementor-menu-cart--shown) .elementor-menu-cart__main {
		transform: none;
	}
}

/* ==========================================================================
   Acceso a la cuenta: la ventana y la página

   El acceso era una caja de 480 px suelta bajo el titular «Mi cuenta» —medido a
   1440: x=480, y=395— sin una línea que dijera para qué sirve tener cuenta
   aquí, y llegar a ella obligaba a abandonar lo que se estaba haciendo. Ahora
   es una ventana que se abre encima, con la página como respaldo, y las dos
   comparten formulario y vestido.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. La ventana
   -------------------------------------------------------------------------- */

/* La ventana es un trámite, no una portada.
 *
 * La primera versión llevaba rótulo, titular de dos líneas y un párrafo de
 * promesa encima del formulario: 440 × 720 px para pedir correo y contraseña.
 * El texto explicativo pertenece a la página de cuenta, que es donde alguien
 * está decidiendo si abrirse una; quien pulsa «acceder» ya decidió. */
.cc-acceso {
	width: min(92vw, 384px);
	max-height: min(88svh, 640px);
	padding: 0;
	border: 0;
	border-radius: var(--cc-radius-lg);
	background-color: transparent;
	overflow: visible;
}

/* El fondo del diálogo modal. Oscuro y con desenfoque, como el velo del panel
   del carrito: la página sigue reconociéndose detrás en lugar de desaparecer
   bajo una cortina opaca. */
.cc-acceso::backdrop {
	background-color: rgba(17, 17, 17, 0.62);
	backdrop-filter: blur(6px);
}

.cc-acceso__caja {
	position: relative;
	display: grid;
	gap: var(--cc-space-4);
	max-height: inherit;
	padding: clamp(24px, 3vw, 32px);
	overflow-y: auto;
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-lg);
	background-color: var(--cc-surface-raised);
	box-shadow: 0 24px 70px rgba(17, 17, 17, 0.3);
}

/* El filete dorado en el canto superior: la firma que llevan las piezas
   elevadas del sitio. */
.cc-acceso__caja::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 2px;
	border-start-start-radius: var(--cc-radius-lg);
	border-start-end-radius: var(--cc-radius-lg);
	background-color: var(--cc-gold);
}

.cc-acceso__cerrar {
	position: absolute;
	inset-block-start: var(--cc-space-3);
	inset-inline-end: var(--cc-space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 y no 24: es el objetivo de un control aislado en una esquina, donde no
	   hay nada alrededor que perdone un dedo impreciso. */
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--cc-radius-full);
	background: transparent;
	color: var(--cc-text-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: color var(--cc-duration-fast) var(--cc-ease), background-color var(--cc-duration-fast) var(--cc-ease);
}

.cc-acceso__cerrar:hover { color: var(--cc-text); background-color: var(--cc-ivory); }

.cc-acceso .cc-eyebrow { margin: 0; }

.cc-acceso__titulo {
	/* Sitio para el botón de cerrar, que vive en la esquina. */
	margin: 0 44px 0 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.375rem, 2vw, 1.625rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--cc-text);
}

.cc-acceso__pie {
	margin: 0;
	padding-block-start: var(--cc-space-4);
	border-block-start: 1px solid var(--cc-border);
	font-size: 0.875rem;
	color: var(--cc-text-muted);
}

/* En línea, el enlace medía 116 × 17 px: por debajo del mínimo de 24 que pide
   WCAG 2.2 §2.5.8. Como bloque en línea alcanza la altura sin descolocar la
   frase que lo contiene. */
.cc-acceso__pie a,
.cc-acceso__cambio {
	display: inline-block;
	min-height: 24px;
	color: var(--cc-gold-text);
	font-weight: 600;
}

/* El paso de «entrar» a «crear cuenta» es un botón y no un enlace: no lleva a
   ninguna parte, cambia lo que hay delante. Escrito como enlace, el teclado y
   el lector de pantalla anunciarían un destino que no existe. Se le quita el
   aspecto de botón, no su naturaleza. */
.cc-acceso__cambio {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cc-font-body);
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cc-acceso__cambio:hover { color: var(--cc-green); }

/* El aviso de privacidad de la tienda, en cuerpo pequeño pero no diminuto. */
.cc-acceso__privacidad {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--cc-text-muted);
}

.cc-acceso__privacidad p { margin: 0; }

.cc-acceso__privacidad a {
	display: inline-block;
	min-height: 24px;
	color: var(--cc-gold-text);
}

/* --------------------------------------------------------------------------
   1 bis. Los accesos por proveedor externo

   No hay ninguno puesto: sin credenciales configuradas, un «Continuar con
   Google» es un botón que no hace nada. Lo que queda hecho es el sitio donde
   encaja —el filtro `cc_acceso_proveedores`—, para que añadirlo después sea
   devolver una entrada y no rehacer la ventana. Con la lista vacía, ni estos
   botones ni el separador se pintan.
   -------------------------------------------------------------------------- */

.cc-acceso__proveedores { display: grid; gap: var(--cc-space-2); }

.cc-acceso__proveedor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-3);
	min-height: 48px;
	padding-inline: var(--cc-space-4);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--cc-text);
	text-decoration: none;
	transition: border-color var(--cc-duration-fast) var(--cc-ease), background-color var(--cc-duration-fast) var(--cc-ease);
}

.cc-acceso__proveedor:hover { border-color: var(--cc-gold); background-color: var(--cc-ivory); }

.cc-acceso__proveedor-icono {
	display: inline-flex;
	inline-size: 18px;
	block-size: 18px;
}

.cc-acceso__proveedor-icono svg { inline-size: 100%; block-size: 100%; }

/* El separador: filete a los dos lados y la palabra en medio. */
.cc-acceso__o {
	display: flex;
	align-items: center;
	gap: var(--cc-space-3);
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

.cc-acceso__o::before,
.cc-acceso__o::after {
	content: "";
	flex: 1 1 auto;
	block-size: 1px;
	background-color: var(--cc-border);
}

/* --------------------------------------------------------------------------
   2. El formulario, común a la ventana y a la página
   -------------------------------------------------------------------------- */

.cc-acceso__form { display: grid; gap: var(--cc-space-4); margin: 0; }

.cc-acceso__campo { display: grid; gap: 6px; margin: 0; }

.cc-acceso__campo label {
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-text);
}

.cc-acceso__campo input {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--cc-space-4);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
	font-family: var(--cc-font-body);
	/* 16 px y no menos: por debajo, Safari en iOS amplía la página al enfocar
	   el campo y deja al usuario dentro de un formulario descuadrado. */
	font-size: 1rem;
	color: var(--cc-text);
	transition: border-color var(--cc-duration-fast) var(--cc-ease);
}

.cc-acceso__campo input:focus {
	outline: 2px solid var(--cc-gold);
	outline-offset: 1px;
	border-color: var(--cc-gold);
}

.cc-acceso__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
}

/* La casilla medía 13 px de lado, contra los 24 que pide WCAG 2.2 §2.5.8. Se
   agranda la casilla y, además, su etiqueta entera es el objetivo. */
.cc-acceso__recordar {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	min-height: 44px;
	font-size: 0.875rem;
	color: var(--cc-text-muted);
	cursor: pointer;
}

/* 24 y no 18: la casilla es objetivo por sí misma además de serlo su etiqueta,
   y 24 es el mínimo. La de WooCommerce venía a 13.

   `flex: 0 0 auto` porque dentro de una etiqueta en flex se encogía: medida,
   23,4 px de ancho, que incumple por seis décimas. Un objetivo táctil no se
   deja al reparto del espacio sobrante. */
.cc-acceso__recordar input {
	flex: 0 0 auto;
	inline-size: 24px;
	block-size: 24px;
	margin: 0;
	accent-color: var(--cc-green);
}

.cc-acceso__olvido {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.875rem;
	color: var(--cc-gold-text);
}

.cc-acceso__aviso {
	margin: 0;
	padding: var(--cc-space-3) var(--cc-space-4);
	border-inline-start: 2px solid #a4443a;
	border-radius: var(--cc-radius-sm);
	background-color: rgba(164, 68, 58, 0.08);
	font-size: 0.875rem;
	color: #8a3a31;
}

.cc-acceso__nota {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--cc-text-muted);
}

.cc-acceso__form .cc-btn { justify-content: center; width: 100%; }

/* --------------------------------------------------------------------------
   3. La página de cuenta sin sesión
   -------------------------------------------------------------------------- */

.cc-cuenta {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	border-radius: var(--cc-radius-lg);
	box-shadow: var(--cc-shadow-soft);
}

/* La promesa, en tinta: dice para qué sirve tener cuenta aquí. Sin ella la
   página era un formulario y un titular, y no había motivo a la vista para
   rellenarlo. */
.cc-cuenta__promesa {
	--cc-gold-text: var(--cc-gold-on-dark);
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-4);
	padding: clamp(32px, 4vw, 56px);
	background-color: var(--cc-black);
	color: var(--cc-text-inverse);
}

.cc-cuenta__promesa .cc-eyebrow { margin: 0; }

.cc-cuenta__titulo {
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--cc-ivory);
	text-wrap: balance;
}

.cc-cuenta__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--cc-space-3);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--cc-text-inverse-muted);
}

.cc-cuenta__lista li { padding-inline-start: var(--cc-space-5); position: relative; }

.cc-cuenta__lista li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.62em;
	inline-size: 6px;
	block-size: 1px;
	background-color: var(--cc-gold-on-dark);
}

.cc-cuenta__formularios {
	display: grid;
	gap: clamp(28px, 3vw, 40px);
	padding: clamp(32px, 4vw, 56px);
	background-color: var(--cc-surface-raised);
}

.cc-cuenta__rotulo {
	margin: 0 0 var(--cc-space-4);
	font-family: var(--cc-font-display);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* El alta, separada por un filete: son dos caminos y no una lista de campos. */
.cc-cuenta__panel--alta {
	padding-block-start: clamp(28px, 3vw, 40px);
	border-block-start: 1px solid var(--cc-border);
}

/* WooCommerce inserta en el alta su aviso de privacidad con un enlace en línea:
   medido a 390 px, 162 × 20, por debajo del mínimo de 24. */
.cc-cuenta .woocommerce-privacy-policy-text a,
.cc-cuenta__panel p a {
	display: inline-block;
	min-height: 24px;
}

@media (max-width: 900px) {
	.cc-cuenta { grid-template-columns: minmax(0, 1fr); }
}

/* Sin alta, la página es solo acceso y no necesita tanta caja. */
.cc-cuenta--solo-acceso { max-width: 920px; margin-inline: auto; }