/* ==========================================================================
   Raffty Spa — hoja de la segunda división.

   Se carga DESPUÉS de app.css y solo en las páginas de /spa. Por eso aquí no
   hay reset, ni tipografía base, ni .contenedor, ni .btn: todo eso ya existe y
   repetirlo sería mantener dos copias de lo mismo.

   La paleta es la de la casa (verde + crema) con un acento de arena que separa
   visualmente al spa de los libros sin salirse de la marca.
   ========================================================================== */

:root {
    --arena:      #C9A87C;
    --arena-osc:  #A8875C;
    --whatsapp:   #25D366;
    --whatsapp-osc: #1DA851;
    --gris:       #6B6B6B;
    --alerta-bg:  #FFF6E8;
    --alerta-bd:  #E0B978;
}

/* En el spa el fondo base es blanco y las secciones crema van alternando.
   En los libros es al revés; por eso se fija aquí y no en app.css. */
.pagina-spa { background: var(--blanco); }

.seccion--crema { background: var(--crema); }

.contenedor--angosto { width: min(100% - var(--canal) * 2, 760px); margin-inline: auto; }

.seccion__entrada {
    max-width: 65ch;
    margin: -1.5rem auto clamp(2rem, 1rem + 3vw, 3rem);
    text-align: center;
    color: var(--gris);
}

.seccion__pie { margin-top: clamp(2rem, 1rem + 3vw, 3rem); text-align: center; }

/* --------------------------------------------------------------- Botones */
.btn--whatsapp { background: var(--whatsapp-osc); }
.btn--whatsapp:hover { background: #17864099; background: #178640; }

/* .btn--ghost está pensado para fondos oscuros: su color es blanco.
   Sobre crema hace falta la variante oscura. */
.btn--oscuro { color: var(--verde-osc); border-color: var(--verde-osc); }
.btn--oscuro:hover { background: rgb(91 134 133 / .1); }

/* --------------------------------------------------------------- Cabecera */
.cabecera--spa { background: var(--blanco); }

.cabecera__logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }

/* Logotipo escrito mientras no exista un PNG oscuro corregido. Ver la nota de
   spa/partials/header.php. */
.cabecera__marca {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--negro);
}

.cabecera__division {
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--arena);
    color: var(--blanco);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.spa-nav { display: none; gap: 1.5rem; }

/* El menú completo solo cabe a partir de tablet. En móvil quedan el logo,
   el enlace a Libros y el botón de agendar, que es lo que convierte. */
@media (min-width: 62rem) {
    .spa-nav { display: flex; }
}

.spa-nav__enlace {
    color: var(--texto);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: .15rem;
}

.spa-nav__enlace:hover,
.spa-nav__enlace.es-actual { border-bottom-color: var(--arena); }

.spa-nav__cruce {
    color: var(--gris);
    font-size: .85rem;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.spa-nav__cruce:hover { color: var(--verde-osc); }

/* --------------------------------------------------------------- Hero */
.spa-hero {
    padding-block: clamp(4rem, 2rem + 9vw, 8rem);
    background: linear-gradient(160deg, var(--verde) 0%, var(--verde-osc) 100%);
    color: var(--blanco);
}

.spa-hero__interior { max-width: 46rem; }

.spa-hero__ubicacion {
    margin-bottom: 1rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--arena);
}

/* Escala propia y no --t-hero: el titular del spa es una frase larga y a la
   medida de los libros ocupaba cuatro renglones en escritorio. */
.spa-hero__titulo {
    font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4rem);
    color: var(--blanco);
}

.spa-hero__texto { margin-top: 1.5rem; max-width: 55ch; font-size: 1.1rem; }

.spa-hero__acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

.spa-hero__precio { margin-top: 1.5rem; font-size: .95rem; opacity: .9; }

/* Portada más sobria para las páginas internas: el hero de arriba compite con
   el H1 cuando la página es de lectura y no de entrada. */
.spa-portada {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    background: var(--crema);
    border-bottom: 1px solid var(--borde);
}

.spa-portada__titulo { font-size: var(--t-h2); }

.spa-portada__texto { margin-top: 1rem; max-width: 60ch; color: var(--gris); }

.spa-portada__lugar {
    margin-top: .75rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--verde-osc);
}

.spa-portada .btn { margin-top: 1.75rem; }

.ficha__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    margin-top: 1.5rem;
    align-items: baseline;
}

.ficha__precio { font-size: 1.75rem; font-weight: 800; color: var(--verde-osc); }
.ficha__duracion,
.ficha__lugar { color: var(--gris); font-size: .95rem; }

/* --------------------------------------------------------------- Migas */
.migas { display: flex; gap: .5rem; margin-bottom: 1rem; font-size: .85rem; color: var(--gris); }
.migas a { color: var(--gris); text-decoration: none; border-bottom: 1px solid currentColor; }
.migas a:hover { color: var(--verde-osc); }

/* --------------------------------------------------------------- Credenciales */
.credenciales {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.credencial { text-align: center; }

.credencial__cifra {
    display: block;
    font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--arena-osc);
}

.credencial__texto { display: block; margin-top: .75rem; color: var(--gris); }

.credenciales__nota {
    max-width: 60ch;
    margin: clamp(2rem, 1rem + 3vw, 3rem) auto 0;
    text-align: center;
}

/* --------------------------------------------------------------- Padecimientos */
.padecimientos,
.tratamientos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(1.25rem, .75rem + 2vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.padecimiento__enlace,
.tratamiento__enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.padecimiento__enlace:hover,
.tratamiento__enlace:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgb(14 14 14 / .1);
}

.padecimiento__img,
.tratamiento__img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radio);
    margin-bottom: 1.25rem;
}

.padecimiento__titulo,
.tratamiento__titulo { font-size: var(--t-h3); }

.padecimiento__texto,
.tratamiento__texto { margin-top: .75rem; color: var(--gris); font-size: .95rem; }

/* margin-top:auto empuja el pie de la tarjeta abajo, así todas las tarjetas de
   la fila alinean su última línea aunque el texto sea de distinto largo. */
.padecimiento__mas {
    margin-top: auto;
    padding-top: 1.25rem;
    font-weight: 600;
    color: var(--verde-osc);
}

.tratamiento__datos {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: auto;
    padding-top: 1.25rem;
}

.tratamiento__precio { font-size: 1.4rem; font-weight: 800; color: var(--verde-osc); }
.tratamiento__duracion { color: var(--gris); font-size: .9rem; }

/* --------------------------------------------------------------- Paquetes */
.paquetes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1.25rem, .75rem + 2vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.paquete {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2rem 1.5rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    text-align: center;
}

.paquete--destacado { border-color: var(--arena); border-width: 2px; }

.paquete__cinta {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .25rem .85rem;
    border-radius: 999px;
    background: var(--arena);
    color: var(--blanco);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.paquete__titulo { font-size: var(--t-h3); }
.paquete__total { font-size: 2.25rem; font-weight: 800; color: var(--verde-osc); line-height: 1.1; }
.paquete__unitario { color: var(--gris); font-size: .95rem; }

.paquete__ahorro {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    font-weight: 600;
    color: var(--arena-osc);
}

.paquete__pct {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--arena);
    color: var(--blanco);
    font-size: .8rem;
}

.paquete__nota { margin-top: .5rem; font-size: .85rem; color: var(--gris); }
.paquete .btn { margin-top: 1.25rem; }

/* --------------------------------------------------------------- Videos */
.videos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(1.25rem, .75rem + 2vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.video__disparador {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--negro);
    cursor: pointer;
}

.video__portada {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    opacity: .85;
    transition: opacity .2s ease, transform .3s ease;
}

.video__disparador:hover .video__portada { opacity: 1; transform: scale(1.03); }

.video__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--blanco);
}

.video__play svg {
    padding: .6rem;
    border-radius: 50%;
    background: rgb(14 14 14 / .55);
    backdrop-filter: blur(2px);
}

/* El iframe que spa.js inserta en lugar de la carátula. */
.video__marco { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radio); }

.video__titulo { margin-top: 1rem; font-size: var(--t-h3); }
.video__texto { margin-top: .5rem; color: var(--gris); font-size: .95rem; }

/* --------------------------------------------------------------- Testimonios */
.testimonio__pie { display: flex; align-items: center; gap: .85rem; margin-top: 1.25rem; }
.testimonio__detalle { display: block; font-size: .85rem; color: var(--gris); }

/* --------------------------------------------------------------- Prosa */
.prosa { max-width: 65ch; }
.prosa p + p { margin-top: 1.25rem; }

.ficha__subtitulo { margin-top: clamp(2rem, 1rem + 3vw, 3rem); font-size: var(--t-h3); }

.ficha__imagen {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radio);
    margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.lista-marcas { margin: 1.25rem 0 0; padding: 0; list-style: none; }

.lista-marcas li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .75rem;
}

.lista-marcas li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .7rem;
    height: .4rem;
    border-left: 2px solid var(--verde);
    border-bottom: 2px solid var(--verde);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------- Alerta */
.alerta {
    margin-top: clamp(2rem, 1rem + 3vw, 3rem);
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
    border: 1px solid var(--alerta-bd);
    border-left-width: 4px;
    border-radius: var(--radio);
    background: var(--alerta-bg);
}

.alerta__titulo { font-size: var(--t-h3); }
.alerta__entrada { margin-top: .75rem; color: var(--gris); }
/* En la caja de advertencia la palomita sobra: ahí la lista son señales para ir
   al médico, no beneficios, y una palomita verde dice lo contrario de lo que la
   sección quiere decir. Se sustituye por un punto neutro. */
.lista-marcas--alerta li::before {
    width: .45rem;
    height: .45rem;
    top: .65em;
    border: 0;
    border-radius: 50%;
    background: var(--alerta-bd);
    transform: none;
}

/* --------------------------------------------------------------- Sugerido */
.sugerido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.5rem, 1rem + 2vw, 2rem);
    border-radius: var(--radio);
    background: var(--blanco);
    border: 1px solid var(--borde);
}

.sugerido__titulo { font-size: var(--t-h3); }
.sugerido__texto { margin-top: .5rem; color: var(--gris); }
.sugerido__datos { margin-top: .75rem; font-weight: 600; color: var(--verde-osc); }

/* --------------------------------------------------------------- Puente */
.seccion--puente { background: var(--verde); color: var(--blanco); }
.seccion--puente .puente__titulo { color: var(--blanco); }

.puente { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 3rem); }
.puente__portada { width: clamp(7rem, 20vw, 10rem); border-radius: var(--radio); }
.puente__titulo { font-size: var(--t-h3); }
.puente__texto { margin-top: .75rem; max-width: 45ch; }
.puente .btn { margin-top: 1.25rem; }

/* --------------------------------------------------------------- Enlaces cruzados */
.enlaces-cruce {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.enlaces-cruce a {
    display: inline-block;
    padding: .6rem 1.15rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--crema);
    font-weight: 600;
    text-decoration: none;
}

.enlaces-cruce a:hover { border-color: var(--verde); color: var(--verde-osc); }

/* --------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--borde); }
.faq__item { border-bottom: 1px solid var(--borde); }

.faq__pregunta {
    padding: 1.15rem 2.5rem 1.15rem 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.faq__pregunta::-webkit-details-marker { display: none; }

.faq__pregunta::after {
    content: "+";
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--verde);
}

.faq__item[open] .faq__pregunta::after { content: "–"; }
.faq__respuesta { padding-bottom: 1.25rem; color: var(--gris); max-width: 65ch; }

/* --------------------------------------------------------------- Pasos */
.pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos .paso { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }

.pasos .paso__num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--verde);
    color: var(--blanco);
    font-weight: 800;
}

.pasos__nota {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--arena);
    background: var(--blanco);
    font-size: .95rem;
    color: var(--gris);
}

/* --------------------------------------------------------------- Formulario */
.agendar__intro { max-width: 55ch; margin: -1.5rem auto 2.5rem; text-align: center; color: var(--gris); }

.cita {
    display: grid;
    gap: 1.25rem;
    max-width: 46rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
}

@media (min-width: 48rem) {
    .cita--amplio { grid-template-columns: 1fr 1fr; }
    .cita--amplio .cita__campo--ancho,
    .cita--amplio .cita__acciones { grid-column: 1 / -1; }
}

.cita__campo { display: flex; flex-direction: column; gap: .4rem; }

.cita__campo label { font-weight: 600; font-size: .95rem; }
.cita__req { color: #B4413B; }
.cita__opcional { font-weight: 400; color: var(--gris); font-size: .85rem; }

.cita__campo input,
.cita__campo select,
.cita__campo textarea {
    padding: .8rem .9rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    width: 100%;
}

.cita__campo textarea { resize: vertical; min-height: 6rem; }

.cita__campo input:focus,
.cita__campo select:focus,
.cita__campo textarea:focus { border-color: var(--verde); }

/* El campo con error se marca en rojo además del texto: el color solo no
   sirve para quien no lo distingue, por eso va con el mensaje debajo. */
.cita__campo input[aria-invalid="true"],
.cita__campo select[aria-invalid="true"] { border-color: #B4413B; }

.cita__error { color: #B4413B; font-size: .85rem; }

.cita__acciones { display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.cita__acciones .btn { width: 100%; }

@media (min-width: 30rem) {
    .cita__acciones .btn { width: auto; min-width: 18rem; }
}

.cita__aviso { text-align: center; font-weight: 600; }
.cita__aviso:empty { display: none; }
.cita__aviso[data-estado="ok"] { color: var(--verde-osc); }
.cita__aviso[data-estado="error"] { color: #B4413B; }

.cita__letra-chica { font-size: .8rem; color: var(--gris); text-align: center; max-width: 42ch; }

.btn:disabled { opacity: .6; cursor: progress; }

/* --------------------------------------------------------------- Pie */
.pie--spa .pie__interior { align-items: flex-start; }
.pie__horarios { margin: 0; padding: 0; list-style: none; }
.pie__horarios li { margin-bottom: .35rem; }
.pie__nota { margin-top: .85rem; font-size: .85rem; opacity: .8; }
.pie__mapa { display: inline-block; margin-top: .35rem; }

/* .pie__cruce vive en app.css: lo usan el pie del spa y el de los libros. */

/* --------------------------------------------------------------- WhatsApp flotante */
.wa-flotante {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.15rem;
    border-radius: 999px;
    background: var(--whatsapp);
    color: #06331A;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgb(14 14 14 / .25);
    transition: transform .2s ease;
}

.wa-flotante:hover { transform: translateY(-2px); }

/* En móvil solo el ícono: el texto tapaba contenido en pantallas angostas. */
.wa-flotante__texto { display: none; }

@media (min-width: 30rem) {
    .wa-flotante__texto { display: inline; }
}