@charset "UTF-8";
/*
 * PIEL DORADA de la web pública.
 *
 * Se carga la ÚLTIMA, después de martine.css, webmenu.css y buscador.css, y corrige por
 * encima lo que haga falta. Así esas hojas no se reescriben y la piel se puede quitar o
 * cambiar en un solo sitio.
 * Plan y decisiones: _code_docs/trabajos/Mejoras_ASP_2026/10_Piel_dorada/
 *
 * Activa para todo el público desde la fase C (2026-10-11). La cargan las 13 plantillas
 * públicas mediante comun/_piel.asp, que es donde se cambia su versión. Los bloques siguen
 * el orden en que se construyeron (rondas A0-A4 en la home, B2-B5 en el resto); cada uno
 * explica qué corrige y por qué.
 */


/* ===== Paleta =====
 * Valores tomados de los degradados de Logo_dorado.svg, para que web y logo coincidan.
 * Se declaran como variables para que el próximo cambio de color se haga aquí y no en
 * cada regla.
 */
:root {
    /* Catalogo general de servicios: paleta central, estructura en su hoja propia. */
    --sc-fondo: #fff;
    --sc-texto: #171717;
    --sc-secundario: #666;
    --sc-borde: #ded5c4;
    --sc-foto-borde: #888;
    --sc-negro: #000;
    --sc-blanco: #fff;
    --sc-cabecera-velo: rgba(0, 0, 0, .6);
    --oro-oscuro: #98651E;      /* sombra del rombo del logo */
    --oro: #D7A547;             /* acento principal: sustituye al magenta #d70b7d */
    --oro-hover: #B88A2A;       /* sustituye a los magentas oscuros de hover; es el oro plano del logo */
    --oro-claro: #E3BB62;
    --oro-brillo: #FFF0B3;      /* punto de luz del degradado */
    /* Mismo degradado que el texto del logo. Solo sobre fondo oscuro: sobre blanco el brillo desaparece. */
    --oro-degradado: linear-gradient(90deg, #D49F55 0%, #D49F55 11%, #D7A547 21%, #FFF0B3 53%, #E3BB62 83%, #D49F55 100%);
    --texto-sobre-oro: #000;    /* sobre fondo oro, texto negro: el blanco no tiene contraste suficiente */
    --oro-texto: #98651E;       /* oro para TEXTO sobre fondo blanco: el oro principal no llega al contraste mínimo (≈2:1) y este sí (≈4,5:1) */
}


/* ===== Animaciones de entrada =====
 * La plantilla Agency pone en cabecera, secciones y pie «animated fadeIn delayN», con
 * retrasos de hasta 4,9 s definidos en martine.css. Como .animated lleva fill-mode
 * «both», cada bloque se queda invisible durante su retraso: si se baja rápido se ve la
 * página en negro y el pie tarda más de 8 s en aparecer. Se anula la animación
 * solo en los elementos con retraso, para no afectar a otros usos de animate.css. Esto
 * también corrige el parpadeo de #servicios, que lleva «fadeIn delay3» sin «animated».
 */
.delay1,
.delay2,
.delay3,
.delay4,
.delay5,
.delay6,
/* Mismas animaciones sin retraso: la entrada de 1 s de la cabecera en todas las plantillas
   y la de los listados por ciudad. El usuario pidió quitarlas también (11/10/2026). */
header.navbar.animated,
.container-list.animated {
    -webkit-animation: none !important;
    animation: none !important;
}


/* ===== Base =====
 * Enlaces, selección de texto y foco de formularios usaban el magenta de martine.css.
 * El fondo general de la web es negro, así que el enlace genérico pasa al oro principal.
 * Los enlaces que van sobre fondo blanco se corrigen más abajo, uno a uno, con --oro-texto.
 */
body { -webkit-tap-highlight-color: var(--oro); }
a { color: var(--oro); }
::-moz-selection { background: var(--oro); color: var(--texto-sobre-oro); }
::selection { background: var(--oro); color: var(--texto-sobre-oro); }
.form-control:focus { border-color: var(--oro); }


/* ===== Cabecera alta: logo, Mi fiesta y acceso =====
 * Va sobre negro: oro principal. El paso a blanco al pasar el ratón se conserva.
 * Este bloque sigue copiado en cada plantilla (no está en include), pero sus colores
 * salen de aquí.
 */
header p,
header p:last-child,
header input.form-control,
header .entrar,
header button,
header a,
header button#logado { color: var(--oro); }
p.fotologado img { border-color: var(--oro); }


/* ===== Banda del menú superior =====
 * La barra magenta pasa al degradado del logo, con el texto en negro (sobre el oro
 * claro el blanco no se lee). Se usa el id #mainNav para ganar a Bootstrap
 * (.navbar-default) y a webmenu.css, que también usan id, sin recurrir a !important.
 */
#mainNav.navbar-custom {
    background-color: var(--oro);           /* por si el navegador no pinta el degradado */
    background-image: var(--oro-degradado);
}
#mainNav.wm-superior .navbar-nav > li > a,
#mainNav.wm-superior .wm-grupo,
#mainNav.wm-superior .wm-grupo:hover,
#mainNav.wm-superior .open > .wm-grupo,
#mainNav.navbar-custom .navbar-toggle { color: var(--texto-sobre-oro); }
/* Antes el paso del ratón cambiaba de blanco a negro. Como ahora el texto ya es negro,
   se marca con subrayado. */
#mainNav.wm-superior .navbar-nav > li > a:hover,
#mainNav.wm-superior .navbar-nav > li > a:focus,
#mainNav.wm-superior .wm-grupo:hover,
#mainNav.wm-superior .open > .wm-grupo {
    color: var(--texto-sobre-oro);
    text-decoration: underline;
}
/* El contorno de foco era blanco: sobre oro no se ve. */
#mainNav.wm-superior a:focus,
#mainNav.wm-superior .wm-grupo:focus { outline-color: var(--texto-sobre-oro); }

/* Desplegables de los grupos: negros con enlaces en oro, la misma pareja que la cabecera.
   Al pasar el ratón la opción se invierte (fondo oro, texto negro). */
#mainNav.wm-superior .dropdown-menu { background: #000; }
#mainNav.wm-superior .dropdown-menu > li > a { color: var(--oro); }
#mainNav.wm-superior .dropdown-menu > li > a:hover,
#mainNav.wm-superior .dropdown-menu > li > a:focus {
    background: var(--oro);
    color: var(--texto-sobre-oro);
}

/* En escritorio, al bajar más de 100 px, martine.js fija la barra (affix) y martine.css
   la vuelve negra. Se conserva el negro y el texto pasa a oro, como la cabecera. */
@media (min-width: 768px) {
    #mainNav.navbar-custom.affix {
        background-color: #000;
        background-image: none;
        /* La barra fijada está a una altura fija (top 150px; 158px entre 992 y 1199px por un
           margin-top heredado), pero la cabecera negra crece con su contenido: con sesión
           iniciada o con el logo SVG, más bajo que el PNG, puede quedar más corta y dejar
           ver la página por una rendija. Una sombra negra sólida hacia arriba tapa
           cualquier hueco sin depender de esas alturas; no se nota porque las dos son
           negras. Queda por debajo de la cabecera (z-index 1031 frente a 1030). */
        box-shadow: 0 -20px 0 0 #000;
    }
    #mainNav.affix.wm-superior .navbar-nav > li > a,
    #mainNav.affix.wm-superior .wm-grupo,
    #mainNav.affix.wm-superior .wm-grupo:hover,
    #mainNav.affix.wm-superior .open > .wm-grupo { color: var(--oro); }
    #mainNav.affix.wm-superior a:focus,
    #mainNav.affix.wm-superior .wm-grupo:focus { outline-color: var(--oro); }
}


/* ===== Hero de la portada y buscador ===== */
/* Las reseñas van sobre el velo negro del hero; las estrellas, de amarillo al oro claro. */
#home-hero .me-hero-resenas { color: var(--oro); }
#home-hero .me-hero-estrellas { color: var(--oro-claro); }

.me-buscador input:focus { outline-color: var(--oro); }
.me-busca-boton {
    background: var(--oro);
    color: var(--texto-sobre-oro);
}
.me-busca-boton:hover,
.me-busca-boton:focus {
    background: var(--oro-hover);
    color: var(--texto-sobre-oro);
}
/* El mensaje del buscador y los enlaces de resultados van sobre blanco: oro de texto. */
.me-busca-mensaje { color: var(--oro-texto); }
.me-busca-resultados a { color: var(--oro-texto); }
.me-busca-resultados a:hover,
.me-busca-resultados a:focus { color: #000; }
.me-busca-resultados a:focus-visible { outline-color: var(--oro-texto); }


/* ===== Botón principal (.btn-xl) =====
 * «Enviar» de Te llamamos (footer) y «Organiza tu fiesta». Era magenta con texto blanco;
 * pasa a oro con texto negro. El paso del ratón de martine.css (negro, o blanco en el
 * footer) se conserva.
 */
.btn-xl {
    background-color: var(--oro);
    border-color: var(--oro);
    color: var(--texto-sobre-oro);
}


/* ===== Secciones de la portada =====
 * Las bandas azul (Servicios) y oliva (Packs) se conservan por decisión del usuario.
 */
/* El recuadro de precio y «Ver más» de las tarjetas (efecto Ruby) se resuelve en el
   bloque «Tarjetas», más abajo (ronda A3). */
section#servicios h3 {
    background-color: var(--oro);
    border-color: var(--oro);
    color: var(--texto-sobre-oro);
}
/* Plan 19: superar el peso100!important heredado sin modificar otros titulos de la web. */
body.me-asistente #servicios h3 { font-weight: 600 !important; }
/* Plan 19: entradilla bajo la foto, fuera de las capas del titulo/precio y del efecto Ruby. */
body.me-home .grid > .me-tarjeta-entradilla,
body.me-asistente .grid > .me-tarjeta-entradilla {
    clear: both; box-sizing: border-box; width: 100%; margin: 0; padding: 12px;
    background: var(--sc-fondo); color: var(--sc-texto);
    font-size: 14px; line-height: 1.5; text-align: left;
    overflow-wrap: anywhere;
}
/* Ventana de elegir ciudad de Packs: botones de ciudad sobre fondo negro. */
.ciudades .list-inline > li { background-color: var(--oro); }
.ciudades .list-inline > li a { color: var(--texto-sobre-oro); }


/* ===== Footer y franja de copyright ===== */
/* Títulos de columna y paso del ratón sobre negro. */
footer h2,
footer h3,
footer li a:hover,
footer li a:active,
ul.social-buttons li a:active,
ul.social-buttons li a:focus,
ul.social-buttons li a:hover { color: var(--oro); }
/* La franja de copyright era magenta: pasa a oro liso (el degradado se reserva para
   el menú) y su texto y enlaces, a negro. */
section#copyright { background-color: var(--oro); }
section#copyright,
section#copyright ul,
section#copyright a { color: var(--texto-sobre-oro); }
section#copyright a:hover,
section#copyright a:focus { text-decoration: underline; }


/* ===== Avisos ===== */
/* Banda de cookies (fondo blanco): borde en oro y enlaces en oro de texto. */
#CookieBox { border-top-color: var(--oro); }
#CookieBox a { color: var(--oro-texto); }
.cookiebutton:hover { background-color: var(--oro); }
/* Avisos del acceso de usuario (fondo blanco). */
.alert-warning { border-color: var(--oro); }


/* ===== Bloques comunes de FAQ y FiestasME =====
 * Van sobre fondo blanco, así que el texto usa el oro de texto.
 */
.faqs .faq-boton,
.faqs .faq-respuesta a,
.fiestasme-nombre { color: var(--oro-texto); }


/* ===== Iconos de las cabeceras de sección (ronda A2) =====
 * La estrella de Servicios y el corazón de Packs son PNG blancos que martine.css pone
 * como fondo del propio título. Para pintarlos en oro sin rehacer los PNG se usa el PNG
 * como MÁSCARA de un recuadro relleno con el degradado del logo: se ve el oro solo donde
 * el PNG es opaco. La máscara no puede ir en el título, porque lo taparía entero; va en
 * un ::before colocado donde estaba el fondo (20px a la izquierda, 40px arriba; 10px
 * arriba en móvil, como martine.css).
 * @supports: un navegador sin máscaras conserva el icono blanco original en lugar de
 * pintar un cuadrado dorado.
 */
@supports ((-webkit-mask-image: url("x.png")) or (mask-image: url("x.png"))) {
    section#servicios .section-heading,
    section#packs .section-heading {
        background-image: none;
        position: relative;
    }
    section#servicios .section-heading::before,
    section#packs .section-heading::before {
        content: "";
        position: absolute;
        left: 20px;
        top: 40px;
        background-image: var(--oro-degradado);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
    /* Cada icono con el tamaño de su PNG, para que no se deforme. */
    section#servicios .section-heading::before {
        width: 36px;
        height: 35px;
        -webkit-mask-image: url(../img/estrella.png);
        mask-image: url(../img/estrella.png);
    }
    section#packs .section-heading::before {
        width: 35px;
        height: 33px;
        -webkit-mask-image: url(../img/corazon.png);
        mask-image: url(../img/corazon.png);
    }
    @media (max-width: 480px) {
        section#servicios .section-heading::before,
        section#packs .section-heading::before { top: 10px; }
    }
}


/* ===== Colores que estaban escritos en el HTML =====
 * Un style="color:#D70B7D" en la etiqueta gana a cualquier hoja, así que se sustituye en
 * el HTML por una clase que sí se puede pintar desde aquí. En la fase B, al llevar estas
 * clases a las plantillas reales, se definen también en martine.css con el magenta de
 * siempre, para que la web sin piel no cambie.
 * .color-acento: icono del carrito de la cabecera (versión de escritorio y de móvil).
 * Se gana a .fa-inverse de Font Awesome, que lo pondría en blanco, por cargar después.
 */
.color-acento { color: var(--oro) !important; }  /* !important: en las plantillas reales el style incrustado se conserva (ver bloque B3) */


/* ===== Tarjetas de servicios y packs (ronda A3) =====
 * Antes: al pasar el ratón aparecía un recuadro magenta con el precio y un botón «Ver más»,
 * y SOLO ese botón era enlace. Ahora toda la tarjeta lleva al destino y el recuadro
 * desaparece. El precio queda fijo encima del título y en oro, sin depender del ratón
 * (decisión del usuario, 11/10/2026; el «Desde» se descartó de momento).
 *
 * Se hace solo con CSS para no tocar el HTML: estas tarjetas salen de la portada, de los
 * listados por ciudad, del asistente y de opc.asp (el AJAX que recarga los packs al cambiar
 * de ciudad). Técnica del «enlace estirado»: el ::after del enlace «Ver más» se extiende
 * sobre todo el figcaption, que ya cubre la tarjeta entera.
 *
 * Ronda B2: el bloque se generaliza a las tarjetas de listado (servicios_ciudad y
 * packs_ciudad), que no usan el efecto Ruby pero tienen la misma estructura (figure >
 * img + figcaption > h2 + p > precio + enlace). Las dos variantes comparten la clase
 * «inactive», que no tiene ningún otro uso en hojas ni scripts: es el enganche común.
 */

/* Sin recuadro. Se quita también su transform: un elemento con transform pasa a ser el
   contenedor de los hijos con position:absolute y encerraría el ::after dentro del
   recuadro en vez de dejarle cubrir la tarjeta. */
figure.inactive p {
    background: transparent;
    /* Sombra para que el precio blanco se lea sobre cualquier foto: en táctil se ve sin el
       oscurecimiento que la imagen solo recibe al pasar el ratón. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
    -webkit-transform: none;
    transform: none;
}
/* Al recuadro le daba fondo martine.css con «section figure.effect-ruby p»: se iguala esa
   especificidad para que gane el transparente. */
section figure.effect-ruby p { background: transparent; }  /* solo existe en la variante Ruby */

/* El botón deja de verse como botón: sin texto visible, sin fondo y sin su posición
   relativa ni su transform (los de .hvr-bounce-to-right), que también encerrarían el
   ::after. Las reglas con id de martine.css (#servicios, #packs, #listado) se repiten
   para ganarles en especificidad. El texto «Ver más» sigue en el HTML y lo leen los
   lectores de pantalla. */
figure.inactive p a.button,
section#servicios figure.inactive p a.button,
section#packs figure.inactive p a.button,
section#listado figure.inactive p a.button {
    position: static;
    display: inline;
    -webkit-transform: none;
    transform: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 0;
    line-height: 0;
    color: transparent;
}
/* La barra negra que barría el botón al pasar el ratón ya no tiene botón que barrer. */
figure.inactive p a.button::before { display: none; }
/* El enlace estirado: ocupa todo el figcaption, título incluido, por encima de todo. */
figure.inactive p a.button::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}
/* El contorno de foco se dibuja sobre la tarjeta entera, para quien navega con teclado. */
figure.inactive p a.button:focus { outline: none; }
figure.inactive p a.button:focus::after { outline: 3px solid var(--oro); outline-offset: -3px; }

/* Precio fijo encima del título, en oro para distinguirlo de él.
 * El figcaption (ya en posición absoluta sobre toda la tarjeta) pasa a ser una columna
 * pegada abajo. El título deja la posición absoluta que le daba martine.css y entra en el
 * flujo, así el precio va siempre justo encima aunque el título ocupe dos líneas. El título
 * queda pegado al borde inferior, como se veía antes en reposo (su «bottom: 20px» lo
 * compensaba un desplazamiento de 20px hacia abajo que solo se deshacía al pasar el ratón).
 * Selectores con «section .grid» para ganar a los de martine.css y set1.css, incluido el
 * :hover de set1, que ocultaba el precio y desplazaba el título.
 */
section .grid figure.inactive figcaption {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    padding: 0;
}
section .grid figure.inactive h2,
section .grid figure.inactive:hover h2 {
    position: static;
    -webkit-order: 2;
    order: 2;
    -webkit-transform: none;
    transform: none;
}
section .grid figure.inactive p,
section .grid figure.inactive:hover p {
    -webkit-order: 1;
    order: 1;
    opacity: 1;
    /* set1.css le vuelve a poner un transform al pasar el ratón (translate3d(0,0,0) scale(1)):
       aunque no lo mueva, bastaría para encerrar el enlace estirado dentro del precio justo
       mientras el ratón está encima. */
    -webkit-transform: none;
    transform: none;
    margin: 0 0 6px;
    padding: 0 10px;
    color: var(--oro);
    font-size: 18px;
    font-weight: 700;
}
/* El salto de línea entre el precio y el enlace dejaba una línea vacía bajo el precio. */
section .grid figure.inactive p br { display: none; }
/* Las tarjetas de listado llevan style="font-size:130%" escrito en el <p> del precio. Un
   estilo incrustado solo se puede vencer desde una hoja con !important. */
section .grid figure.inactive p[style] { font-size: 18px !important; }


/* Plan 15: galeria de home, titulo de altura libre y precio sobre el, sin mover enlaces.
 * Los colores/degradados se definen aqui; no se modifica el encuadre de las fotos. */
:root {
    --home-tarjeta-negro: #000;
    --home-tarjeta-blanco: #fff;
    --home-tarjeta-transparente: rgba(0, 0, 0, 0);
    --home-precio-transparente: rgba(152, 101, 30, 0);
    --home-titulo-degradado: linear-gradient(to right, var(--home-tarjeta-negro) 0%, var(--home-tarjeta-negro) 50%, var(--home-tarjeta-transparente) 100%);
    --home-precio-degradado: linear-gradient(to left, var(--oro-oscuro) 0%, var(--oro-oscuro) 20%, var(--home-precio-transparente) 35%);
}
body.me-home #servicios .grid figure.inactive h2,
body.me-home #ListaPacks .grid figure.inactive h2 {
    box-sizing: border-box;
    border-left: 8px solid var(--oro);
    background: var(--home-titulo-degradado);
    color: var(--home-tarjeta-blanco);
    padding: 10px 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    text-transform: none;
    overflow-wrap: break-word;
    /* Las letras pueden alcanzar la zona transparente con titulos de varias lineas. */
    text-shadow: 0 1px 3px var(--home-tarjeta-negro);
}
/* Misma respuesta visual con raton y teclado, sin desplazar titulo ni imagen. */
body.me-home #servicios .grid figure.inactive:hover h2,
body.me-home #servicios .grid figure.inactive:focus-within h2,
body.me-home #ListaPacks .grid figure.inactive:hover h2,
body.me-home #ListaPacks .grid figure.inactive:focus-within h2 {
    color: var(--oro);
}
body.me-home #servicios .grid figure.inactive p,
body.me-home #ListaPacks .grid figure.inactive p,
body.me-asistente .grid figure.inactive p {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: right;
    /* El enlace invisible tras el span creaba una linea vacia entre precio y titulo. */
    font-size: 0;
    line-height: 0;
}
/* El span solo existe para importes positivos: sin precio no queda franja ni hueco.
 * El p conserva posicion/transform para que el enlace siga cubriendo toda la tarjeta. */
/* Plan 19: compartir solo la etiqueta de precio; la rejilla del asistente es independiente. */
body.me-home .grid figure.inactive .me-tarjeta-precio,
body.me-asistente .grid figure.inactive .me-tarjeta-precio {
    display: block;
    padding: 8px 12px;
    background: var(--home-precio-degradado);
    color: var(--home-tarjeta-blanco);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: 0 1px 2px var(--oro-oscuro);
}

/* Plan 15: contrato comun de cabeceras de home. Variantes nombradas por seccion;
 * packs admite accion y las inferiores heredan el ancho de su contenedor.
 * Colores nuevos centralizados en la piel para mantener el mismo lenguaje visual. */
:root {
    --home-titulo: #fff;
    --home-fondo: #000;
    --home-fondo-transparente: rgba(0, 0, 0, 0);
    --home-accion-fondo: #fff;
    --home-cabecera-degradado: linear-gradient(to right, var(--home-fondo) 0%, var(--home-fondo) 40%, var(--home-fondo-transparente) 100%);
}
body.me-home #servicios { padding-top: 36px; padding-bottom: 32px; }
body.me-home #packs { padding-top: 16px; }
body.index .me-seccion-cabecera {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto 16px;
    padding: 18px 24px;
    background: var(--home-cabecera-degradado);
    /* El acento vertical sustituye a los iconos sin competir con las fotografias. */
    border-left: 12px solid var(--oro);
}
body.index .me-seccion-cabecera h2 {
    margin: 0;
    padding: 0;
    color: var(--home-titulo);
    font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    /* Protege letras largas que alcancen la parte clara del degradado en movil. */
    text-shadow: 0 1px 3px var(--home-fondo), 0 0 2px var(--home-fondo);
}
/* La banda basta como separador: sin linea horizontal ni decoracion adicional. */
body.index .me-seccion-cabecera::after {
    content: none;
}
body.index .me-seccion-ciudad {
    order: 2;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
    /* Fondo propio para que la accion sea legible en cualquier punto del degradado. */
    padding: 6px 10px;
    background: var(--home-accion-fondo);
    color: var(--oro-texto);
    font-size: 16px;
    text-transform: none;
}
body.index .me-seccion-cambiar { color: var(--oro-texto); font-size: 14px; text-decoration: underline; }
body.index .me-seccion-ciudad:focus-visible { outline: 2px solid var(--oro-texto); outline-offset: 4px; }
/* Las cabeceras inferiores viven en los includes compartidos y heredan esta banda.
 * Eliminar el separador antiguo sin cambiar preguntas, galerias ni sus contenedores. */
body.index .me-bloque-compartido { padding-top: 0; border-top: 0; }
body.index .me-bloque-compartido > .me-seccion-cabecera { max-width: none; }
body.index .me-home-bloque { margin-top: 48px; }
/* El container inferior anidado anadia 15 px por lado solo a estas dos barras.
 * La cabecera recupera ese espacio sin ensanchar el contenido de FAQ/FiestasME. */
body.index .me-home-bloque .me-bloque-compartido > .me-seccion-cabecera {
    width: calc(100% + 30px);
    max-width: none;
    margin-left: -15px;
    margin-right: -15px;
}
body.index .me-home-bloque .faqs,
body.index .me-home-bloque .fiestasme-publicas { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 767px) {
    body.me-home #servicios { padding-top: 28px; }
    body.index .me-seccion-cabecera { gap: 12px; padding: 16px; }
    body.index .me-seccion-cabecera h2 { font-size: 24px; }
}
/* La ciudad solo pasa debajo en el tramo de una columna; en dos ya cabe a derecha. */
@media (max-width: 539px) {
    body.index .me-seccion-cabecera--packs { flex-wrap: wrap; }
    /* El titulo ocupa la primera fila; la accion baja sin estirar su fondo blanco. */
    body.index .me-seccion-cabecera--packs h2 { flex-basis: 100%; }
    body.index .me-seccion-ciudad { flex-basis: auto; margin-left: 0; }
}

/* Plan 19: .index es heredada por todas las plantillas. Solo .me-home identifica
 * portada: evita convertir los titulos de grupo del asistente en celdas del grid. */
/* Plan 15, 1.A: solo las dos rejillas de home, incluida la respuesta AJAX de packs.
 * Columnas explicitas evitan que el ancho maximo permita dos tarjetas en el tramo de una.
 * Los selectores no alcanzan FiestasME ni los listados interiores que comparten .grid. */
/* El contenedor Bootstrap saltaba de 750 a 970 px aun manteniendo tres columnas.
 * Ancho fluido solo aqui para que los margenes no crezcan de golpe al estrechar. */
body.me-home #servicios > .container,
body.me-home #packs > .container {
    width: 100%;
    max-width: 1170px;
}
body.me-home #servicios > .container > .row,
body.me-home #ListaPacks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 400px));
    justify-content: center;
    /* Cada tarjeta arranca arriba aunque otra foto de la fila sea mas alta. */
    align-items: start;
}
/* Los pseudo-elementos clearfix de Bootstrap no deben ocupar una celda. */
body.me-home #servicios > .container > .row::before,
body.me-home #servicios > .container > .row::after,
body.me-home #ListaPacks::before,
body.me-home #ListaPacks::after { display: none; }

body.me-home #servicios > .container > .row > .grid,
body.me-home #ListaPacks > .grid {
    float: none;
    width: 100%;
    min-width: 0;
    max-width: none; /* El limite lo define cada tramo; padding de 10 px por lado. */
    margin: 0;
    padding: 10px;
}
/* La foto determina la altura; se anulan mínimos y topes del efecto Ruby heredado.
 * !important solo en height para vencer el 333px!important móvil de martine.css. */
body.me-home #servicios .grid > figure.inactive,
body.me-home #ListaPacks .grid > figure.inactive {
    float: none;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto !important;
    max-height: none;
    margin: 0;
}
/* Sin zoom tampoco en hover: muestra el encuadre guardado y conserva su proporción.
 * Títulos, precio y enlace estirado siguen superpuestos con las reglas anteriores. */
body.me-home #servicios .grid > figure.inactive > img,
body.me-home #servicios .grid > figure.inactive:hover > img,
body.me-home #ListaPacks .grid > figure.inactive > img,
body.me-home #ListaPacks .grid > figure.inactive:hover > img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    -webkit-transform: none;
    transform: none;
}
/* Cortes propios de estas rejillas: no dependen del menu ni de las columnas Bootstrap. */
@media (min-width: 820px) and (max-width: 1099px) {
    body.me-home #servicios > .container > .row,
    body.me-home #ListaPacks {
        grid-template-columns: repeat(3, minmax(0, 400px));
    }
}
@media (min-width: 540px) and (max-width: 819px) {
    body.me-home #servicios > .container > .row,
    body.me-home #ListaPacks {
        grid-template-columns: repeat(2, minmax(0, 400px));
    }
}
@media (max-width: 539px) {
    body.me-home #servicios > .container > .row,
    body.me-home #ListaPacks {
        grid-template-columns: minmax(0, 400px);
    }
}

/* ===== Páginas interiores: cabeceras y listados (ronda B2) =====
 * Lo que comparten listados, páginas de contenido (web, fiestas, despedidas) y fichas.
 */
/* Barrita bajo el título de página: sobre la foto oscurecida de la cabecera o sobre negro. */
.page-header .linea,
#elegirciudad .linea { border-top-color: var(--oro); }
/* Recuadro «elige tu ciudad» sobre la foto oscurecida, y el paso del ratón por sus enlaces. */
#elegirciudad .well { border-color: var(--oro); }
#elegirciudad p.enmarcado a:hover { color: var(--oro); }
/* Fondo de la zona de listado. Su trama GIF casi lo tapa entero (por eso no se veía
   magenta), pero el color asoma entre la trama: pasa a negro, como el resto del fondo. */
.container-list { background-color: #000; }
/* Otros botones de la zona de listado. Los de las tarjetas ya no se ven (bloque Tarjetas). */
section#listado a.button {
    background: var(--oro);
    color: var(--texto-sobre-oro);
}


/* ===== Contenido editorial (#contenidoFicha, ronda B2) =====
 * Texto de las páginas de servicios, listados por ciudad, web y fiestas, sobre fondo
 * blanco. Por eso el oro de los textos es el oscuro (--oro-texto).
 * Lo que el contenido trae con style="…#d70b7d…" escrito dentro (guardado en la BD) no
 * se toca aquí: se corrige en los datos con el SQL de la fase B.
 */
#fichaservicio h1,
#contenidoFicha p strong,
#contenidoFicha li,
#contenidoFicha a { color: var(--oro-texto); }
#contenidoFicha a:hover { color: #000; }
/* Las bandas de los subtítulos eran magenta con texto blanco: oro con texto negro, como la
   franja de copyright. */
#contenidoFicha h2 {
    background-color: var(--oro);
    color: var(--texto-sobre-oro);
}


/* ===== Clases marcadoras para el color incrustado (ronda B3) =====
 * Cambio de método respecto al plan (que preveía quitar el style y definir la clase
 * también en martine.css): las plantillas piden martine.css con una versión fija y un
 * navegador con esa hoja en caché no vería las clases nuevas; sin piel, por ejemplo, la
 * banda de EXTRAS quedaría sin fondo y con texto blanco sobre blanco. Por eso el style
 * incrustado SE CONSERVÓ (era lo que se veía sin piel durante la revisión) y se añadió al
 * lado una clase que solo define esta hoja, con !important, que es la única forma de ganar
 * a un style desde una hoja. Con la piel ya activa para todos, esos style magenta no se ven
 * y podrían retirarse de las plantillas en una limpieza posterior (pendiente anotado en el plan).
 */
/* Banda de EXTRAS del formulario de reserva de las fichas: era magenta con texto blanco. */
.fondo-acento {
    background-color: var(--oro) !important;
    color: var(--texto-sobre-oro) !important;
}
/* Borde del aviso que aparece sobre el calendario de la ficha (fondo blanco). */
.borde-acento { border-color: var(--oro) !important; }
/* «ATENCIÓN:» de las ofertas de grupo en la ficha de pack (texto sobre blanco). */
.texto-acento { color: var(--oro-texto) !important; }
/* Nota pequeña del bloque de precio («precio por persona…», «IVA incluido»): era blanca
   sobre magenta; sobre el oro, negra. */
.precio-nota { color: var(--texto-sobre-oro) !important; }


/* ===== Fichas de servicio y de pack (ronda B3) ===== */
/* Bloque del precio, arriba a la derecha: oro con la cifra en negro. */
.precio { background: var(--oro); }
.precio p { color: var(--texto-sobre-oro); }
/* Punto activo (y al pasar el ratón) del carrusel de fotos. */
.owl-dots .owl-dot.active span,
.owl-dots .owl-dot:hover span { background: var(--oro); }
/* Cargador giratorio mientras se añade al carrito: lo define un <style> de la propia
   plantilla, anterior a esta hoja, así que basta con repetir el selector. */
.loader { border-top-color: var(--oro); }
/* Bloques de compartir y valorar: eran bandas magenta con el título en blanco. */
#comparte,
#valora { background-color: var(--oro); }
#comparte h2,
#valora h2 { color: var(--texto-sobre-oro); }
#comparte a { color: var(--texto-sobre-oro) !important; }  /* martine.css lo fija con !important */
/* Subtítulos de la caja de características (fondo gris claro). */
#caracteristicasFicha h3 { color: var(--oro-texto); }

/* Calendario desplegable (fichas, asistente y Mi fiesta). Era magenta con los días en
   blanco: pasa a oro con los días en negro, porque el blanco no se lee sobre el oro. Las
   filas de cabecera negras, el día activo blanco y el paso del ratón (negro) se conservan. */
.datepicker.dropdown-menu { background-color: var(--oro); }
.datepicker-dropdown:after { border-bottom-color: var(--oro); }
.datepicker td,
.datepicker th.dow { color: var(--texto-sobre-oro); }
/* Días del mes anterior y siguiente: antes eran negros sobre magenta para distinguirse de
   los blancos; ahora los normales son negros, así que estos pasan a gris translúcido. */
.datepicker table tr td.old,
.datepicker table tr td.new { color: rgba(0, 0, 0, .4); }
.datepicker table tr td.day:hover { color: #fff; }


/* ===== Asistente (ronda B4) =====
 * La sección del asistente (asistente.asp; también un bloque inerte de la home) tenía
 * fondo magenta tapado casi entero por la trama GIF, como la zona de listado: pasa a negro.
 * Lo que va encima, sobre ese fondo oscuro, en oro principal.
 */
section#asistente { background-color: #000; }
section#asistente .section-heading,
section#asistente .text-danger { color: var(--oro); }
section#asistente .form-control:focus { border-color: var(--oro); }   /* era el amarillo de Agency */
/* Teclas de la calculadora de presupuesto: magenta con texto blanco -> oro con texto negro.
   El paso del ratón (negro con texto blanco) se conserva. */
.calc {
    background-color: var(--oro);
    color: var(--texto-sobre-oro);
}
.calc:hover { color: #fff; }
/* Título del bloque de texto del asistente (va sobre una franja blanca). */
#texto-asistente p.titulo { color: var(--oro-texto); }


/* ===== Mi fiesta: el carrito (carrito.css, ronda B4) =====
 * Todo va sobre blanco (o el gris claro del total): las bandas de título y las píldoras de
 * precio pasan a oro con texto negro, y los textos sueltos a oro de texto.
 */
.nombrefiesta input,
.serviciosfiesta p,
.itemcarrito h3 { color: var(--oro-texto); }
.itemcarrito h2,
.itemcarrito h2 a,
.cliente h2,
.comentarios h2,
.itemcarrito p.precio { color: var(--texto-sobre-oro); }
.itemcarrito h2,
.cliente h2,
.comentarios h2,
.itemcarrito p.precio { background-color: var(--oro); }
.advertencia .well { border-color: var(--oro); }
/* El total y el total por persona: acotados al formulario de Mi fiesta, porque Mis fiestas
   usa los mismos id sin carrito.css y ahí no tienen fondo. */
#CompraFiesta #cartTOTALPVP {
    background-color: var(--oro);
    color: var(--texto-sobre-oro);
}
#CompraFiesta #cartTOTALPVPxP { color: var(--oro-texto); }
/* Botones «Entrar» con borde (sobre blanco). El paso del ratón (negro) se conserva. */
#btnC_Entrar a,
#btnCn_Entrar a {
    color: var(--oro-texto);
    border-color: var(--oro);
}
/* Aviso de error del carrito (fondo negro). */
#cart_msgerror { border-color: var(--oro); }

/* El título del menú inferior se muestra como se escribió en el gestor;
   anula las mayúsculas heredadas del copyright sin cambiar sus créditos. */
section#copyright .wm-inferior li,
section#copyright .wm-inferior a { text-transform: none; }

/* Panel de búsqueda: colores centralizados en la piel, acotados a resultados.
   El placeholder se distingue del valor real sin perder legibilidad. */
:root {--busca-panel-fondo:#fffaf0;--busca-panel-borde:#eadcc2;--busca-placeholder:#777;}
body.buscar .me-busca-cabecera {background:var(--busca-panel-fondo);border-color:var(--busca-panel-borde);border-top-color:var(--oro);}
body.buscar .me-busca-cabecera h1 {color:var(--oro-texto);}
body.buscar .me-buscador input[type=text]::placeholder {color:var(--busca-placeholder);opacity:1;}

/* Fondo oscuro de piel para que el oro del precio sea legible sobre cualquier foto. */
:root {--busca-precio-fondo:rgba(0,0,0,.88);}
body.buscar .me-busca-precio {background:var(--busca-precio-fondo);color:var(--oro-claro);}
body.buscar .me-busca-precio strong {color:var(--oro-claro);}

/* Gris editorial solicitado: distingue la entradilla del título y la localidad. */
:root {--busca-descripcion:#797979;}
body.buscar .me-busca-tarjeta p.me-busca-descripcion {color:var(--busca-descripcion);}

/* Velo de interacción del buscador: color centralizado en la piel. */
:root {--busca-foto-velo:rgba(0,0,0,.16);}
body.buscar .me-busca-foto::after {background:var(--busca-foto-velo);}

/* Cache versionada (Plan 13): al editar esta hoja, subir su version en comun/_piel.asp.
   Marca de sustitucion real para verificar la descarga con URL nueva: 20261014-cache1. */