/* ==========================================================================
   ELENA HAIRLOVER — Web pública — pantallas y remates finales
   Reunido el 2026-09-21 a partir de: responsivo.css, utility.css, typography-transitions.css, reset-base.css, transitions-layout.css
   ========================================================================== */

/* ─── RESPONSIVO ────────────────────────────────────────── */
@media (max-width: 992px) {
  :root {
    --space-section: var(--space-section-mob);
  }

  .contacto__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .services-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .header__menu-btn {
    display: flex;
  }

  .hero__arrow {
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }

  .hero__arrow--prev {
    left: 8px;
  }

  .hero__arrow--next {
    right: 8px;
  }

  .header__inner {
    padding: 0 20px;
    height: 76px;
  }

  .servicios__tabs-content {
    padding: 24px;
  }

  /* (La ficha en columna del móvil se quitó el 2026-10-01: css/carta.css.) */

  .service-item__btn {
    margin: 8px auto 0 auto !important;
    align-self: center !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: 180px !important;
    text-align: center !important;
  }
}

/* ─── ACCESIBILIDAD (A11Y) ──────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 3px;
  transition: outline-offset 0.15s ease-out;
}

/* ==========================================================================
   ELENA HAIRLOVER LUXURY METALLIC GOLD GRADIENT SYSTEM
   Matching the Elena Hairlover Emblem Metallic Gold Palette
   ========================================================================== */

:root {
  --gold-grad-primary: linear-gradient(135deg, #F3D798 0%, #C9A84C 50%, #9A782B 100%);
  --gold-grad-hover: linear-gradient(135deg, #F7E0AA 0%, #DBB95D 50%, #AD8A38 100%);
  --gold-grad-text: linear-gradient(135deg, #F7E0AA 0%, #C9A84C 50%, #E2BE6E 100%);
  --gold-grad-border: linear-gradient(135deg, #F3D798, #C9A84C, #9A782B);
}

/* 1. Primary Gold Gradient Buttons */
#hero-cta,
.service-item__btn,
a[href*="gettimely.com"].bg-gold-warm {
  background: var(--res-relleno, var(--gold-grad-primary)) !important;
  color: var(--res-letra, #111111) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#hero-cta:hover,
.service-item__btn:hover,
a[href*="gettimely.com"].bg-gold-warm:hover {
  background: var(--res-relleno-hover, var(--gold-grad-hover)) !important;
  color: var(--res-letra, #000000) !important;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.65) !important;
  transform: translateY(-2px) !important;
}

/* 2. Service Item Buttons Specific Styling */
.service-item__btn {
  padding: 7px 18px !important;
  border-radius: 4px !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (min-width: 769px) {
  .service-item__btn {
    margin-left: 12px !important;
  }
}

@media (max-width: 768px) {
  .service-item__btn {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    align-self: center !important;
    width: auto !important;
    min-width: 150px !important;
    max-width: 180px !important;
  }
}

/* 3. Ghost / Outline Buttons with Metallic Gold Border */
#hero-explore-btn {
  border: 1.5px solid transparent !important;
  background-image: linear-gradient(#111, #111), var(--gold-grad-border) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  color: var(--color-gold-text) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

#hero-explore-btn:hover {
  background: var(--gold-grad-primary) !important;
  color: #111111 !important;
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.45) !important;
}

/* 4. Section Headings & Key Accent Text with Metallic Gold Gradient Text Fill */
.contacto__horario-card h4 {
  background: var(--gold-grad-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 5. Floating Action Buttons (WhatsApp, Instagram, Phone) */
.floating-actions__btn {
  background: var(--gold-grad-primary) !important;
  /* El icono, con la letra «sobre el acento» de cada tema (2026-10-07): con
     #111 escrito a mano, en Avellana, Perla y Salvia (acento oscuro) se
     quedaba en 2,3:1. */
  color: var(--color-on-gold, #111111) !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

.floating-actions__btn:hover {
  background: var(--gold-grad-hover) !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(201, 168, 76, 0.65) !important;
}

.floating-actions__btn svg {
  fill: var(--color-on-gold, #111111) !important;
}

/* 6. Section Badges, Pills & Active Language Buttons */

/* Idioma elegido: el mismo ámbar de los botones "Reservar", no el dorado
   pálido de las insignias. Se veía demasiado parecido al idioma sin elegir. */
.lang-switch__btn.is-active {
  color: var(--color-gold-text) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* 7. Decorative Gold Lines & Dots */

.testimonio__card:hover {
  transform: translateY(-5px);
  border-color: var(--color-gold-warm) !important;
}


/* Aquí había dos trozos sueltos de un bloque `:root { }` que alguien partió
   entre varios archivos: se quedaron sin su apertura y con su `}` de cierre.
   Nunca funcionaron —ninguna de esas variables llegó a existir— y además ese
   `}` de más cortaba el archivo: el navegador descartaba TODO lo que viniera
   después. Sus variables están ahora donde deben, en css/base.css. */


/* ─── RESET & BASE ─────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-dark-bg);
  color: var(--color-text-light);
  font-family: var(--font-body);
  line-height: 1.8;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}



/* ══════════════════════════════════════════════════════════════
   PANTALLAS PEQUEÑAS — arreglos del 2026-09-21
   ══════════════════════════════════════════════════════════════
   Salieron de medir las cuatro páginas a 375, 768, 1024 y 1440 px
   con el navegador, no a ojo. */

@media (max-width: 768px) {

  /* La portada se podía ARRASTRAR DE LADO 5 píxeles.
     El culpable: los nombres de los servicios llevan `white-space: nowrap`
     para que en el ordenador salgan en una línea, con los puntitos hasta el
     precio ("Balayage ..... € 120"). En el móvil la ficha pasa a columna y
     los puntitos se esconden, pero el nowrap seguía puesto: un nombre largo
     como "Peinado de extensiones - Rizado, ondas o GHD" medía 385 px dentro
     de una pantalla de 375 y empujaba la página entera. */
  .service-item__name {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  
}

/* ══════════════════════════════════════════════════════════════
   ZONAS DE PULSAR — pantallas que se manejan con el dedo
   ══════════════════════════════════════════════════════════════
   `pointer: coarse` quiere decir "esto se maneja con el dedo": móvil o
   tablet, del tamaño que sea. Es más exacto que mirar el ancho, porque una
   tablet de 1024 px también se toca y un portátil de 1024 px no.
   Se deja el ancho como red de seguridad para navegadores viejos. */
@media (pointer: coarse), (max-width: 768px) {
  /* ── Zonas de pulsar ──────────────────────────────────────────
     Un dedo necesita unos 44x44 px. Por debajo de eso se falla el
     clic y se acaba pulsando lo de al lado. Medido: el botón del
     menú tenía 42x32, el de idioma 41x32, los enlaces del menú 26 px
     de alto y los puntos del carrusel 8x8.

     Se agranda la ZONA SENSIBLE, no el dibujo: lo que se ve sigue
     igual, solo que acepta el dedo con más margen. */

  /* Botón del menú (las tres rayas) */
  #menu-btn {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* ES / EN */
  .lang-switch__btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Enlaces del menú desplegable */
  .header__mobile-nav > a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 16px;
  }

  /* Puntos del carrusel: el punto sigue midiendo 8 px, pero se le pone
     un borde transparente alrededor que también recoge el toque. */
  .hero__dot,
  .hero__dot.is-active {
    border: 18px solid transparent;
    background-clip: padding-box;
    box-sizing: content-box;
    margin: -18px;
  }

  /* Botón "Reservar cita" de cada servicio */
  .service-item__btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Teléfono y correo del pie: se tocan para llamar o escribir */
  #public-info-phone,
  #public-info-email,
  #contacto-telefono,
  #contacto-email {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* "Volver" de la página de privacidad. Los enlaces que van DENTRO de un
     párrafo (el correo, el teléfono, el enlace al organismo de protección
     de datos) se dejan como están: agrandarlos descuadraría el texto, y
     las normas de accesibilidad los eximen justamente por eso. */
  .cabecera__volver {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Enlaces del final del pie */
  .footer-modern__privacidad,
  .footer-modern__scroll-top {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── TABLET (769–1023 px) ─────────────────────────────────────
   Hasta hoy el proyecto solo distinguía "móvil" y "ordenador": a 768 px
   saltaba de golpe de una cosa a la otra. En una tablet, la carta de
   precios salía con la misma maqueta apretada del ordenador.
   Desde el 2026-09-24 la carta de esta franja usa la ficha compacta del
   móvil (css/web.css), así que aquí solo quedan los márgenes y la galería. */
@media (min-width: 769px) and (max-width: 1023px) {

  /* Menos aire lateral: en una tablet, 120 px de margen a cada lado se
     comen un tercio de la pantalla. */
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }

}

/* ── ORDENADOR (desde 1024 px) ── la fila de una línea con la duración y el
   precio de ancho fijo (72 y 84 px) se quitó el 2026-10-01: ahora la carta
   va en tarjetas a dos columnas (css/carta.css). */

/* Los iconos de redes del pie miden 20 px: se ven bien, pero son difíciles
   de acertar con el dedo. El dibujo no cambia; lo que crece es la zona que
   recoge el toque. Va fuera de cualquier @media porque tampoco estorba en
   el ordenador, y con `.footer-modern__socials a` porque footer-modern.css
   se carga después de este archivo. */
.footer-modern__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}