/*
 * Conmutador del encabezado: Institucional (por defecto) y Oscuro.
 * Se aplica con <html data-tema="marca|oscuro">.
 */

/* ---------- Estilo "Institucional": menos blanco, se intercalan blanco, gris niebla y rojo ---------- */
html[data-tema="marca"] {
	--a-gris-fondo: #f2f2f2;
	--a-rojo-fondo: #910000;
	/* lo que era gris pasa a blanco (chips, tarjetas, secciones niebla) para destacar sobre el fondo gris */
	--wp--preset--color--niebla: #fff;
	--a-niebla: #fff;
}
html[data-tema="marca"] body { background: var(--a-gris-fondo); }
html[data-tema="marca"] .a-header { background: rgba(255, 255, 255, .9); }
html[data-tema="marca"] .a-chip:hover { background: var(--wp--preset--color--gris); }

/* Blanco */
html[data-tema="marca"] :is(.a-marcas, .a-tipologias, .a-faq) { background: #fff; }
html[data-tema="marca"] .a-faq__item { background: var(--a-gris-fondo); }
html[data-tema="marca"] .a-marcas__item a { background: var(--a-gris-fondo); }
html[data-tema="marca"] .a-marcas__item a:hover { background: var(--wp--preset--color--gris); }
/* Gris niebla (el de "Los números que nos respaldan") */
html[data-tema="marca"] .a-cifras { background: var(--a-gris-fondo); }
/* Rojo institucional */
html[data-tema="marca"] :is(.a-home-intro, .a-peninsula, .a-amenities, .a-consulta, .a-novedades-titulo) {
	background: var(--a-rojo-fondo); color: #fff;
	--wp--preset--color--grafito: rgba(255, 255, 255, .82);
	--wp--preset--color--rojo: #fff;
	--a-rojo: #fff;
}
/* Cabezal de Novedades: banda roja a todo el ancho, pegada al encabezado; el título queda alineado con la grilla */
html:is([data-tema="marca"], [data-tema="oscuro"]) .a-novedades-titulo {
	margin-top: calc(-1 * var(--wp--preset--spacing--50));
	margin-bottom: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	box-shadow: 0 0 0 100vmax var(--a-rojo-fondo);
	clip-path: inset(0 -100vmax);
}
html:is([data-tema="marca"], [data-tema="oscuro"]) .a-novedades-titulo p { color: rgba(255, 255, 255, .85); }
html:is([data-tema="marca"], [data-tema="oscuro"]) .a-novedades-titulo :is(a, strong) { color: #fff; }
html[data-tema="marca"] :is(.a-home-intro, .a-peninsula, .a-amenities, .a-consulta) :is(h1, h2, h3, .a-peninsula__titulo, .a-consulta__datos a) { color: #fff; }
html[data-tema="marca"] .a-peninsula__antetitulo { color: rgba(255, 255, 255, .7); }
html[data-tema="marca"] .a-peninsula__texto { color: rgba(255, 255, 255, .88); }
html[data-tema="marca"] :is(.a-home-intro, .a-peninsula, .a-amenities, .a-consulta) :is(.a-btn:not(.a-btn--sec), .wp-block-button:not(.is-style-outline) .wp-block-button__link) { background: #fff; color: var(--a-rojo-fondo); }
html[data-tema="marca"] :is(.a-home-intro, .a-peninsula, .a-amenities, .a-consulta) :is(.a-btn:not(.a-btn--sec), .wp-block-button:not(.is-style-outline) .wp-block-button__link):hover { background: rgba(255, 255, 255, .88); }
html[data-tema="marca"] :is(.a-home-intro, .a-peninsula, .a-amenities, .a-consulta) :is(.a-btn--sec, .wp-block-button.is-style-outline > .wp-block-button__link) { color: #fff; border-color: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); background: transparent; }
html[data-tema="marca"] .a-amenities__icono img { filter: brightness(0) invert(1); }
/* El formulario sigue siendo una tarjeta blanca con sus colores normales */
html[data-tema="marca"] .a-consulta .a-form .a-btn:not(.a-btn--sec) { background: #910000; color: #fff; }
html[data-tema="marca"] .a-consulta .a-form .a-btn:not(.a-btn--sec):hover { background: #6e0000; }
html[data-tema="marca"] .a-form { color: #000; --wp--preset--color--grafito: #505050; --wp--preset--color--rojo: #910000; --a-rojo: #910000; --wp--preset--color--niebla: #f2f2f2; }

/* ---------- Estilo "Oscuro": base gris carbón + secciones en rojo institucional ---------- */

html[data-tema="oscuro"] {
	color-scheme: dark;
	--a-base: #222;          /* fondo general */
	--a-panel: #2e2e2e;         /* tarjetas, chips, secciones "niebla" */
	--a-texto: #ececec;
	--a-rojo-texto: #ff7466;    /* rojo para texto sobre negro (el #910000 no se lee) */
	--a-rojo-fondo: #910000;    /* el rojo institucional, para fondos */
	--wp--preset--color--rojo: var(--a-rojo-texto);
	--wp--preset--color--niebla: var(--a-panel);
	--wp--preset--color--gris: #3a3a3a;
	--wp--preset--color--grafito: #a6a6a6;
	--a-niebla: var(--a-panel);
	--a-gris: #3a3a3a;
	--a-grafito: #a6a6a6;
}
html[data-tema="oscuro"] body { background: var(--a-base); color: var(--a-texto); }
/* Los fondos rojos (botones, etiquetas) mantienen el rojo institucional */
html[data-tema="oscuro"] :is(.wp-element-button, .wp-block-button:not(.is-style-outline) > .wp-block-button__link, .a-btn:not(.a-btn--sec), .a-promos__tag) { background-color: var(--a-rojo-fondo); color: #fff; }
html[data-tema="oscuro"] :is(.wp-element-button, .wp-block-button:not(.is-style-outline) > .wp-block-button__link, .a-btn:not(.a-btn--sec)):hover { background-color: #6e0000; }

/* Encabezado y menú */
html[data-tema="oscuro"] .a-header { background: rgba(34, 34, 34, .88); border-bottom-color: rgba(255, 255, 255, .1); }
html[data-tema="oscuro"] .a-header .custom-logo { filter: brightness(0) invert(1); }
html[data-tema="oscuro"] .a-header .wp-block-navigation-item__content { color: var(--a-texto); }
html[data-tema="oscuro"] .a-header .a-nav-contacto > .wp-block-navigation-item__content { color: var(--a-rojo-texto); }
html[data-tema="oscuro"] .a-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background: var(--a-panel); border-color: rgba(255, 255, 255, .12); color: var(--a-texto); }
html[data-tema="oscuro"] .a-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background: var(--a-base); color: var(--a-texto); }
html[data-tema="oscuro"] .a-buscar__abrir,
html[data-tema="oscuro"] .a-tema__boton { color: var(--a-texto); }
html[data-tema="oscuro"] .a-buscar__abrir:hover,
html[data-tema="oscuro"] .a-tema__boton:hover { background: var(--a-panel); }

/* Textos y controles que tenían negro fijo */
html[data-tema="oscuro"] :is(.a-card__link, .a-marcas__item a, .a-marcas__item a:hover, .a-consulta__datos a, .a-lee-tambien__item a, .a-novedades .wp-block-post-title a) { color: var(--a-texto); }
html[data-tema="oscuro"] .a-marcas__item a:hover { background: #383838; }
html[data-tema="oscuro"] .a-marcas__logo img { filter: brightness(0) invert(1); }
html[data-tema="oscuro"] .a-chip { color: var(--a-texto); }
html[data-tema="oscuro"] .a-chip[aria-pressed="true"] { background: #fff; color: #000; }
html[data-tema="oscuro"] .a-filtros__select { color: var(--a-texto); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M1.5 4 6 8.5 10.5 4'/%3E%3C/svg%3E"); }
html[data-tema="oscuro"] .a-filtros__select.is-activo { background-color: #fff; color: #000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1.5 4 6 8.5 10.5 4'/%3E%3C/svg%3E"); }
html[data-tema="oscuro"] .a-filtros__select option, html[data-tema="oscuro"] .a-filtros__select optgroup { background: var(--a-panel); color: var(--a-texto); }
html[data-tema="oscuro"] .a-btn--sec { color: var(--a-texto); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
html[data-tema="oscuro"] .a-btn--sec:hover { background: rgba(255, 255, 255, .08); color: var(--a-texto); }
html[data-tema="oscuro"] .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--a-texto); border-color: rgba(255, 255, 255, .45); }
html[data-tema="oscuro"] .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, .08); }
html[data-tema="oscuro"] .a-cifras__grilla li { border-top-color: rgba(255, 255, 255, .18); }

/* El formulario de consulta queda como tarjeta blanca (más legible para completar). */
html[data-tema="oscuro"] .a-form { color: #000; --wp--preset--color--grafito: #505050; }
html[data-tema="oscuro"] .a-form a { color: var(--a-rojo-fondo); }

/* Secciones un poco más oscuras que el fondo, para dar ritmo */
html[data-tema="oscuro"] :is(.a-marcas, .a-tipologias, .a-relacionados) { background: #1a1a1a; }
html[data-tema="oscuro"] .a-cifras { background: var(--a-panel); }

/* Secciones en rojo institucional */
html[data-tema="oscuro"] :is(.a-home-intro, .a-peninsula, .a-amenities, .a-suenos, .a-novedades-titulo) {
	background: var(--a-rojo-fondo); color: #fff;
	--wp--preset--color--grafito: rgba(255, 255, 255, .82);
	--wp--preset--color--rojo: #fff;
	--a-rojo: #fff;
}
html[data-tema="oscuro"] :is(.a-home-intro, .a-peninsula, .a-amenities, .a-suenos) :is(h1, h2, h3, .a-peninsula__titulo) { color: #fff; }
html[data-tema="oscuro"] .a-peninsula__antetitulo { color: rgba(255, 255, 255, .7); }
html[data-tema="oscuro"] .a-peninsula__texto { color: rgba(255, 255, 255, .88); }
/* Botones dentro del rojo: blancos, para que no se pierdan */
html[data-tema="oscuro"] :is(.a-home-intro, .a-peninsula, .a-amenities, .a-suenos) :is(.a-btn:not(.a-btn--sec), .wp-block-button:not(.is-style-outline) .wp-block-button__link) { background: #fff; color: var(--a-rojo-fondo); }
html[data-tema="oscuro"] :is(.a-home-intro, .a-peninsula, .a-amenities, .a-suenos) :is(.a-btn:not(.a-btn--sec), .wp-block-button:not(.is-style-outline) .wp-block-button__link):hover { background: rgba(255, 255, 255, .88); }
html[data-tema="oscuro"] :is(.a-home-intro, .a-peninsula, .a-amenities, .a-suenos) .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .7); }
html[data-tema="oscuro"] .a-amenities__icono img { filter: brightness(0) invert(1); }

/* Pie: separación del rojo de Peninsula */
html[data-tema="oscuro"] body.home .a-pie { border-top-color: transparent; }

/* ---------- Conmutador ---------- */
.a-tema__boton { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #000; cursor: pointer; }
.a-tema__boton:hover { background: #e6e6e6; }
.a-tema__boton svg { width: 20px; height: 20px; }
.a-tema__boton .a-tema__sol { display: none; }
html[data-tema="oscuro"] .a-tema__boton .a-tema__sol { display: block; }
html[data-tema="oscuro"] .a-tema__boton .a-tema__luna { display: none; }
@media (prefers-reduced-motion: no-preference) {
	body, .a-header, .a-section, .a-cifras, .a-peninsula, .a-home-intro, .a-marcas__item a { transition: background-color .25s ease, color .25s ease; }
}
