/* =====================================================================
   WEB DE REGALOS — tema «Laurisilva + Agua» (Tenerife).
   Va después de theme.css y site.css y solo usa las variables de
   css/tenerife-tema.css (allí se cambian los colores, el cristal y el fondo).
   Panel /admin/web/ no carga este archivo: su aspecto no cambia.
   ===================================================================== */

/* ---------- Variables de la web → tema Tenerife ---------- */
:root {
  --c-crema:        var(--lmc-marfil);
  --c-crema-claro:  var(--lmc-sobre-turquesa);
  --c-arena:        var(--lmc-gris-agua);
  --c-oro:          var(--lmc-turquesa);        /* líneas finas y foco: turquesa (5:1 sobre el fondo) */
  --c-oro-texto:    var(--lmc-texto);           /* etiquetas pequeñas: sobre el cristal, el color del texto */
  --c-texto:        var(--lmc-texto);
  --c-texto-suave:  var(--lmc-texto-suave);
  --c-oscuro:       var(--lmc-turquesa-hondo);  /* botón principal */
  --line-soft:      var(--lmc-linea);
  --btn-primary-bg-hover: var(--lmc-turquesa);
  --whatsapp:       var(--lmc-turquesa-hondo);

  /* Cabecera de cielo y pie de orilla, texto blanco */
  --header-h:          104px;
  --header-bg:         var(--lmc-turquesa);
  --header-text:       var(--lmc-sobre-turquesa);
  --header-text-soft:  var(--lmc-sobre-turquesa-suave);
  --header-border:     var(--lmc-linea-agua);
  --header-line:       var(--lmc-marco);
  --cacao-satin:       var(--lmc-turquesa);
  --satin-dark-bg:     none;
  --text-on-dark:      var(--lmc-sobre-turquesa);
  --text-on-dark-soft: var(--lmc-sobre-turquesa-suave);
  --accent-text-on-dark: var(--lmc-sobre-turquesa);
  --line-on-dark:      var(--lmc-linea-agua);
  --focus-on-dark:     var(--lmc-sobre-turquesa);
  --social-metal-a:    var(--lmc-sobre-turquesa);
  --social-metal-b:    var(--lmc-nacar-rosa);
  --social-metal-c:    var(--lmc-nacar-azul);

  /* Pantallas grandes: contenido más ancho (sin huecos vacíos a los lados) */
  --container:      1440px;
  --mat-line:       color-mix(in srgb, var(--lmc-turquesa) 35%, transparent);
  --placeholder-bg: var(--lmc-ella);
}
@media (max-width: 767px) {
  :root { --header-h: 80px; }
}

/* ---------- Fondo fijo: se ve en toda la página, sin velo ---------- */
body { background-color: var(--lmc-fondo-color); color: var(--lmc-texto); }
body::before { background: var(--lmc-fondo-color) var(--lmc-fondo-grande) center / cover no-repeat; opacity: 1; }
@media (max-width: 1366px) { body::before { background-image: var(--lmc-fondo-medio); } }
@media (max-width: 767px) and (orientation: portrait) { body::before { background-image: var(--lmc-fondo-movil); } }
@media (max-width: 767px) {
  #main .container { padding-left: var(--space-sm); padding-right: var(--space-sm); }
}

/* ---------- Cabecera de cielo: concha grande + «L·M·C», menú repartido a lo ancho ---------- */
.site-header::before { background: var(--lmc-cielo); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header::after { height: 2px; }
.site-header, .site-nav, .site-header button { text-shadow: var(--lmc-cielo-sombra); }
.brand img, .site-footer__brand img { filter: var(--lmc-concha-filtro); }
.brand { gap: var(--space-sm); color: var(--header-text); }
.brand img { height: calc(var(--header-h) - 16px); }
.brand__lmc {
  font-family: var(--lmc-firma-fuente); font-weight: 500; font-size: 1.75rem; line-height: 1;
  white-space: nowrap;
}
.site-nav__link::after { background: var(--header-text); }
.lang-switch button[aria-pressed="true"] { background: var(--header-text); color: var(--lmc-turquesa-hondo); text-shadow: none; }
.site-header :focus-visible { outline-color: var(--header-text); }
@media (min-width: 1024px) {
  .site-nav { flex: 1; justify-content: space-between; margin-left: var(--space-2xl); }
  .site-nav__list { flex: 1; justify-content: space-evenly; }
}
@media (max-width: 1023px) {
  .site-nav { background: var(--lmc-cielo); }
  .site-nav__link { color: var(--header-text); }
}
@media (max-width: 767px) {
  .brand__lmc { font-size: 1.375rem; }
}
@media (max-width: 374px) {
  .brand__lmc { font-size: 1.125rem; --lmc-firma-espacio: .2em; }
}

/* ---------- Pie de orilla (concha + «by Cilioaica Studio», como antes) ---------- */
.site-footer, .site-footer button { text-shadow: var(--lmc-orilla-sombra); }
.site-footer { background: var(--lmc-orilla); }
.site-footer::before { height: 2px; background: var(--lmc-marco); }
.site-footer__bottom { border-top-color: var(--lmc-linea-agua-suave); }
.site-footer__marca { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.site-footer__marca img { margin-bottom: 0; }
.site-footer__marca .brand__lmc { font-size: 2rem; }
.site-footer :focus-visible { outline-color: var(--text-on-dark); }

/* ---------- Texto ---------- */
h1, h2, h3, h4 { color: var(--lmc-texto); }

/* ---------- Tarjetas y bloques transparentes con marco de nácar (se ve el fondo) ---------- */
.paquete, .service, .contact-box, .value, .testimonial, .price, .price--featured, .faq, .gift, .duo__card, .duo__card[class*="tono-"], .service:hover {
  position: relative; border: 0; background: transparent; box-shadow: var(--lmc-sombra);
}
.paquete::after, .service::after, .contact-box::after, .value::after, .testimonial::after, .price::after, .faq::after, .gift::after, .duo__card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; padding: var(--lmc-marco-ancho); border-radius: inherit; pointer-events: none;
  background: var(--lmc-marco);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* el filete interior de las tarjetas sobraba con el marco de nácar */
.gift::before, .price::before, .duo__card::before, .contact-box::before { display: none; }
.faq { padding: 0 var(--space-lg); }
@media (max-width: 767px) { .faq { padding: 0 var(--space-md); } }

/* ---------- Cristal ligero, solo donde hay texto ---------- */
.hero__text, .section-head, .page-hero .container > div, .duo__card > div:last-child, .paquete__body, .service, .contact-box, .value, .testimonial,
.price, .faq, .gift, .filter-group, .paquete-page > .reveal, .steps > *, .steps__note, .back-link, .empty, .split > div:not(.framed, .mat), .legal-page {
  background: var(--lmc-cristal);
  -webkit-backdrop-filter: blur(var(--lmc-cristal-blur)); backdrop-filter: blur(var(--lmc-cristal-blur));
  border-radius: var(--lmc-cristal-radio);
  padding: var(--space-md);
}
.duo__card, .paquete { padding: var(--space-sm); }
.paquete__body { padding: var(--space-md); }
.paquete__salon { margin: 0; font-size: .9375rem; color: var(--lmc-texto); }
.back-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-md); }
/* formularios y lectura larga: cristal más lleno */
.legal, .form {
  background: var(--lmc-cristal-solido); border-radius: var(--lmc-cristal-radio); padding: var(--space-md);
  -webkit-backdrop-filter: blur(var(--lmc-cristal-blur)); backdrop-filter: blur(var(--lmc-cristal-blur));
}
h1 em, h2 em { color: var(--lmc-turquesa-hondo); }
.eyebrow, .service::before, .service__more, .filter-group__label { color: var(--lmc-texto); }
.text-soft, .hero__sub, .section-head p, .page-hero p { color: var(--lmc-texto-suave); }

/* ---------- Marco de nácar: imágenes ---------- */
.framed { border: var(--lmc-marco-ancho) solid transparent; border-image: var(--lmc-marco) 1; }
.framed::after { border: var(--hairline) solid transparent; border-image: var(--lmc-marco) 1; }
.mat { border-bottom: var(--lmc-marco-ancho) solid transparent; border-image: var(--lmc-marco) 1; }
.duo__card .duo__media { border: var(--lmc-marco-ancho) solid transparent; border-image: var(--lmc-marco) 1; }

/* ---------- Colores de las secciones (panel → Categorías → .tono-*): solo acentos ---------- */
.duo { gap: var(--space-xl); }
@media (max-width: 767px) { .duo { gap: var(--space-lg); } }
.duo__card[class*="tono-"] { color: var(--lmc-texto); }
.duo__card[class*="tono-"] :is(h3, p, .eyebrow) { color: var(--lmc-texto); }
.duo__card[class*="tono-"] h3 em { color: var(--tono-enfasis); }
.duo__card[class*="tono-"] .eyebrow::before { background: var(--tono-acento); }
.duo__card[class*="tono-"] .btn--outline { border-color: var(--tono-acento); color: var(--lmc-texto); }
.duo__card[class*="tono-"] .btn--outline:hover { background: var(--tono-enfasis); border-color: var(--tono-enfasis); color: var(--lmc-sobre-turquesa); }

.tag[class*="tono-"] { background: var(--lmc-marfil); color: var(--lmc-texto); border-color: var(--tono-acento); }
.filters button { background: var(--lmc-marfil); }
.filters button[aria-pressed="true"][class*="tono-"] { background: var(--lmc-marfil); border-color: var(--tono-acento); box-shadow: inset 0 0 0 1px var(--tono-acento); color: var(--lmc-texto); }

/* ---------- Aparición suave al hacer scroll (sin «reducir movimiento») ---------- */
.reveal { transform: translateY(var(--lmc-revelar-distancia)); transition: opacity var(--lmc-revelar-tiempo) var(--ease), transform var(--lmc-revelar-tiempo) var(--ease); }
.reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}