/* Esteve Estudio — hoja de estilo
Colores y tipografías tomados de la web actual (julio 2026) */
:root{
--texto:#333;
--titulos:#3b3b3b;
--boton:#373737;
--boton-borde:#2a2a2a;
--fondo:#fff;
--suave:#f7f7f7;
--medio:#efefef;
--linea:#e2e2e2;
--apagado:#767676;
--tipo-titulo:Fredoka,sans-serif;
--tipo-cuerpo:'Open Sans',system-ui,sans-serif;
--ancho:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Tipografía tomada de la web actual, con una salvedad:
cuerpo Open Sans 400 · 18px · interlineado 1.75 · espaciado entre letras .02em
títulos Fredoka 500 · espaciado .04em · versalitas
botones Fredoka 700 · espaciado .06em
La web vieja llevaba .12em tambien en el cuerpo (2,2px entre letra y letra a
18px). Lo caza David el 28-08-2026: «las letras estan muy separadas». El
espaciado ancho es para microtipografia en VERSALITAS —rotulos, botones,
epigrafes—, donde las mayusculas se pegan y hay que abrirlas; en un parrafo
en minusculas rompe la palabra y obliga a releer. Asi que el cuerpo y todo lo
que no va en mayusculas baja a .02em, y los rotulos en versalitas se quedan
como estaban.
Segunda pasada el mismo dia: David sigue viendo las letras separadas con el
cuerpo ya en .02em. Lo unico ancho que quedaba en pantalla eran las
VERSALITAS, asi que se les baja el espaciado a la mitad (.08->.04 en titulos,
.12->.06 en botones, .16->.08 en el rotulo mas abierto). A la mitad y no a
cero: en mayusculas las letras se tocan y hay que dejarles algo de aire, pero
el aire de la web vieja era el de un rotulo impreso, no el de una pantalla. */
body{
margin:0;
font-family:var(--tipo-cuerpo);
font-size:18px;
font-weight:400;
line-height:1.75;
letter-spacing:.02em;
color:var(--texto);
background:var(--fondo);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{
font-family:var(--tipo-titulo);
color:var(--titulos);
font-weight:500;
letter-spacing:.04em;
text-transform:uppercase;
line-height:1.5;
margin:0 0 .6em;
}
h1{font-size:clamp(1.7rem,3.6vw,2.3rem)}
h2{font-size:clamp(1.35rem,2.7vw,2.31rem)}
h3{font-size:1.05rem}
p{margin:0 0 1.3em}
strong{font-weight:600;color:var(--titulos)}
.entradilla{font-weight:300;font-size:1.2rem;line-height:1.7}
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}
.contenedor.estrecho{max-width:820px}
.centrado{text-align:center}
/* Para que un nombre con guion no se parta al final de linea y parezca una
division silabica: «zona HEALTH-BEAUTY» salia como «HEALTH-» / «BEAUTY». */
.sin-partir{white-space:nowrap}
.seccion{padding:64px 0}
.seccion-suave{background:var(--suave)}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:12px;top:12px;background:#fff;padding:10px 16px;z-index:99}
/* ---------- botones ---------- */
.btn{
display:inline-block;
font-family:var(--tipo-titulo);
font-weight:700;
font-size:.9rem;
letter-spacing:.06em;
text-transform:uppercase;
text-decoration:none;
/* Sin relleno negro: el bloque de color ensuciaba las secciones claras.
El boton se sostiene con el filete y se rellena al pasar por encima. */
color:var(--titulos);
background:transparent;
border:1px solid var(--titulos);
border-radius:8px;
padding:13px 30px;
transition:background .2s,color .2s,border-color .2s;
}
/* Al pasar por encima se rellena con el dorado de la casa y letra oscura, no
con negro: el bloque negro daba un golpe seco en paginas claras. */
.btn:hover,.btn:focus-visible{background:#c7a15a;border-color:#c7a15a;color:#2b2b2b}
/* Secundario: SOLO se separa del primario, ya no se apaga.
Antes llevaba color:var(--apagado) y border-color:var(--linea) (#e2e2e2), que
sobre blanco da 1,30:1 de contraste — el borde no se veia y el boton parecia
roto (lo caza David el 20-08-2026 en «Ver los servicios» de /estudio/).
Y esta clase la comparte el «Rechazar» del aviso de cookies: rechazar casi sin
borde al lado de un «Aceptar» con filete oscuro es un patron oscuro de manual,
justo lo que senala la AEPD. Rechazar tiene que ser tan visible como aceptar.
Hereda de .btn el borde #3b3b3b (11,20:1) y el hover dorado, asi que aqui solo
queda la separacion. */
.btn-linea{margin-left:10px}
.btn-claro{background:rgba(255,255,255,.92);color:var(--titulos);border-color:#fff}
.btn-claro:hover{background:#fff;border-color:#fff;color:#000}
/* ---------- franja de aviso puntual ---------- */
/* Arriba del todo y por encima de la cabecera pegajosa: se lee al entrar, no
tapa nada y se va al cerrarla.
Dorado de la casa (el de las facturas) y no gris: en una web en blanco y
negro es el unico color que hay, asi que la vista va sola. Y en tipo de
titulo, gruesa y en versalitas, como los botones — con la letra fina del
cuerpo la franja se leia como parte del decorado. */
.franja{background:#c7a15a;color:#2b2b2b}
.franja-fila{
position:relative;
display:flex;align-items:center;gap:16px;
padding-top:13px;padding-bottom:13px;padding-right:44px;
}
/* Los avisos se turnan en el mismo sitio. Van apilados uno encima de otro con
grid —no absolutos— para que la franja mida lo que el mas largo y no pegue un
salto al cambiar de mensaje. */
.franja-textos{flex:1;display:grid}
.franja-aviso{
grid-area:1/1;margin:0;
font-family:var(--tipo-titulo);font-weight:700;
font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;
line-height:1.45;text-align:center;
opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s;
}
.franja-aviso.activa{opacity:1;visibility:visible}
.franja a{color:#2b2b2b;text-decoration:underline;text-underline-offset:3px}
.franja a:hover{color:#000}
/* La aspa va suelta a la derecha para que el texto quede centrado de verdad y
no descolocado por el hueco del boton. */
.franja-cerrar{
position:absolute;right:0;top:50%;transform:translateY(-50%);
width:34px;height:34px;padding:0;
background:none;border:0;cursor:pointer;
color:#5c4820;font-size:1.5rem;line-height:1;
}
.franja-cerrar:hover{color:#000}
/* ---------- cabecera ---------- */
.cabecera{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.97);
border-bottom:1px solid var(--linea);
backdrop-filter:saturate(180%) blur(6px);
}
.cabecera-fila{
display:flex;align-items:center;gap:20px;
min-height:74px;
}
.logo{flex:none}
.logo img{width:150px;height:auto}
.menu{flex:1;min-width:0}
.menu ul{list-style:none;margin:0;padding:0}
.menu > ul{display:flex;gap:6px;justify-content:center}
.menu a{
font-family:var(--tipo-titulo);
font-weight:500;
font-size:1.125rem;
letter-spacing:.04em;
text-transform:uppercase;
text-decoration:none;
color:var(--titulos);
/* Al agrupar los tres mundos en «Servicios» sobra sitio en la fila, asi que
el menu vuelve a respirar: 16px a los lados (la web actual usa 15) mas 6 de
separacion entre apartados. Medido a 1281px, el ancho mas justo en el que
todavia se ve el menu entero: siguen quedando 79px de margen. */
padding:10px 16px;
display:block;
white-space:nowrap;
transition:background .15s;
}
.menu a:hover,.menu a:focus-visible,.menu a[aria-current]{background:#eee;color:#000}
.menu .con-hijos > a::after{content:'\25B8';margin-left:7px;font-size:.8em;opacity:.75}
.menu .con-hijos{position:relative}
.submenu{
display:none;position:absolute;top:100%;left:0;
background:#fff;
border:1px solid rgba(0,0,0,.15);
box-shadow:0 6px 12px rgba(0,0,0,.176);
padding:5px 0;
min-width:190px;
flex-direction:column;
}
.con-hijos:hover .submenu,.con-hijos:focus-within .submenu{display:flex}
.con-hijos:hover > a{background:#eee;color:#000}
.submenu a{padding:10px 15px;font-size:1.125rem}
.submenu a:hover{background:#eee}
/* Panel de Servicios: tres columnas, una por mundo. Va centrado bajo su
apartado y no pegado a la izquierda, que con tres columnas se saldria de la
pantalla por la derecha. */
.megamenu{
flex-direction:row;gap:34px;
left:50%;transform:translateX(-50%);
padding:26px 30px 22px;min-width:0;
}
.megamenu-col{min-width:186px}
.megamenu-titulo{
display:block;padding:0 0 9px;font-size:1.125rem;
border-bottom:1px solid var(--linea);margin-bottom:7px;
}
.megamenu-titulo:hover{background:none;color:#000;border-bottom-color:var(--titulos)}
.megamenu ul{list-style:none;margin:0;padding:0}
.megamenu li a{
padding:7px 6px;font-size:.98rem;letter-spacing:.02em;
text-transform:none;color:var(--apagado);
}
.megamenu li a:hover{color:#000}
.cabecera-cita{flex:none;padding:10px 20px;font-size:.95rem}
.menu-boton{
display:none;margin-left:auto;
width:44px;height:38px;background:none;border:0;cursor:pointer;
flex-direction:column;justify-content:center;gap:5px;
}
.menu-boton span{display:block;height:2px;background:var(--titulos)}
/* ---------- portada ---------- */
.portada{position:relative;background:#000}
.portada-fotos{position:relative;aspect-ratio:1800/700;max-height:78vh;overflow:hidden}
/* Portada limpia (22-08, David): una foto grande con el eslogan encima. El
titular se apoya abajo, no en el centro, para que la foto respire y para que
el borde de las tarjetas asome por debajo del pliegue: si la imagen ocupa la
pantalla entera y no asoma nada, mucha gente no baja. */
.portada-limpia{position:relative}
/* Menu DENTRO de la foto, solo en la portada (David, 22-08: «puedes integrar el
menu dentro de la imagen para que quede visualmente mejor? luego en el resto
de la web como esta ahora»).
Como la cabecera es sticky y ocupa sitio en el flujo, la foto sube justo su
alto y la cabecera queda encima; en el resto de paginas no se toca nada.
Al bajar del hero, el JS le pone .solida y vuelve a ser la barra blanca de
siempre: sin eso, el menu blanco quedaria sobre fondo blanco. */
body.pag .portada-limpia{margin-top:-75px}
body.pag .cabecera{transition:background-color .25s ease,border-color .25s ease}
body.pag .cabecera:not(.solida){
background:transparent;border-bottom-color:transparent;backdrop-filter:none;
}
/* El logo es oscuro: invertido queda blanco sin necesidad de un segundo archivo. */
body.pag .cabecera:not(.solida) .logo img{filter:brightness(0) invert(1)}
body.pag .cabecera:not(.solida) .menu > ul > li > a{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45)}
body.pag .cabecera:not(.solida) .cabecera-cita{color:#fff;border-color:rgba(255,255,255,.9);text-shadow:none}
body.pag .cabecera:not(.solida) .cabecera-cita:hover{background:#c7a15a;border-color:#c7a15a;color:#2b2b2b}
body.pag .cabecera:not(.solida) .menu-boton span{background:#fff}
/* «Inicio» lleva fondo gris claro por ser la pagina actual (.menu a[aria-current]),
y sobre la foto quedaba un recuadro blanquecino en mitad del menu. Sobre la
imagen se marca con una linea debajo, que no mancha. El hover si mantiene el
fondo, porque ahi el recuadro es la respuesta al raton. */
body.pag .cabecera:not(.solida) .menu > ul > li > a[aria-current]{
background:transparent;color:#fff;box-shadow:inset 0 -2px 0 rgba(255,255,255,.9);
}
body.pag .cabecera:not(.solida) .menu > ul > li > a:hover,
body.pag .cabecera:not(.solida) .menu > ul > li > a:focus-visible{
background:rgba(255,255,255,.16);color:#fff;
}
body.pag .cabecera:not(.solida) .cabecera-compra{color:#fff}
/* Velo de arriba: el menu blanco tiene que leerse aunque la foto sea clara por
esa esquina. Es corto y muy suave, la foto no se apaga. */
body.pag .portada-limpia::before{
content:"";position:absolute;left:0;right:0;top:0;height:190px;z-index:1;pointer-events:none;
background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,0) 100%);
}
.portada-titular{
position:absolute;left:0;right:0;bottom:0;padding:0 0 clamp(26px,4vh,54px);
/* Velo solo en la franja de abajo, donde cae el texto: el resto de la foto se
ve igual. Mismo recurso que las tarjetas y las cabeceras de pagina. */
background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.18) 78%,rgba(0,0,0,0) 100%);
}
.portada-limpia .eslogan{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45);margin-bottom:.15em}
.portada-limpia .rombos{color:#fff;opacity:.85}
/* La seccion de las tarjetas ya no lleva el titular, asi que no necesita el
espacio de arriba que le daba sitio. */
.seccion-tarjetas{padding-top:clamp(28px,4vh,52px)}
.portada-foto{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;opacity:0;transition:opacity 1.2s ease;
}
.portada-foto.activa{opacity:1}
.portada-texto{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
text-align:center;
background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.5));
}
.portada-texto h1{color:#fff;max-width:1000px;margin:0 auto .9em;text-shadow:0 2px 18px rgba(0,0,0,.5)}
/* ---------- eslóganes ---------- */
.eslogan{text-align:center;max-width:1160px;margin:0 auto .3em}
/* La banda gris de belleza y bienestar, cuando lleva titular, necesita su aire
arriba: `.seccion-entradilla + .seccion` se lo pone a 0 —pensado para cuando
debajo van tarjetas y la frase ya trae su propio hueco— y el titular se
quedaba pegado al borde del gris. Tres clases para ganarle sin depender del
orden del archivo. Mismo valor que usa peluqueria. */
.seccion.seccion-suave.seccion-titular{padding-top:clamp(20px,2.2vw,28px)}
/* 24-08 (David: «veo todo muy separado en las 3 paginas»): los rombos metian
44 px fijos entre el titular y las tarjetas en TODA la web, sin escalar con la
pantalla. Bajan a 28 y encogen en el movil. */
.rombos{text-align:center;color:var(--apagado);letter-spacing:.6em;margin-bottom:clamp(20px,2.2vw,28px);font-size:.7rem}
/* ---------- rejilla de servicios ---------- */
.rejilla{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}
/* Estas tarjetas (Belleza, Bienestar, Servicios y el mosaico de la portada)
copian el aspecto de las de /peluqueria/ — David, 20-08-2026: «con las
tarjetas de los servicios de belleza haz lo mismo que con la de los servicios
de peluqueria». SOLO el aspecto: siguen siendo enlaces y un clic lleva
directo a la pagina del servicio. No giran, porque a diferencia de las de
peluqueria estas SI tienen pagina propia detras y el texto vive alli. */
.bloque{
position:relative;display:block;overflow:hidden;text-decoration:none;background:#111;
aspect-ratio:1;
border-radius:8px;
}
.bloque-grande{grid-column:span 2;grid-row:span 2}
/* Portada (21-08): 6 tarjetas iguales en 3 columnas, no el mosaico de 13. Los
tres mundos miden lo mismo a proposito —el eslogan dice «el pelo, la piel y
hasta lo que comes», asi que ninguno puede mandar sobre los otros— y la
segunda fila es lo que puede hacer quien entra: leer, regalar, comprar. */
.rejilla-portada{grid-template-columns:repeat(3,1fr)}
/* Los tres accesos a las areas, encima del mosaico de /servicios/ (22-08).
Van con color y no en blanco (David: «ponlas mas bonitas, con color»), pero
SIN foto: el mosaico de abajo ya son 18 fotos y tres mas encima seria mas de
lo mismo. El color y el icono las separan de la rejilla en vez de repetirla.
Cada area lleva su tono dentro de la paleta de la casa —oscuro, dorado y
crema— y el numero de servicios va en grande a la derecha, donde antes solo
ponia «6 servicios» en letra pequena. */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 34px}
.area{
position:relative;display:flex;align-items:center;gap:14px;
padding:18px 20px;border-radius:10px;text-decoration:none;color:#fff;
overflow:hidden;isolation:isolate;
transition:transform .22s ease,box-shadow .22s ease;
}
.area::after{ /* filete interior, que da el acabado sin ensuciar el degradado */
content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
border:1px solid rgba(255,255,255,.22);
}
.area:hover,.area:focus-visible{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(43,43,43,.55)}
.area-tijeras{background:linear-gradient(135deg,#2f2b28 0%,#433a31 100%)}
.area-gota{background:linear-gradient(135deg,#b8935a 0%,#d5b57e 100%);color:#2b2b2b}
/* Oscurecido: con #6d6a58/#8d8a72 el nombre en blanco daba 4,33:1 y el
minimo son 4,5 (18,4 px en redonda no cuenta como texto grande). */
.area-hoja{background:linear-gradient(135deg,#575444 0%,#75725f 100%)}
.area-icono{flex:none;width:40px;height:40px;display:grid;place-items:center;
border-radius:50%;background:rgba(255,255,255,.14)}
.area-gota .area-icono{background:rgba(43,43,43,.12)}
/* Sobre el dorado, la linea de servicios al 82% se quedaba en 3,11:1 y es
texto de 12 px: necesita 4,5. Sin transparencia sube a 5,4. */
.area-gota .area-muestra{opacity:1;color:#332f26}
.area-icono svg{width:22px;height:22px}
.area-texto{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.area-nombre{font-family:var(--tipo-titulo);font-size:1.15rem;letter-spacing:.02em;line-height:1.15}
.area-muestra{font-style:normal;font-size:.76rem;letter-spacing:.02em;opacity:.82;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* El numero es informacion (cuantos servicios hay), no adorno, asi que tiene
que leerse: al 55% daba 1,87:1 sobre el dorado. Al 70% en las oscuras y sin
transparencia sobre el dorado, pasa de 4,5 en las tres. */
.area-cuenta{
flex:none;font-family:var(--tipo-titulo);font-size:1.5rem;line-height:1;
opacity:.7;font-variant-numeric:tabular-nums;
}
.area-gota .area-cuenta{opacity:1;color:#332f26}
@media (max-width:900px){.areas{grid-template-columns:1fr;gap:12px}}
.bloque img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,opacity .3s}
.bloque:hover img{transform:scale(1.06);opacity:.82}
/* Las cabeceras generadas con IA (22-08) estan compuestas con la mitad
izquierda VACIA a proposito, que es donde cae el titulo de la pagina. Al
reutilizarlas como miniatura —de 3:1 a un cuadrado— el recorte centrado
ensenaba justo esa mitad vacia: David, «no se ve la imagen porque queda en
un lado medio oculta». Se desplaza el encuadre a la derecha, donde esta el
motivo. Va por el nombre del archivo y no por una clase para que valga
tambien para las que queden por generar. */
:is(.bloque,.tarjeta-frente) img[src$="-cabecera.webp"]{object-position:88% center}
/* Estas dos son de cabina y llevan mucho negro alrededor del aparato, asi que
ademas de correr el encuadre hay que buscar el objeto —que no esta pegado al
borde derecho— y levantarles la luz. El brillo se toca SOLO en la miniatura:
en la cabecera la foto oscura es la que da el contraste del titulo. */
.bloque img[src$="indiba-cabecera.webp"]{object-position:62% center;filter:brightness(1.42) saturate(1.08)}
.bloque img[src$="depilacion-laser-cabecera.webp"]{object-position:70% center;filter:brightness(1.12)}
/* En estas dos el aparato esta en la mitad BAJA de la foto, asi que en la
tarjeta cae justo detras del rotulo — David, 22-08: «hay que subirla porque
esta un poco baja y se ve justo los manipulos». En Y no hay margen que mover
(la foto es 3:1 dentro de un cuadrado: se ve entera de arriba abajo, solo
sobra ancho), asi que se acerca el encuadre y se sube. El zoom va en una
variable para que el hover siga funcionando sin repetir el transform. */
.bloque img{transform:scale(var(--zoom,1)) translateY(var(--subir,0))}
.bloque:hover img{transform:scale(calc(var(--zoom,1) * 1.06)) translateY(var(--subir,0))}
.bloque img[src$="indiba-cabecera.webp"]{--zoom:1.32;--subir:-13%}
.bloque img[src$="depilacion-laser-cabecera.webp"]{--zoom:1.24;--subir:-14%}
.bloque-nombre{
position:absolute;left:0;right:0;bottom:0;
/* Mismos valores que .pag-peluqueria .tarjeta-frente, no parecidos: si se
tocan alli hay que tocarlos aqui. */
padding:24px 22px 16px;
font-family:var(--tipo-titulo);
/* 19,2px y peso 700. El tamano no es estetico: a partir de 18,66px en negrita
cuenta como texto grande y el minimo de contraste baja de 4,5:1 a 3:1, que
es lo que permite aclarar el degradado sin que deje de leerse. Antes eran
14,7px con peso 500 sobre un degradado de .62 — «TRATAMIENTOS CORPORALES»
sobre piel clara no habia quien lo leyera. */
font-size:1.2rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:#fff;text-align:left;
text-shadow:0 2px 14px rgba(0,0,0,.55);
/* En columna: si no, el «+ info» se pega AL LADO del titulo cuando este es
corto y cabe en la linea («Tratamientos faciales + INFO»). Con flex cada
uno va en su fila, como en las de peluqueria. */
display:flex;flex-direction:column;align-items:flex-start;
/* El degradado se aclara POR ENCIMA del texto: hasta el 82% mantiene cuerpo
(donde caen titulo y boton) y el desvanecido se gasta arriba, donde no hay
texto. Asi la parte oscura es corta y la foto se ve. */
background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.64) 58%,rgba(0,0,0,.46) 82%,rgba(0,0,0,0) 100%);
}
/* Adorno con forma de boton: el enlace es la tarjeta entera, asi que esto NO es
un control aparte (por eso va con aria-hidden en la plantilla). */
.bloque-mas{
display:inline-block;margin-top:10px;
font-family:var(--tipo-titulo);font-weight:700;font-size:.74rem;letter-spacing:.06em;
text-transform:uppercase;color:#fff;
border:1px solid rgba(255,255,255,.85);border-radius:8px;
padding:7px 15px;
transition:background .2s,color .2s,border-color .2s;
}
.bloque:hover .bloque-mas,.bloque:focus-visible .bloque-mas{
background:#c7a15a;border-color:#c7a15a;color:#2b2b2b;text-shadow:none;
}
.bloque-grande .bloque-nombre{font-size:1.5rem;padding:30px 26px 22px}
/* Doble de ancho pero de un solo alto: sin aspect-ratio, estira hasta la altura
que marcan los bloques cuadrados de su misma fila. */
.bloque-ancho{grid-column:span 2;aspect-ratio:auto}
/* Seis columnas y cada bloque ocupa dos, igual que .tarjetas: es lo que permite
centrar la fila coja. Hizo falta el 24-08, al quedarse bienestar en 5
servicios: la ultima fila tenia dos pegados a la izquierda y un hueco a la
derecha, mientras belleza (6) sale cuadrada. */
.rejilla-simple{grid-template-columns:repeat(6,1fr)}
.rejilla-simple > *{grid-column:span 2}
.rejilla-simple > *:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
.rejilla-simple > *:nth-child(3n+1):last-child{grid-column:3 / span 2}
.rejilla-simple .bloque{aspect-ratio:4/3}
/* ---------- vale regalo (tienda) ---------- */
.vale{
background:var(--suave);
border:1px solid var(--linea);
padding:40px 34px;
margin:44px 0 32px;
text-align:center;
}
.vale h2{margin-bottom:.5em}
.vale-texto{max-width:660px;margin:0 auto 34px}
.vale-form{max-width:720px;margin:0 auto;text-align:left}
.vale-form fieldset{border:0;padding:0;margin:0 0 32px}
.vale-form legend{
font-family:var(--tipo-titulo);font-weight:500;font-size:.95rem;
letter-spacing:.04em;text-transform:uppercase;color:var(--titulos);
padding:0;margin-bottom:16px;
}
/* El radio de verdad se esconde pero sigue existiendo: asi funciona con teclado
y con lector de pantalla, y el recuadro es solo su vestido. */
/* Solo los radios, NO cualquier input: «Otro importe» lleva dentro un campo de
número y con el selector abierto se quedaba a 0 px de ancho. */
.vale-opcion input[type=radio],
.vale-entrega input[type=radio],
.vale-camino input[type=radio]{position:absolute;opacity:0;width:0;height:0}
/* Paso 1: los dos caminos, servicio o importe */
.vale-caminos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.vale-camino span{
display:block;background:#fff;border:1px solid var(--linea);
padding:20px 22px;cursor:pointer;height:100%;transition:border-color .15s;
}
.vale-camino:hover span{border-color:var(--apagado)}
.vale-camino input:checked + span{border-color:var(--titulos);box-shadow:inset 0 0 0 1px var(--titulos)}
.vale-camino input:focus-visible + span{outline:2px solid var(--titulos);outline-offset:2px}
.vale-camino strong{
display:block;font-family:var(--tipo-titulo);font-weight:500;
font-size:1.05rem;letter-spacing:.02em;color:var(--titulos);
}
.vale-camino em{display:block;font-size:.85rem;color:var(--apagado);font-style:normal;margin-top:4px}
.vale-panel{margin-top:20px}
.vale-panel .pendiente{margin-top:14px}
.vale-opciones{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.vale-importe{
display:flex;align-items:center;justify-content:center;
font-family:var(--tipo-titulo);font-weight:500;
font-size:1.25rem;letter-spacing:.02em;
color:var(--titulos);background:#fff;
border:1px solid var(--linea);
padding:18px 24px;min-width:112px;min-height:62px;cursor:pointer;
transition:border-color .15s;
}
.vale-otro{font-size:.95rem;color:var(--apagado)}
/* Ancho fijo para que no baile: el rotulo «Otro importe» ocupa mas que un
numero, y sin esto el hueco encoge en cuanto empiezas a escribir. */
.vale-opcion-otro .vale-importe{width:168px;padding-left:12px;padding-right:12px}
/* «Otro importe» es el mismo recuadro: al elegirlo, el rotulo se va y en su
sitio aparece el hueco donde escribir, sin caja aparte ni saltos de tamaño. */
.vale-otro-num{
width:100%;border:0;background:none;padding:0;text-align:center;
font-family:var(--tipo-titulo);font-weight:500;
font-size:1.25rem;letter-spacing:.02em;color:var(--titulos);
-moz-appearance:textfield;
}
.vale-otro-num::-webkit-outer-spin-button,
.vale-otro-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vale-otro-num:focus{outline:none}
.vale-otro-num::placeholder{color:var(--apagado);font-size:1rem}
.vale-opcion:hover .vale-importe{border-color:var(--apagado)}
.vale-opcion input:checked + .vale-importe,
.vale-entrega input:checked + span{border-color:var(--titulos);box-shadow:inset 0 0 0 1px var(--titulos)}
.vale-opcion input:focus-visible + .vale-importe,
.vale-entrega input:focus-visible + span{outline:2px solid var(--titulos);outline-offset:2px}
.vale-alternativa{font-size:.9rem;color:var(--apagado);margin:0}
/* Servicios del vale: casillas con el mismo aire que las formas de entrega,
pero en una sola linea (nombre a la izquierda, precio a la derecha) para que
los 14 quepan sin hacer la pagina interminable. */
.vale-grupo{
font-family:var(--tipo-titulo);font-size:.78rem;letter-spacing:.08em;
text-transform:uppercase;color:var(--titulos);margin:18px 0 8px;
}
.vale-grupo:first-child{margin-top:4px}
.vale-servicios{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:6px}
.vale-servicio input{position:absolute;opacity:0;width:0;height:0}
.vale-servicio span{
display:flex;justify-content:space-between;align-items:center;gap:12px;
background:#fff;border:1px solid var(--linea);padding:11px 14px;cursor:pointer;
height:100%;transition:border-color .15s;
}
.vale-servicio strong{font-weight:400;font-size:.9rem;letter-spacing:.01em;color:var(--texto,inherit)}
.vale-servicio b{
font-family:var(--tipo-titulo);font-weight:500;font-size:.95rem;
color:var(--titulos);white-space:nowrap;
}
.vale-servicio:hover span{border-color:var(--apagado)}
.vale-servicio input:checked + span{border-color:var(--titulos);box-shadow:inset 0 0 0 1px var(--titulos)}
.vale-servicio input:focus-visible + span{outline:2px solid var(--titulos);outline-offset:2px}
.vale-panel[data-panel=servicio] .vale-alternativa{margin-top:12px}
.vale-entregas{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.vale-entrega span{
display:block;background:#fff;border:1px solid var(--linea);
padding:16px 18px;cursor:pointer;height:100%;
transition:border-color .15s;
}
.vale-entrega:hover span{border-color:var(--apagado)}
.vale-entrega strong{display:block;font-size:.95rem;letter-spacing:.02em}
.vale-entrega em{display:block;font-size:.82rem;color:var(--apagado);font-style:normal;margin-top:3px}
.vale-recargo{
display:block;margin-top:9px;font-weight:400;
font-family:var(--tipo-titulo);font-size:.78rem;letter-spacing:.04em;
text-transform:uppercase;color:var(--titulos);
}
.vale-gratis{color:var(--apagado)}
.vale-total{
text-align:center;margin:0 0 14px;
font-size:.95rem;letter-spacing:.02em;color:var(--apagado);
}
.vale-total strong{
font-family:var(--tipo-titulo);font-size:1.25rem;
color:var(--titulos);letter-spacing:.02em;
}
.vale-campos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}
.vale-form label{display:block;font-size:.88rem;letter-spacing:.02em;color:var(--apagado)}
.vale-form .vale-ancho{display:block}
.vale-op{font-size:.82rem}
.vale-form input[type=text],.vale-form input[type=email],.vale-form input[type=tel],.vale-form textarea,.vale-form select{
display:block;width:100%;margin-top:6px;
font-family:var(--tipo-cuerpo);font-size:1rem;letter-spacing:.02em;color:var(--texto);
background:#fff;border:1px solid var(--linea);padding:12px 14px;
}
.vale-form input:focus,.vale-form textarea:focus,.vale-form select:focus{outline:none;border-color:var(--titulos)}
/* El formulario de contacto reaprovecha los estilos del vale; solo cambia que
va sobre fondo blanco y no dentro de una caja. */
.form-contacto{margin-top:34px}
.form-contacto .vale-ancho{margin-bottom:18px}
.campo-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contacto-gracias{margin-top:34px}
.vale-form select{appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
padding-right:38px}
/* ---------- pasos de la compra ---------- */
/* Se ven los tres desde el principio, aunque todo pase en la misma pantalla:
saber cuanto queda quita las ganas de dejarlo a medias. */
.pasos{
list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;
margin:0 0 30px;padding:0 0 20px;border-bottom:1px solid var(--linea);
}
.pasos li{
display:flex;align-items:center;gap:9px;
font-family:var(--tipo-titulo);font-size:.82rem;letter-spacing:.05em;
text-transform:uppercase;color:var(--apagado);
}
.pasos span{
width:25px;height:25px;flex:none;border-radius:50%;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--linea);font-size:.78rem;letter-spacing:0;
}
.pasos .paso-ahora{color:var(--titulos)}
.pasos .paso-ahora span{border-color:var(--titulos)}
.pasos .paso-hecho{color:#2f7a52}
.pasos .paso-hecho span{border-color:#2f7a52;background:#2f7a52;color:#fff}
.campo-nota{font-size:.82rem;color:var(--apagado);margin:12px 0 0}
.acepta{display:flex;align-items:flex-start;gap:11px;margin:0 0 26px;font-size:.9rem}
.acepta input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--titulos)}
.compra-error{
margin:0 0 18px;padding:13px 16px;text-align:center;font-size:.9rem;
background:var(--suave);border-left:3px solid var(--titulos);
}
.compra-error[hidden]{display:none}
/* ---------- vuelta de la pasarela ---------- */
.gracias{max-width:560px;margin:0 auto;text-align:center}
.gracias-tic{
width:58px;height:58px;margin:0 auto 20px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:#2f7a52;color:#fff;font-size:1.7rem;
}
.gracias-titulo{
font-family:var(--tipo-titulo);font-size:1.6rem;letter-spacing:.03em;
text-transform:uppercase;color:var(--titulos);margin-bottom:14px;
}
.gracias-resumen{margin:28px 0;border-top:1px solid var(--linea)}
.gracias-resumen[hidden]{display:none}
.gracias-resumen ul{list-style:none;margin:0;padding:0}
.gracias-resumen li{
display:flex;justify-content:space-between;gap:18px;
padding:13px 0;border-bottom:1px solid var(--linea);
font-size:.95rem;text-align:left;
}
.gracias-total{margin:18px 0 0;letter-spacing:.02em;color:var(--apagado)}
.gracias-total strong{font-family:var(--tipo-titulo);font-size:1.5rem;margin-left:10px}
.vale-pago{text-align:center;margin:6px 0 14px}
/* Apagado mientras falten datos o la compra este vacia: que se vea que aun no
toca, en vez de dejar pulsar y soltar un error. */
.vale-boton:disabled{opacity:.45;cursor:not-allowed}
.vale-boton:disabled:hover{background:transparent;border-color:var(--titulos);color:var(--titulos)}
.vale-nota{font-size:.9rem;color:var(--apagado);margin:0;text-align:center}
/* Aviso de la pagina de contacto: informa, no regaña. Filete a la izquierda y
fondo suave, en la linea del resto; nada de amarillo de advertencia. */
.nota-aviso{
background:var(--suave);
border-left:3px solid var(--titulos);
padding:22px 26px;
margin:34px 0 0;
}
.nota-aviso p{margin:0;font-size:.95rem}
/* Campo de fichero: el boton nativo sale en el idioma del navegador y con otra
pinta en cada uno. Se esconde el input (sigue existiendo, para teclado) y se
viste una etiqueta propia, siempre en español. */
.campo-fichero{margin-bottom:18px}
.campo-rotulo{display:block;font-size:.88rem;letter-spacing:.02em;color:var(--apagado);margin-bottom:8px}
.fichero-caja{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.campo-fichero input[type=file]{position:absolute;opacity:0;width:0;height:0}
.fichero-boton{
font-family:var(--tipo-titulo);font-weight:700;font-size:.78rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--titulos);
background:transparent;border:1px solid var(--titulos);
padding:11px 22px;cursor:pointer;
transition:background .2s,color .2s;
}
.fichero-boton:hover{background:var(--titulos);color:#fff}
.campo-fichero input[type=file]:focus-visible + .fichero-boton{outline:2px solid var(--titulos);outline-offset:2px}
.fichero-nombre{font-size:.9rem;color:var(--apagado);word-break:break-all}
.campo-ayuda{font-size:.85rem;color:var(--apagado);margin:10px 0 0}
/* Los mismos datos que la portada, aqui debajo del formulario. La accion de
cada tarjeta ES el dato, asi que no hace falta pegarlo al fondo. */
.datos-contacto{margin-top:44px}
.datos-contacto .visita-dato{margin:0;font-size:.92rem;letter-spacing:.02em}
.datos-contacto .visita-caja{padding:30px 24px}
/* ---------- guías ---------- */
.guia-meta{
font-family:var(--tipo-titulo);font-size:.82rem;letter-spacing:.05em;
text-transform:uppercase;color:var(--apagado);margin-bottom:1.4em;
}
.cuerpo-guia h2,.contenedor.estrecho h2{margin-top:1.9em}
/* El cierre: lleva al servicio y a pedir cita. Una guía que no termina en algo
concreto entretiene, pero no llena la agenda. */
.guia-cierre{
background:var(--suave);border-left:3px solid var(--titulos);
padding:26px 30px;margin:44px 0 0;
}
.guia-cierre h2{margin-top:0;font-size:1.05rem}
.guia-cierre p{margin:0 0 .8em}
.guia-cierre p:last-child{margin:0}
/* Flex y no grid (25-08). La rejilla era auto-fill a 1fr, que reservaba
SIEMPRE cuatro columnas: con tres guias dejaba un hueco muerto de 288 px a
la derecha y la fila descolgada a la izquierda. Y esto es un listado que
crece, asi que el numero de guias casi nunca sera multiplo de cuatro: el
hueco vuelve con 5, 6, 7...
Con flex se centra CADA fila, tambien la ultima cuando queda coja, que es lo
que el grid no sabe hacer sin trucos de nth-child. La base de 250 mantiene
el reparto de antes en cuanto hay cuatro o mas, y el tope de 340 evita que
una guia sola se estire a los 1.200 px de ancho. */
.guias-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:38px}
.guia-tarjeta{
flex:1 1 250px;max-width:340px;
display:flex;flex-direction:column;text-decoration:none;color:inherit;
border:1px solid var(--linea);background:#fff;overflow:hidden;
transition:border-color .2s,box-shadow .2s;
}
.guia-tarjeta:hover{border-color:var(--titulos);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.guia-tarjeta img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.guia-tarjeta:hover img{transform:scale(1.05)}
.guia-tarjeta-texto{display:flex;flex-direction:column;flex:1;padding:18px 20px 22px}
.guia-fecha{
display:block;font-family:var(--tipo-titulo);font-size:.68rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--apagado);margin-bottom:7px;
}
.guia-titulo{
display:block;font-family:var(--tipo-titulo);font-weight:500;
font-size:.95rem;letter-spacing:.03em;color:var(--titulos);
text-transform:uppercase;line-height:1.45;margin-bottom:9px;
}
/* Recorta la entradilla a tres lineas para que las tarjetas de una fila midan
lo mismo aunque los textos sean de distinto largo. */
.guia-entradilla{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;font-size:.85rem;line-height:1.65;color:var(--texto)}
/* ---------- carrusel de la tienda ---------- */
.carrusel{position:relative;margin-bottom:52px;background:#111}
/* Escaparate de la tienda (25-08): carrusel de ofertas a la izquierda y el vale
regalo fijo a la derecha, en la misma fila. Antes iban uno debajo del otro y
sumaban 895 px —el banner era el 47% de la primera pantalla— para enseñar lo
mismo que ya estaba mas abajo. El vale ya no es diapositiva: se ve siempre.
Debajo de 1160 se apilan, y ahi cada uno recupera su formato de antes: por
debajo de ese ancho la columna del vale baja de 375 px y su texto se va a
cinco lineas, dejando la foto en un canuto de 93 px. */
.tienda-escaparate{display:grid;gap:24px;margin-bottom:52px}
@media (min-width:1160px){
/* 1,8 a 1: la oferta manda, pero el vale tiene que leerse, no ser una pastilla. */
.tienda-escaparate{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);align-items:stretch}
/* El alto lo fija la FILA, no la proporcion de cada foto: asi los dos miden
igual y no queda un escalon entre ellos. Con min-height no bastaba —la foto
cuadrada del vale tiraba de la fila hasta 661 px—: tiene que ser alto de
rejilla, y las fotos recortan con object-fit. */
.tienda-escaparate{grid-auto-rows:clamp(360px,30vw,430px)}
.tienda-escaparate .carrusel{margin-bottom:0;height:100%}
.tienda-escaparate .carrusel-fotos{aspect-ratio:auto;max-height:none;height:100%}
.tienda-escaparate .carrusel-texto{padding:28px 32px}
.tienda-escaparate .carrusel-titulo{font-size:clamp(1.25rem,2.2vw,1.7rem)}
.tienda-escaparate .carrusel-linea{font-size:.9rem}
/* El vale pasa a vertical: foto arriba, texto abajo. En una columna de 380 px
la foto al 42% dejaba el texto en un canuto de siete lineas. */
.tienda-escaparate .prod-ancha{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
.tienda-escaparate .prod-ancha-foto{aspect-ratio:auto;height:100%;min-height:0}
.tienda-escaparate .prod-ancha-texto{padding:20px 24px}
.tienda-escaparate .prod-ancha-nombre{font-size:1.25rem}
.tienda-escaparate .prod-ancha-linea{font-size:.88rem;line-height:1.55;margin-top:8px}
.tienda-escaparate .prod-ancha-pie{margin-top:12px;gap:16px}
}
.carrusel-fotos{position:relative;aspect-ratio:1600/560;max-height:460px;overflow:hidden}
/* Las diapositivas se cruzan con un fundido, como las de la portada, en vez de
deslizarse: menos ruido y no da saltos si una imagen tarda en cargar. */
.carrusel-slide{
position:absolute;inset:0;display:block;text-decoration:none;
opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s;
}
.carrusel-slide.activa{opacity:1;visibility:visible}
/* A quien tenga «reducir movimiento» en su sistema se le quita el fundido, pero
el carrusel sigue pasando: lo que molesta es la animación, no el cambio. */
@media (prefers-reduced-motion: reduce){
.carrusel-slide{transition:none}
.carrusel-punto{transition:none}
}
.carrusel-slide img{width:100%;height:100%;object-fit:cover}
.carrusel-texto{
position:absolute;inset:0;
display:flex;flex-direction:column;justify-content:flex-end;
padding:38px 44px;
background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.62));
color:#fff;
}
.carrusel-rotulo{
font-family:var(--tipo-titulo);font-size:.72rem;letter-spacing:.08em;
text-transform:uppercase;opacity:.85;margin-bottom:10px;
}
.carrusel-titulo{
font-family:var(--tipo-titulo);font-weight:500;
font-size:clamp(1.4rem,3vw,2.1rem);letter-spacing:.03em;
text-transform:uppercase;line-height:1.25;text-shadow:0 2px 16px rgba(0,0,0,.45);
}
.carrusel-linea{font-size:.95rem;margin-top:10px;max-width:520px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.carrusel-puntos{
position:absolute;left:0;right:0;bottom:16px;
display:flex;justify-content:center;gap:9px;
}
.carrusel-punto{
width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.75);
transition:background .2s,transform .2s;
}
.carrusel-punto.activa{background:#fff;transform:scale(1.25)}
.carrusel-punto:hover{background:rgba(255,255,255,.85)}
/* Tarjeta apaisada del vale regalo: va delante de las ofertas y es lo unico
permanente de la tienda, asi que se distingue de las tarjetas normales. */
.prod-ancha{
display:grid;grid-template-columns:minmax(0,42%) 1fr;
text-decoration:none;color:inherit;
background:var(--suave);border:1px solid var(--linea);overflow:hidden;
transition:border-color .2s,box-shadow .2s;
}
.prod-ancha:hover{border-color:var(--titulos);box-shadow:0 6px 18px rgba(0,0,0,.07)}
/* La foto manda el alto con una proporcion fija; sin esto la tarjeta se estiraba
a 500 px y quedaba medio lado vacio. */
.prod-ancha-foto{display:block;overflow:hidden;aspect-ratio:3/2}
.prod-ancha img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.prod-ancha:hover img{transform:scale(1.04)}
.prod-ancha-texto{display:flex;flex-direction:column;justify-content:center;padding:30px 34px}
.prod-ancha-rotulo{
font-family:var(--tipo-titulo);font-size:.72rem;letter-spacing:.07em;
text-transform:uppercase;color:var(--apagado);margin-bottom:9px;
}
.prod-ancha-nombre{
font-family:var(--tipo-titulo);font-weight:500;font-size:1.5rem;
letter-spacing:.03em;text-transform:uppercase;color:var(--titulos);line-height:1.3;
}
.prod-ancha-linea{font-size:.95rem;margin-top:12px;max-width:520px}
.prod-ancha-pie{display:flex;align-items:baseline;gap:22px;margin-top:20px;flex-wrap:wrap}
.prod-ancha-pie .enlace-cita{align-self:auto}
/* ---------- carrito ---------- */
/* Solo el icono y el número: con siete apartados en el menú no hay sitio para
texto. Y el [hidden] tiene que ganar al display, o el carrito vacío se queda
en pantalla ocupando hueco. */
.cabecera-compra{
flex:none;position:relative;display:flex;align-items:center;
padding:8px;color:var(--titulos);text-decoration:none;
}
.cabecera-compra[hidden]{display:none}
.cabecera-compra svg{
width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round;
}
.cabecera-compra:hover{color:#000}
.cabecera-compra-n{
position:absolute;top:1px;right:0;
background:var(--titulos);color:#fff;border-radius:999px;
min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;
font-family:var(--tipo-titulo);font-size:.62rem;letter-spacing:0;padding:0 4px;
}
.cabecera-compra-n[hidden]{display:none}
/* ---------- barras fijas de la tienda (solo móvil) ---------- */
/* En el ordenador no hacen falta: el botón de comprar se ve sin bajar. En el
teléfono la ficha es larga, así que el precio y el botón viajan contigo. */
.barra-compra,.barra-carrito{display:none}
.anadir{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 0}
.anadir-cantidad{display:flex;align-items:center;border:1px solid var(--titulos);border-radius:8px;overflow:hidden}
.anadir-cantidad button{
width:42px;height:46px;border:0;background:none;cursor:pointer;
font-size:1.2rem;color:var(--titulos);
}
.anadir-cantidad button:hover{background:#eee}
.anadir-cantidad input{
width:52px;height:46px;border:0;border-left:1px solid var(--linea);border-right:1px solid var(--linea);
text-align:center;font-family:var(--tipo-titulo);font-size:1.05rem;color:var(--titulos);
-moz-appearance:textfield;
}
.anadir-cantidad input::-webkit-outer-spin-button,
.anadir-cantidad input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* El «añadido» lleva al lado el boton de pagar: es lo siguiente que toca, y como
enlace de texto pesaba menos que el boton ya pulsado. El de pagar va con
filete y no relleno de dorado, para que se lea la jerarquia sin gritar: el
dorado es «añadir», el filete es «ir a pagar». */
.anadir-hecho{
width:100%;margin:12px 0 0;font-size:.9rem;color:#2f7a52;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.anadir-pagar{padding:9px 20px;font-size:.78rem}
.compra{margin-bottom:8px}
.compra-fila{
display:grid;grid-template-columns:110px 1fr auto auto auto;
gap:18px;align-items:center;
padding:16px 0;border-bottom:1px solid var(--linea);
}
.compra-fila img{width:110px;aspect-ratio:3/2;object-fit:cover}
.compra-datos{display:flex;flex-direction:column;min-width:0}
.compra-titulo{
font-family:var(--tipo-titulo);font-size:.98rem;letter-spacing:.03em;
text-transform:uppercase;color:var(--titulos);line-height:1.35;
}
.compra-unidad{font-size:.85rem;color:var(--apagado);margin-top:4px}
.compra-cantidad{display:flex;align-items:center;border:1px solid var(--linea);border-radius:8px;overflow:hidden}
.compra-cantidad button{width:34px;height:36px;border:0;background:none;cursor:pointer;font-size:1.05rem;color:var(--titulos)}
.compra-cantidad button:hover{background:#eee}
.compra-cantidad span{min-width:30px;text-align:center;font-size:.95rem}
.compra-importe{font-family:var(--tipo-titulo);font-size:1.15rem;color:var(--titulos);white-space:nowrap}
.compra-quitar{border:0;background:none;cursor:pointer;color:var(--apagado);font-size:1.3rem;line-height:1}
.compra-quitar:hover{color:#a33}
.compra-vacia{color:var(--apagado)}
.compra-total{
text-align:right;font-size:1rem;color:var(--apagado);
margin:22px 0 30px;letter-spacing:.02em;
}
.compra-total strong{font-family:var(--tipo-titulo);font-size:1.8rem;color:var(--titulos);margin-left:12px}
/* ---------- tienda ---------- */
.tienda-bloque{margin-bottom:52px}
.tienda-bloque h2{font-size:1.15rem;margin-bottom:.4em}
.tienda-nota{color:var(--apagado);font-size:.92rem;margin-bottom:24px;max-width:640px}
/* «Para conocernos», la entrada de clientela nueva: titulo a tamaño de h2 y la
frase como entradilla, no como nota gris (14-09-2026) */
.tienda-conocernos{text-align:center;padding-top:44px;border-top:1px solid var(--linea)}
.tienda-conocernos h2{font-size:clamp(1.7rem,3vw,2.31rem);margin-bottom:.2em}
.tienda-conocernos .tienda-nota{color:var(--titulos);font-size:clamp(1.1rem,1.8vw,1.3rem);margin:0 auto 34px}
.tienda-conocernos .prod-lista{text-align:left}
.prod-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.prod{
display:flex;flex-direction:column;text-decoration:none;color:inherit;
background:#fff;border:1px solid var(--linea);overflow:hidden;
transition:border-color .2s,box-shadow .2s;
}
.prod:hover{border-color:var(--titulos);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.prod-foto{position:relative;display:block;overflow:hidden}
.prod img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
/* El porcentaje va sobre la foto: es lo primero que se ve y lo que para el ojo. */
.prod-dto{
position:absolute;top:12px;left:12px;
font-family:var(--tipo-titulo);font-weight:700;font-size:.85rem;letter-spacing:.02em;
color:#fff;background:#2f7a52;padding:5px 11px;
}
.prod-precios{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:16px}
.prod-antes{font-size:1rem;color:var(--apagado);text-decoration:line-through}
.prod-hasta{
font-size:.78rem;color:var(--apagado);margin-top:8px;
padding-top:8px;border-top:1px solid var(--linea);
}
.prod:hover img{transform:scale(1.05)}
.prod-texto{display:flex;flex-direction:column;flex:1;padding:20px 22px 24px}
.prod-nombre{
font-family:var(--tipo-titulo);font-weight:500;font-size:1rem;
letter-spacing:.03em;text-transform:uppercase;color:var(--titulos);line-height:1.4;
}
.prod-detalle{font-size:.85rem;color:var(--apagado);margin-top:6px}
.prod-precio{
font-family:var(--tipo-titulo);font-weight:500;font-size:1.55rem;
letter-spacing:.02em;color:var(--titulos);
}
/* El ahorro sale del precio suelto de la agenda, no se escribe a mano, y solo
aparece si de verdad lo hay. */
.prod-ahorro{
font-family:var(--tipo-titulo);font-size:.78rem;letter-spacing:.05em;
text-transform:uppercase;color:#2f7a52;margin-top:6px;
}
.prod-vale .prod-ahorro{color:var(--apagado)}
.bono-ficha{max-width:560px}
.form-compra{margin-top:8px}
.form-compra legend{margin-bottom:14px}
.bono-ficha .vale-nota{text-align:left;margin-top:14px}
.oferta-texto{font-size:1.05rem;max-width:640px;margin-bottom:30px}
.bono-antes{font-size:1.1rem;color:var(--apagado);text-decoration:line-through;margin:0}
.bono-precio{
font-family:var(--tipo-titulo);font-weight:500;font-size:2.4rem;
letter-spacing:.02em;color:var(--titulos);margin:0;
}
.bono-ahorro{
font-family:var(--tipo-titulo);font-size:.85rem;letter-spacing:.05em;
text-transform:uppercase;color:#2f7a52;margin:6px 0 26px;
}
.bono-datos{border-collapse:collapse;width:100%;margin-bottom:30px}
.bono-datos th,.bono-datos td{padding:11px 0;border-bottom:1px solid var(--linea);font-size:.95rem}
.bono-datos th{text-align:left;font-weight:400;color:var(--apagado)}
.bono-datos td{text-align:right;color:var(--titulos)}
.bono-ficha .vale-pago{text-align:left}
/* ---------- tiras de texto e imagen (estructura nueva, 17-08) ---------- */
/* OJO: se llaman «tira» y no «banda» porque .banda ya existia en la portada
(solo pone padding). Al reutilizar el nombre, aquellas dos secciones se
volvieron una rejilla de dos columnas y el contenido se fue a la mitad
izquierda dejando media pagina vacia. */
/* Media pantalla de foto y media de texto, alternando el lado en cada bloque.
Sustituye al texto con la imagen flotada: aquella dejaba media columna vacia
debajo de la foto en cuanto el texto era mas largo que la imagen. */
/* La entradilla de estas paginas es la BIENVENIDA, no un pie de foto: va entre
la foto de cabecera y la primera tira, las dos piezas mas pesadas de la
pagina, y en cuerpo de 19px se la comian (David, 20-08-2026).
Sube a la tipografia de titulos (Fredoka) y al color de titulos, pero:
- NO en mayusculas y con peso 400, no 500. Si se pone en versalitas como un
h2 compite con el h1 de la cabecera y con el titulo de la tira de debajo,
y la pagina pasa a tener tres titulares seguidos.
- Interlineado 1.5 y no 1.7: a este tamano, 1.7 separa tanto las dos lineas
que dejan de leerse como una sola frase.
Gana aire arriba y sobre todo abajo, que era donde chocaba con la tira. */
/* 24-08: la misma medida que .seccion-entrada. Iba a 76/44 frente a los 44/20
de las paginas de servicio, o sea que las tres puertas —que se ven seguidas—
respiraban distinto y belleza y bienestar eran las mas sueltas de la web. */
.seccion-entradilla{padding:clamp(32px,3vw,44px) 0 clamp(14px,1.6vw,20px)}
/* La entradilla ya trae su propio aire abajo: si la seccion siguiente suma sus
64px, quedan ~110px de hueco y la frase se queda flotando sola. */
.seccion-entradilla + .seccion{padding-top:0}
/* Entrada de las 13 paginas de servicio. Se aplica al BLOQUE, no al primer
parrafo: darle el estilo solo al primero dejaba dos mitades pegadas (24px
Fredoka centrado + 19px Open Sans a la izquierda) y parecia roto. Y la regla
«el primero manda» estaba del reves en /tratamientos-faciales/, donde la
frase que remata es la segunda.
MISMO idioma que /estudio/ (Fredoka, color de titulos, centrado) pero mas
pequeno: alli la frase son 18 palabras y aqui el bloque va de 33
(Nutricion) a 168 (Esthetic Training). */
.entrada-servicio .entradilla{
font-family:var(--tipo-titulo);
font-size:clamp(1.05rem,1.7vw,1.35rem);
font-weight:400;
letter-spacing:.02em;
line-height:1.6;
color:var(--titulos);
text-align:center;
}
.entrada-servicio .entradilla:last-child{margin-bottom:0}
/* PELUQUERIA con la letra de las otras dos puertas (David, 24-08: «iguala la
letra al resto de entradillas de las paginas»). Medidas las seis: belleza,
bienestar, servicios y estudio van a 28,8 px (.entrada-centrada) y las trece
paginas de servicio a 21,6. Peluqueria es las dos cosas a la vez —es el
INDICE de su mundo, hermana de belleza y bienestar, pero esta hecha con la
plantilla de servicio— y se quedaba con la letra pequena de las de dentro.
Frente a las de servicio ya era identica: ahi no habia nada que igualar. */
.pag-peluqueria .entrada-servicio .entradilla{
font-size:clamp(1.3rem,2.3vw,1.8rem);
line-height:1.5;
}
/* El hueco entre la bienvenida y el contenido (David, 24-08: «en algunos casos
obliga a hacer mucho scroll para ver el contenido»). El problema no eran las
frases sino que habia 192 px de hueco SEGUIDO: la seccion de la bienvenida
cerraba con 64, la de debajo abria con otros 64 y el titular traia el suyo.
Medido antes: en 12 de las 17 paginas de servicio el contenido no empezaba
hasta 0,96-1,05 pantallas —el peor sitio posible, porque obliga a un scroll y
no asoma nada que invite a darlo—. Con esto se recortan ~75 px sin quitar una
palabra y la primera fila de tarjetas asoma. Lo que NO se toca: el tamano de
la frase (se lee como bienvenida porque es grande y aireada) ni la cabecera,
que ya bajo de 380 a 280 el 21-08 por esto mismo. */
/* .seccion.seccion-entrada y no .seccion-entrada a secas: la media query de
900 px trae un `.seccion{padding:46px 0}` que va DESPUES en el archivo y con
la misma especificidad le ganaba. En el movil el recorte se quedaba en 18 de
los 50 px y solo porque la otra regla si lleva dos clases. Cazado midiendo
otra vez las 17 paginas a 390 px, no al escribir el CSS. */
.seccion.seccion-entrada{padding:clamp(32px,3vw,44px) 0 clamp(14px,1.6vw,20px)}
.seccion-entrada + .seccion{padding-top:clamp(20px,2.2vw,28px)}
.entrada-centrada{
max-width:880px;margin:0 auto;text-align:center;
font-family:var(--tipo-titulo);
font-size:clamp(1.3rem,2.3vw,1.8rem);
font-weight:400;
letter-spacing:.02em;
line-height:1.5;
color:var(--titulos);
}
.tira{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
/* La foto llega hasta el borde de la pantalla: es lo que le da el aire que no
tenia metida dentro del ancho del texto. */
.tira-foto{position:relative;min-height:420px;overflow:hidden;background:#111}
.tira-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tira-texto{display:flex;align-items:center;padding:clamp(38px,5vw,86px) clamp(24px,4vw,72px)}
.tira-caja{max-width:520px}
.tira-caja h2{font-size:clamp(1.2rem,2vw,1.6rem);margin-bottom:.8em}
.tira-caja p:last-child{margin-bottom:0}
/* Alternar: en las invertidas la foto se va a la derecha sin tocar el orden del
HTML, para que quien lee con lector de pantalla siga leyendo texto y foto en
el mismo orden en todas. */
.tira-invertida .tira-foto{grid-column:2;grid-row:1}
.tira-invertida .tira-texto{grid-column:1;grid-row:1}
.tira-suelta{text-align:center}
.tira-suelta p{max-width:720px;margin-left:auto;margin-right:auto}
.tira-botones{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.tira-botones .btn-linea{margin-left:0}
@media (max-width:860px){
.tira{grid-template-columns:1fr}
/* Apilado, la foto va siempre arriba: da igual el lado que le tocara. */
.tira-invertida .tira-foto,.tira-invertida .tira-texto{grid-column:1}
.tira-invertida .tira-foto{grid-row:1}
.tira-invertida .tira-texto{grid-row:2}
.tira-foto{min-height:0;aspect-ratio:4/3}
.tira-caja{max-width:none}
}
/* ---------- presentación ---------- */
.presentacion{
display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:44px;align-items:center;
max-width:1050px;margin:0 auto;min-height:250px; /* misma altura en las dos bandas de la portada (David, 17-08) */
}
/* Banda: la foto ya no ocupa media pantalla, va en una columna estrecha y
estira hasta la altura del texto (David, 17-08: «dos bandas con imagen
más pequeña»). */
.presentacion img{width:100%;height:0;min-height:100%;object-fit:cover;align-self:stretch}
.presentacion h3{font-size:1.3rem}
.banda{padding:40px 0}
/* ---------- páginas interiores ---------- */
/* El suelo de 180 px va aqui y no en .cabecera-simple: lo tenian las paginas
normales pero no las de servicio, asi que en el movil unas median 180 y otras
163. Ahora es el mismo suelo para las dos plantillas. */
.cabecera-pagina{position:relative;background:#1a1a1a;min-height:180px}
/* El alto de la cabecera lo fija la proporcion, NO la forma del archivo. Antes
solo habia max-height, asi que en el movil una foto panoramica daba 164 px y
una cuadrada 380: la cabecera pegaba saltos de una pagina a otra (David,
18-08). Con aspect-ratio miden todas igual aunque el archivo sea 1600x673 o
500x500. El max-height sigue mandando de 912 px de ventana en adelante. */
/* 380 -> 280 px (David, 21-08): a 380 la cabecera se comia el 42% de la
primera pantalla en escritorio y el contenido no empezaba hasta los 503 px.
Sigue teniendo presencia y se gana medio palmo de pagina. */
/* el min-height va tambien en la foto: por debajo de ~430px de ancho, 12/5 se
queda corto y asomaba una banda negra del fondo bajo la imagen */
.cabecera-pagina img{width:100%;height:auto;aspect-ratio:12/5;min-height:180px;max-height:280px;object-fit:cover;opacity:.72}
.cabecera-pagina-texto{
position:absolute;inset:0;display:flex;align-items:center;
/* Velo por la izquierda, que es donde cae el titulo. Medido el contraste real
sobre las 17 cabeceras con foto (ocultando el h1 y muestreando el fondo):
/indiba/ daba 2,89:1 y no llegaba ni al minimo de 3:1 que pide un texto
grande —su foto es un cartel casi blanco—, y estudio, rituales, servicios y
reflexologia andaban entre 3,6 y 4,4. Con el velo pasan todas de 4,5:1.
Es horizontal y no de arriba abajo para no apagar la foto entera: donde no
hay texto, la imagen se ve igual que antes. */
background:linear-gradient(to right,rgba(0,0,0,.5) 0%,rgba(0,0,0,.34) 38%,rgba(0,0,0,0) 72%);
}
.cabecera-pagina-texto h1{color:#fff;margin:0;text-shadow:0 2px 16px rgba(0,0,0,.5)}
/* .cabecera-simple ya no lleva alto propio: lo hereda de .cabecera-pagina. */
.migas{background:var(--medio);font-size:.82rem;letter-spacing:.02em;padding:11px 0;color:var(--apagado)}
/* Vuelta al apartado del que cuelga la pagina, al final del contenido. Con el
mismo boton que el resto de la web: en gris pequeñito no lo veia nadie. */
.volver-fila{padding-top:34px;padding-bottom:56px}
.volver{
display:inline-flex;align-items:center;gap:11px;
font-family:var(--tipo-titulo);font-weight:700;
font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
text-decoration:none;color:var(--titulos);
background:transparent;border:1px solid var(--titulos);
border-radius:8px;
padding:13px 28px;
transition:background .2s,color .2s,border-color .2s;
}
.volver:hover,.volver:focus-visible{background:#c7a15a;border-color:#c7a15a;color:#2b2b2b}
/* La flecha se separa un poco al pasar por encima: refuerza que va hacia atras. */
.volver span{transition:transform .2s}
.volver:hover span{transform:translateX(-4px)}
.migas a{text-decoration:none}
.migas a:hover{text-decoration:underline}
/* La rejilla es de 3 columnas, pero se declara de SEIS y cada tarjeta ocupa
dos. Ese doble de columnas es lo que permite mover media casilla y centrar la
ultima fila cuando queda coja —5 tarjetas en filas de 3 dejaban un hueco a la
derecha (David, 23-08: «las 2 que estan debajo, se pueden centrar para que no
haya un hueco libre?»)—. Con 3 columnas de verdad no se puede: solo caben
posiciones enteras.
Las dos reglas de abajo cogen la primera tarjeta de la ultima fila (la que
empieza fila, :nth-child(3n+1)) cuando ademas es la ultima o la penultima, y
la desplazan media casilla o una entera. Las demas fluyen detras solas. */
.tarjetas{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}
.tarjetas > *{grid-column:span 2}
.tarjetas > *:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2} /* quedan 2 sueltas */
.tarjetas > *:nth-child(3n+1):last-child{grid-column:3 / span 2} /* queda 1 suelta */
/* Cuando debajo de las tarjetas hay texto de cierre iba pegado a ellas: el
.cuerpo no lleva margen propio. */
.tarjetas + .cuerpo{margin-top:48px}
/* Tarjeta de dos caras: delante la foto y el titulo, detras el texto. Se da la
vuelta al tocar «+ info» (David, 17-08). El texto de detras esta siempre en
el HTML, asi que Google lo lee y sin JavaScript se ve igual. */
/* scroll-margin-top: la cabecera va fija y ocupa 75 px, asi que un salto de
ancla dejaba el titulo de la tarjeta debajo de ella. Esto se lo dice al
navegador para su propio salto, sin depender del JavaScript. */
.tarjeta{perspective:1400px;scroll-margin-top:95px}
.tarjeta-caras{
display:grid;position:relative;
transform-style:preserve-3d;transition:transform .6s ease;
/* height:100% o la tarjeta se queda corta: el .tarjeta es celda de rejilla y
se estira al alto de su fila, pero las caras no le seguian y dejaban hasta
51 px de hueco debajo de la foto (cazado el 18-08 al pasar el texto encima
de la imagen: antes el alto lo marcaba la banda de texto de delante). */
height:100%;
}
.tarjeta.girada .tarjeta-caras{transform:rotateY(180deg)}
/* Las dos caras ocupan la misma celda: la tarjeta mide lo que la mas alta y no
pega un salto al girar. */
.tarjeta-cara{
grid-area:1/1;backface-visibility:hidden;
background:#fff;border:1px solid var(--linea);border-radius:8px;overflow:hidden;
display:flex;flex-direction:column;
}
.tarjeta-detras{transform:rotateY(180deg);background:var(--suave)}
/* Detras no hay foto, asi que el texto se centra en el hueco en vez de quedar
pegado arriba con medio palmo de blanco debajo. */
.tarjeta-detras .tarjeta-texto{justify-content:center}
.tarjeta-detras .tarjeta-texto p{flex:0}
.tarjeta img{aspect-ratio:4/3;object-fit:cover;width:100%}
/* TITULO SOBRE LA FOTO. Nace el 18-08 en peluqueria (David: «pon el texto y el
boton encima de las imagenes») y del 21 al 24-08 se fue extendiendo a otras
ocho paginas. El 24-08 David da marcha atras en todas ellas —fuera las fotos
de las tarjetas, una sola foto al lado del bloque (ver .tarjeta-plana y
.tarjetas-con-foto)— y aqui queda SOLO PELUQUERIA, cuyas seis tarjetas son
los enlaces a las paginas de ese mundo y llevan la cabecera de cada una.
Si alguna pagina vuelve a tener tarjetas con foto, se anade su .pag- delante
y se vuelve a medir el contraste del titulo sobre SUS fotos, que es lo unico
que puede fallar.
Cara de delante: el titulo y el «+ info» van SOBRE la foto, no
en una banda blanca debajo. Mismo recurso que el mosaico de la portada, asi
que la pagina se lee como el resto de la web. La foto pasa a llenar la cara
entera: el alto de la tarjeta lo sigue marcando la cara de atras, que es la
que lleva el texto largo. */
/* Suelo de altura (David, 21-08: «las has hecho mas pequenas»). Al quitar la
banda blanca de debajo, el alto de la tarjeta pasa a marcarlo el texto del
dorso, asi que cada pagina medía una cosa: peluqueria 319 px (dorsos de 27 a
43 palabras) y maquillaje 242 px (de 20 a 30). Antes, con la banda, todas
median 402 px. Con el suelo en 320 px las dos paginas quedan iguales —que es
lo que se pedia al unificarlas— y la foto recupera tamano. No es un alto
fijo: si un dorso es mas largo, la tarjeta sigue creciendo. */
.pag-peluqueria .tarjeta-caras{min-height:320px}
.pag-peluqueria .tarjeta-frente{position:relative}
.pag-peluqueria .tarjeta-frente img{aspect-ratio:auto;flex:1;height:100%;min-height:200px}
/* Degradado y no un color plano: sobre una foto clara el texto blanco se perdia
(la de coloracion es casi toda rubia). Comprobado el contraste sobre las 44. */
.pag-peluqueria .tarjeta-frente .tarjeta-texto{
position:absolute;left:0;right:0;bottom:0;
/* Mas baja y mas suave (David, 18-08: «se come mucha foto»): la franja pasa
del 51% de la tarjeta al 37% y el negro maximo de .92 a .78. El limite no es
estetico: el titulo es de 16,8 px y peso 500, o sea texto normal, asi que
necesita 4,5:1. Ahi es donde deja de poder bajarse. */
padding:24px 22px 16px;
/* El degradado se aclara POR ENCIMA del titulo, no a traves de el: hasta el
82% mantiene cuerpo (que es donde caen titulo y boton) y el desvanecido se
gasta en la franja de arriba, donde no hay texto. Asi la parte oscura de
verdad es corta y la foto se ve. */
background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.64) 58%,rgba(0,0,0,.46) 82%,rgba(0,0,0,0) 100%);
}
/* Titulo a 19,2 px y en negrita: ademas de leerse mejor sobre una foto, a partir
de 18,66 px en negrita cuenta como texto grande y el minimo de contraste baja
de 4,5:1 a 3:1. Eso es lo que permite aclarar el degradado sin que deje de
leerse; con el titulo fino de 16,8 px no habria sitio para bajarlo. */
.pag-peluqueria .tarjeta-frente h3{color:#fff;font-size:1.2rem;font-weight:700;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.pag-peluqueria .tarjeta-frente .tarjeta-mas{color:#fff;border-color:rgba(255,255,255,.85);margin-top:10px;padding:7px 15px;font-size:.74rem}
.pag-peluqueria .tarjeta-frente .tarjeta-mas:hover,.pag-peluqueria .tarjeta-frente .tarjeta-mas:focus-visible{
background:#c7a15a;border-color:#c7a15a;color:#2b2b2b;
}
.tarjeta-texto{padding:22px;display:flex;flex-direction:column;flex:1}
.tarjeta-texto p{flex:1;font-size:.92rem;line-height:1.75}
.tarjeta-mas{
align-self:flex-start;margin-top:auto;
font-family:var(--tipo-titulo);font-weight:700;font-size:.78rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--titulos);
background:none;border:1px solid var(--titulos);border-radius:8px;
padding:9px 18px;cursor:pointer;
transition:background .2s,color .2s,border-color .2s;
}
.tarjeta-mas:hover,.tarjeta-mas:focus-visible{background:#c7a15a;border-color:#c7a15a;color:#2b2b2b}
.tarjeta-pie{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.tarjeta-volver{
background:none;border:0;cursor:pointer;padding:4px 0;
font-family:var(--tipo-titulo);font-size:.75rem;letter-spacing:.05em;
text-transform:uppercase;color:var(--apagado);
}
.tarjeta-volver:hover{color:var(--titulos)}
/* La cara de atras solo existe cuando hay JavaScript para girarla. Sin el, se
quita el 3D y las dos caras se ven una debajo de otra. */
html:not(.js) .tarjeta-caras{display:block;transform:none}
html:not(.js) .tarjeta-cara{border-radius:8px}
html:not(.js) .tarjeta-detras{transform:none;margin-top:-1px;border-top:0}
html:not(.js) .tarjeta-mas{display:none}
html:not(.js) .tarjeta-volver{display:none}
/* Tarjeta sin foto (David, 24-08 en /coloracion/). La misma caja blanca de
siempre, pero con el texto a la vista: sin foto delante no hay nada que
tapar, asi que sobran el giro, el «+ info» y la cara de atras. Se estiran
todas al alto de la mas alta —son celdas de rejilla— para que la fila quede
cuadrada aunque un texto sea mas largo. */
.tarjeta-plana{
background:#fff;border:1px solid var(--linea);border-radius:8px;
padding:26px 24px;display:flex;flex-direction:column;gap:11px;
}
.tarjeta-plana h3{margin:0;font-size:1.05rem}
.tarjeta-plana p{margin:0;font-size:.92rem;line-height:1.75}
/* Foto AL LADO de las tarjetas (David, 24-08). Una sola imagen para el bloque
entero, no una por tarjeta. De partida va encima y a todo lo ancho, que es
como tiene sentido en un movil; de 901 px para arriba se pone a la izquierda
y se estira al alto que midan las tarjetas. */
.tarjetas-foto{margin:0 0 26px}
.tarjetas-foto img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block}
.tarjetas-con-foto + .cuerpo{margin-top:48px}
/* En la tableta, apaisada de 830 px, un 4:3 se comia media pantalla antes de la
primera tarjeta; en el movil, en cambio, el 16:9 se queda en una tira. */
@media (max-width:560px){.tarjetas-foto img{aspect-ratio:4/3}}
@media (min-width:901px){
.tarjetas-con-foto{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:26px}
/* El alto lo marcan las tarjetas: la foto es celda de rejilla, se estira con
ellas y el recorte lo hace el object-fit. Por eso la imagen de origen es
cuadrada y no un recorte fijo: sirva el bloque el alto que sirva.
…hasta un limite. En /tratamientos-faciales/ son DIEZ tarjetas: cinco filas,
1.173 px, y la foto salia de 340x1173 —una astilla de 1:3,5— ademas de
estirar el original un 30%. El tope se pone en 800 y no mas abajo porque las
otras seis paginas miden de 412 a 786: a 660 le recortaba 49 px a coloracion
y a capilares y a 760 se los recortaba a corporales, todas ya dadas por
buenas. Asi el tope solo entra en juego en faciales. Y como ahi le sobra
sitio en la columna, la foto se queda pegada arriba mientras pasan las
tarjetas en vez de dejar un hueco gris; medido al final del bloque, acaba a
ras de la ultima fila. */
.tarjetas-foto{margin:0;position:sticky;top:95px;max-height:800px}
.tarjetas-foto img{height:100%;aspect-ratio:auto}
/* Al lado de la foto ya no caben tres tarjetas: dos. Y las reglas que centran
la fila coja de la rejilla de seis columnas no valen aqui —cuentan de tres
en tres—, asi que se anulan y la ultima suelta ocupa las dos columnas. */
.tarjetas-junto-foto{grid-template-columns:repeat(2,1fr)}
.tarjetas-junto-foto > *,
.tarjetas-junto-foto > *:nth-child(3n+1):nth-last-child(2),
.tarjetas-junto-foto > *:nth-child(3n+1):last-child{grid-column:auto}
.tarjetas-junto-foto > *:nth-child(odd):last-child{grid-column:1 / -1}
}
.enlace-cita{
font-family:var(--tipo-titulo);font-weight:700;font-size:.78rem;letter-spacing:.06em;
text-transform:uppercase;text-decoration:none;color:var(--titulos);
border-bottom:1px solid var(--titulos);align-self:flex-start;padding-bottom:2px;
}
/* Dorado de la casa al pasar, como los botones (David, 17-08). */
.enlace-cita:hover,.enlace-cita:focus-visible{color:#c7a15a;border-bottom-color:#c7a15a}
.cuerpo{max-width:900px;margin:0 auto}
.cuerpo-con-foto{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:start;max-width:1000px}
.cuerpo-con-foto img{width:100%}
.cierre{background:var(--medio)}
.cierre .btn{margin-top:8px}
/* ---------- galería y marcas ---------- */
.galeria{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover}
/* Las siete marcas en una sola fila (David, 28-08-2026: «¿no puedes ponerlo
todo en una fila? están demasiado grandes»). Rejilla de siete columnas
iguales y no flex: con flex, siete anchos fijos o no caben o se parten en
una fila huerfana de dos. Aqui cada logo ocupa su septima parte y encoge con
la pantalla, hasta que a 900px ya no se leen y se reparten en dos filas. */
.marcas{
list-style:none;padding:0;margin:8px 0 0;
display:grid;grid-template-columns:repeat(7,1fr);
align-items:center;justify-items:center;
gap:26px 30px;
}
.marcas img{
width:100%;max-width:118px;height:auto;
filter:grayscale(1);opacity:.65;
transition:filter .3s,opacity .3s;
}
.marcas li:hover img{filter:grayscale(0);opacity:1}
/* En pantalla pequena, tres por fila: siete marcas dan 3+3+1 y la que sobra
se iria a la izquierda como si faltara algo. La regla la manda a la columna
del medio, que es donde parece puesta a proposito. Con cuatro columnas no
habria arreglo equivalente: la fila de tres quedaria descuadrada a la
izquierda con la cuarta columna vacia. */
@media (max-width:900px){
.marcas{grid-template-columns:repeat(3,1fr);gap:26px 30px}
.marcas li:last-child:nth-child(3n+1){grid-column:2}
}
@media (max-width:560px){.marcas{gap:22px 20px}.marcas img{max-width:104px}}
/* ---------- pie ---------- */
.pie{background:#373737;color:#e8e8e8;margin-top:0;padding:56px 0 0;font-size:.88rem;letter-spacing:.02em}
.pie a{text-decoration:none}
.pie a:hover{text-decoration:underline}
/* Tres bloques repartidos de orilla a orilla. Con tres columnas iguales el
ultimo se quedaba pegado a la izquierda de la suya y sobraba medio pie vacio
a la derecha; asi cada bloque ocupa lo suyo y el hueco se reparte entre los
tres. */
.pie-datos{
display:flex;flex-wrap:wrap;justify-content:space-between;
gap:36px;padding-bottom:40px;
}
.pie-titulo{
font-family:var(--tipo-titulo);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
color:#fff;margin-bottom:14px;font-size:.85rem;
}
.pie p{margin:0 0 9px;line-height:1.6}
/* Horario: los dias y las horas eran un float a la derecha de la columna, que
mide un tercio del pie. Quedaban separadisimos entre si y las horas pegadas
a «Informacion». Ahora la pareja va en su propio ancho y el hueco que se ve
entre bloques es el del pie, no el sobrante de la columna. */
.pie-horario{max-width:260px}
.pie-horario p{display:flex;justify-content:space-between;gap:20px}
.pie-horario .pie-titulo{display:block}
.pie-horas{color:#bdbdbd;white-space:nowrap}
.pie-abajo{border-top:1px solid #4b4b4b;padding:18px 20px;text-align:center;color:#bdbdbd;font-size:.82rem}
/* ---------- cabecera plegada ----------
Corte propio (1280px) y no el de 900 del resto del diseño: con el menú a 18px
—el tamaño de la web actual— la fila logo + menú + botón necesita ~1.280px. */
@media (max-width:1280px){
/* El carrito NO se esconde en movil: es donde mas se compra. La hamburguesa
lleva el margin-left:auto que empuja a los dos a la derecha, y el carrito
va justo detras — si los dos llevan «auto» se reparten el hueco y quedan
separados por media pantalla. */
.menu-boton{display:flex;margin-left:0;order:2}
.cabecera-compra{margin-left:auto;order:1}
.cabecera-cita{display:none}
.menu{
display:none;position:absolute;top:100%;left:0;right:0;
background:#fff;border-bottom:1px solid var(--linea);
padding:12px 20px 20px;
}
.menu.abierto{display:block}
.menu > ul{flex-direction:column;gap:0;justify-content:flex-start}
.menu > ul > li{border-bottom:1px solid var(--linea)}
.submenu{
position:static;display:none;border:0;box-shadow:none;
padding:0 0 8px 14px;min-width:0;
}
/* Plegado no hay columnas: los tres mundos van uno debajo de otro y el panel
deja de flotar, o se quedaria centrado a mitad de pantalla. */
.megamenu{
flex-direction:column;gap:0;transform:none;left:auto;
padding:0 0 8px 14px;
}
.megamenu-col{min-width:0}
.megamenu-titulo{padding:11px 4px;margin-bottom:0;border-bottom:0}
.megamenu-titulo::after{content:'\25B8';margin-left:7px;font-size:.8em;opacity:.75}
.megamenu-col ul{display:none}
.megamenu-col.desplegado ul{display:block}
.megamenu li a{padding:9px 4px 9px 14px}
.menu a{padding:13px 4px}
.submenu a{padding:10px 4px}
.con-hijos:hover > a{background:none}
.con-hijos.desplegado .submenu{display:flex}
.con-hijos:hover .submenu{display:none}
.con-hijos.desplegado:hover .submenu{display:flex}
}
/* ---------- móvil ---------- */
@media (max-width:900px){
.rejilla{grid-template-columns:repeat(2,1fr)}
.rejilla-portada{grid-template-columns:repeat(2,1fr)}
.bloque-grande{grid-column:span 2;grid-row:span 1;aspect-ratio:16/10}
/* A 2 columnas el ancho ocupa la fila entera y ya no tiene cuadrados al lado
que le marquen la altura: se la damos nosotros o se queda en un hilo. */
.bloque-ancho{aspect-ratio:16/10}
.rejilla-simple{grid-template-columns:repeat(4,1fr)}
.rejilla-simple > *:nth-child(3n+1):nth-last-child(2),
.rejilla-simple > *:nth-child(3n+1):last-child{grid-column:span 2}
.rejilla-simple > *:nth-child(2n+1):last-child{grid-column:2 / span 2}
/* 2 columnas = cuatro medias; misma idea que arriba para centrar la coja */
.tarjetas{grid-template-columns:repeat(4,1fr)}
.tarjetas > *:nth-child(3n+1):nth-last-child(2),
.tarjetas > *:nth-child(3n+1):last-child{grid-column:span 2}
.tarjetas > *:nth-child(2n+1):last-child{grid-column:2 / span 2}
.presentacion{grid-template-columns:1fr;gap:22px;min-height:0}
.presentacion img{height:auto;aspect-ratio:16/9;min-height:0;max-height:220px}
.cuerpo-con-foto{grid-template-columns:1fr}
.galeria{grid-template-columns:repeat(3,1fr)}
.pie-datos{flex-direction:column;gap:28px}
.seccion{padding:46px 0}
.portada-fotos{aspect-ratio:1/1} /* 22-08: con el eslogan dentro, el 4/3 dejaba la foto en 293 px y el texto la comia entera */
}
@media (max-width:560px){
.tarjetas{grid-template-columns:1fr}
.tarjetas > *,
.tarjetas > *:nth-child(2n+1):last-child,
.tarjetas > *:nth-child(3n+1):nth-last-child(2),
.tarjetas > *:nth-child(3n+1):last-child{grid-column:auto}
.rejilla{grid-template-columns:1fr}
.rejilla-portada{grid-template-columns:1fr}
/* A una columna el grande dejaba de ser grande: se quedaba con el 16/10 que
hereda de arriba (350x219) mientras los pequenos son cuadrados (350x350),
asi que el servicio ancla acababa siendo el bloque MAS pequeno de la
portada — justo al reves de lo que se buscaba, y en el sitio donde mas
gente mira. Se le da formato vertical para que siga mandando. El mismo
arreglo que ya lleva .bloque-ancho aqui debajo. */
.bloque-grande{grid-column:span 1;aspect-ratio:4/5}
.bloque-ancho{grid-column:span 1;aspect-ratio:1}
.vale{padding:30px 20px}
.vale-campos,.vale-entregas,.vale-caminos,.vale-servicios{grid-template-columns:1fr}
.guia-tarjeta{flex-basis:100%;max-width:none} /* una por fila en el movil */
.prod-lista{grid-template-columns:1fr}
.prod-ancha{grid-template-columns:1fr}
.compra-fila{grid-template-columns:78px 1fr auto;grid-template-areas:'foto datos quitar' 'foto cantidad importe';row-gap:10px}
/* Botones mas grandes para el dedo: con 34 px se falla y se acaba quitando
una unidad sin querer. */
.compra-cantidad button{width:42px;height:42px;font-size:1.15rem}
.compra-quitar{padding:6px 4px;font-size:1.5rem}
.compra-fila img{width:78px;grid-area:foto}
.compra-datos{grid-area:datos}
.compra-cantidad{grid-area:cantidad}
.compra-importe{grid-area:importe;text-align:right}
.compra-quitar{grid-area:quitar;justify-self:end}
.prod-ancha img{min-height:0;aspect-ratio:3/2}
.prod-ancha-texto{padding:24px 22px}
.carrusel-fotos{aspect-ratio:4/3;max-height:320px}
.carrusel-texto{padding:24px 22px}
.vale-opciones .vale-opcion{flex:1 1 44%}
.vale-importe{min-width:0;width:100%}
.rejilla-simple{grid-template-columns:1fr}
.rejilla-simple > *,
.rejilla-simple > *:nth-child(2n+1):last-child,
.rejilla-simple > *:nth-child(3n+1):nth-last-child(2),
.rejilla-simple > *:nth-child(3n+1):last-child{grid-column:auto}
.btn-linea{margin-left:0;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
}
/* ---------- aviso de cookies (solo aparece si sitio.cookies.activo = true) ---------- */
.cookies[hidden]{display:none}
.cookies{
position:fixed;left:16px;right:16px;bottom:16px;z-index:80;
max-width:760px;margin:0 auto;
background:#fff;border:1px solid var(--linea);
box-shadow:0 8px 40px rgba(0,0,0,.18);
padding:22px 24px;
display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
}
.cookies p{margin:0;flex:1;min-width:260px;font-size:.85rem;line-height:1.6}
.cookies-botones{display:flex;gap:10px;flex-wrap:wrap}
.cookies .btn{padding:10px 22px;font-size:.78rem}
.cookies .btn-linea{margin-left:0}
@media (max-width:560px){
.cookies{padding:18px}
.cookies-botones{width:100%}
.cookies .btn{flex:1;text-align:center}
}
/* ---------- figura flotada, como en la web actual ---------- */
/* La original la mete en un con float:right de 435px y el texto la envuelve */
.cuerpo-pagina{display:flow-root} /* contiene la figura flotada sin clearfix */
.figura{
float:right;
width:436px;max-width:45%;
margin:20px 0 40px 44px;
}
.figura img{width:100%}
.figura figcaption{
font-size:.8rem;color:var(--apagado);
margin-top:8px;letter-spacing:.02em;
}
.firma{display:block;margin-top:30px;line-height:1.9}
@media (max-width:700px){
.figura{float:none;width:100%;max-width:none;margin:26px 0 30px}
/* En /contacto/ la foto de cabecera se ve SOLO en escritorio (David, 22-08:
«si quieres no la pongas para movil, me parece buena idea para hacerlo mas
comodo»). Aqui se viene a escribir o a llamar, y 280 px de foto empujan el
formulario fuera de la primera pantalla. Se oculta la imagen, no la banda:
el titulo se queda sobre el fondo oscuro, como estaba antes. */
.pag-contacto .cabecera-pagina img{display:none}
}
/* nota interna visible solo en la web de pruebas */
.pendiente{display:block;clear:both;margin-top:26px;padding:12px 16px;background:#fffbe6;border-left:3px solid #d9c77a;font-size:.85rem;color:#6b6042}
/* ================= ESTRUCTURA NUEVA (25-07-2026) ================= */
/* ---------- los 3 mundos ---------- */
.mundos{display:grid;gap:30px}
.mundo{
display:grid;grid-template-columns:1fr 1fr;
align-items:center;gap:48px;
}
.mundo:nth-child(even) .mundo-foto{order:2}
.mundo-foto{display:block;overflow:hidden;background:#111}
.mundo-foto img{
width:100%;aspect-ratio:4/3;object-fit:cover;
transition:transform .6s ease,opacity .3s;
}
.mundo-foto:hover img{transform:scale(1.05);opacity:.85}
.mundo-texto h2{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:.5em}
.mundo-texto h2 a{text-decoration:none}
.mundo-texto h2 a:hover{color:#000}
.mundo-texto ul{
list-style:none;padding:0;margin:0 0 1.4em;
display:flex;flex-wrap:wrap;gap:8px 10px;
}
.mundo-texto ul li{
border:1px solid var(--linea);
padding:5px 13px;font-size:.78rem;
letter-spacing:.02em;color:var(--apagado);
}
/* ---------- pilares ---------- */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;max-width:1100px;margin:0 auto}
.pilar{text-align:center}
.pilar h3{font-size:1rem;margin-bottom:.8em}
.pilar h3::before{
content:'◆';display:block;color:var(--apagado);
font-size:.7rem;margin-bottom:14px;letter-spacing:0;
}
.pilar p{font-size:.95rem;margin:0}
/* ---------- promociones ---------- */
.presentacion-invertida{max-width:1050px;grid-template-columns:1fr minmax(0,320px)}
.presentacion-invertida img{order:2}
.promo .presentacion{align-items:center}
/* ---------- visítanos ---------- */
.visita{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto}
/* Las tres cajas se estiran a la misma altura y la accion (Como llegar / el
telefono) se pega abajo con margin-top:auto, para que queden alineadas
aunque el texto de arriba ocupe distinto. */
.visita-caja{
display:flex;flex-direction:column;
background:var(--suave);
border:1px solid var(--linea);
padding:34px 30px 30px;
text-align:center;
}
.visita-icono{
width:26px;height:26px;margin:0 auto 14px;
fill:none;stroke:var(--apagado);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;
}
.visita h3{font-size:.95rem;margin:0 0 .9em}
/* Mismo cuerpo que la tabla de horario de la caja de al lado, o una columna se
ve mas grande que la otra. Y asi la direccion parte por la coma. */
.visita-dato{margin:0 0 24px;font-size:.92rem}
/* align-self:center porque .enlace-cita viene con flex-start y aqui la caja
va centrada; si no, el subrayado se queda pegado a la izquierda. */
.visita-accion{margin-top:auto;align-self:center}
/* El telefono va sin recuadro: el bloque negro ensuciaba la tarjeta y ademas
descuadraba con el «Como llegar» de la primera, que es un enlace subrayado.
Aqui el numero manda por tamano, no por color. */
.visita-telefono{
font-family:var(--tipo-titulo);font-weight:500;
font-size:1.45rem;letter-spacing:.02em;
color:var(--titulos);text-decoration:none;white-space:nowrap;
border-bottom:1px solid var(--linea);padding-bottom:6px;
transition:border-color .2s,color .2s;
}
.visita-telefono:hover,.visita-telefono:focus-visible{color:#000;border-bottom-color:var(--titulos)}
.tabla-horario{border-collapse:collapse;width:100%;font-size:.92rem;margin-bottom:4px}
.tabla-horario th{text-align:left;font-weight:400;padding:5px 0}
.tabla-horario td{text-align:right;color:var(--apagado);padding:5px 0}
/* ---------- barra fija de cita (solo móvil) ---------- */
.cita-fija{
display:none;
position:fixed;left:0;right:0;bottom:0;z-index:70;
background:var(--boton);color:#fff;text-decoration:none;text-align:center;
padding:15px 12px;
font-family:var(--tipo-titulo);font-weight:700;
font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
box-shadow:0 -2px 14px rgba(0,0,0,.18);
}
.cita-fija:hover{background:#000}
@media (max-width:900px){
.mundo{grid-template-columns:1fr;gap:20px}
.mundo:nth-child(even) .mundo-foto{order:0}
.mundos{gap:52px}
.pilares{grid-template-columns:1fr;gap:36px}
.visita{grid-template-columns:1fr;gap:34px}
.presentacion-invertida img{order:0}
.cita-fija{display:block}
body{padding-bottom:56px} /* hueco para la barra fija */
.cookies{bottom:70px}
.barra-compra,.barra-carrito{
position:fixed;left:0;right:0;bottom:0;z-index:75;
display:flex;align-items:center;gap:14px;
padding:11px 16px;
padding-bottom:calc(11px + env(safe-area-inset-bottom));
background:#fff;border-top:1px solid var(--linea);
box-shadow:0 -3px 18px rgba(0,0,0,.14);
}
.barra-compra[hidden],.barra-carrito[hidden]{display:none}
.barra-compra-precio{
font-family:var(--tipo-titulo);font-size:1.5rem;
color:var(--titulos);white-space:nowrap;
}
.barra-compra .btn{flex:1;text-align:center;padding:15px 10px}
.barra-carrito{
justify-content:space-between;text-decoration:none;
background:var(--boton);color:#fff;border-top:0;
font-family:var(--tipo-titulo);font-weight:700;
font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
}
/* El color va a mano: la regla general de lo pinta oscuro y sobre
la barra negra el importe se volvia ilegible. */
.barra-carrito strong{font-size:1.2rem;letter-spacing:.02em;color:#fff}
/* Con una barra de la tienda abajo, la de «pide cita» sobra: dos barras fijas
no caben y en la tienda la que importa es la de comprar. */
body.con-barra .cita-fija,
body.en-compra .cita-fija{display:none}
body.con-barra{padding-bottom:82px}
body.en-compra{padding-bottom:20px}
/* En el telefono el boton de pagar ocupa toda la linea: es la accion de la
pantalla, no una opcion mas. */
.vale-pago .btn{display:block;width:100%;text-align:center;padding:17px 12px}
/* El «añadido» pasa a ser un mensaje flotante encima de la barra: en su sitio
de siempre cae detrás de ella y no se llega a leer. */
.anadir-hecho{
position:fixed;left:12px;right:12px;bottom:84px;z-index:76;
margin:0;padding:14px 16px;
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--titulos);color:#fff;font-size:.92rem;
box-shadow:0 6px 24px rgba(0,0,0,.28);
}
.anadir-hecho[hidden]{display:none}
.anadir-hecho a{color:#fff}
/* Sobre el fondo oscuro del aviso, el filete oscuro del boton no se veria. */
.anadir-pagar{border-color:#fff;color:#fff;padding:8px 16px;white-space:nowrap}
.anadir-pagar:hover,.anadir-pagar:focus-visible{background:#fff;border-color:#fff;color:var(--titulos)}
}
/* ---------- tarifas ---------- */
.tarifas{width:100%;border-collapse:collapse;margin:0 0 44px;max-width:820px}
.tarifas th{
text-align:left;font-weight:400;padding:14px 0;
border-bottom:1px solid var(--linea);
}
.tarifas th a{text-decoration:none}
.tarifas th a:hover{text-decoration:underline}
.tarifa-precio{
text-align:right;padding:14px 0;color:var(--apagado);
border-bottom:1px solid var(--linea);white-space:nowrap;
font-size:.9rem;
}
/* ---- SEO local: barrio y bloque «Como llegar» (20-08-2026) ----------------
El barrio va apagado y algo mas pequeno: es un dato de apoyo bajo la
direccion, no debe competir con ella.
OJO con el nombre: .llegar y .llegar-* estaban libres (comprobado). NO
reutilizar .banda ni .visita para el contenedor — .visita ya es la rejilla
de 3 columnas y aqui solo envuelve. */
.visita-barrio{color:var(--apagado);font-size:.86rem}
.llegar{text-align:center}
.llegar h2{margin:0 0 .5em}
.llegar-intro{max-width:640px;margin:0 auto 34px;color:var(--apagado)}
.llegar-mapa{margin:28px 0 0}
/* 4 tarjetas (coche, bus, tren, metro) en la rejilla de .visita, que es de 3
columnas: la cuarta quedaria suelta en una fila para ella sola. Aqui se pasa
a 2x2. Si algun dia son 3 o 6 tarjetas, revisar esta regla. */
.llegar .visita{grid-template-columns:repeat(2,1fr);max-width:820px}
@media (max-width:820px){
/* .visita ya se apila sola en movil; aqui solo se recorta el aire */
.llegar-intro{margin-bottom:24px}
}
/* «Te puede interesar» al pie de las paginas de servicio y «Otras guias» al pie
de cada guia (30-08-2026). Reutiliza las tarjetas del indice de guias; solo
cambia el titulo, mas pequeno que un eslogan porque no es el tema de la
pagina, y el margen de arriba de la lista, que aqui no tiene banda encima. */
.relacionados{padding-top:8px}
.relacionados-titulo{
font-size:1.15rem;text-align:center;margin:40px 0 0;letter-spacing:.02em;
}
.relacionados-lista{margin-top:22px}
/* «Pruébalo» en el servicio y enlace de vuelta en la ficha del bono (14-09-2026) */
.pruebalo{padding-bottom:0}
.pruebalo-lista{margin-top:22px;grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:center}
.bono-servicio{margin:-10px 0 28px}
.relacionados-lista .guia-entradilla{
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}