/* ========================================================= Atelier de Beauté — Hoja de estilos --------------------------------------------------------- Índice: 1. Variables y reset 2. Tipografía base 3. Utilidades (fil, skip link) 4. Nav + menú hamburguesa 5. Hero 6. Estado (abierto / cerrado) 7. Secciones genéricas 8. Soins (servicios) 9. Vitrina (galería: passe-partout y óvalos) 10. Mots (reseñas) 11. Rendez-vous (horario y contacto) 12. Formulario + mapa 13. FAQ 14. Flotantes 15. Footer 16. Páginas de texto legal 17. Consentimiento en el formulario de cita 18. Mapa con carga diferida por consentimiento 19. Banner de cookies 20. Enlaces legales del footer 21. Utilidad .vh (solo lectores de pantalla) 22. Nav: utilidades 23. Tarifas 24. (libre — fusionada en la 9) 25. Lightbox de la galería 26. Quiénes somos 27. Cuidados post-servicio 28. Bonos y tarjetas regalo 29. Reseñas: firma y enlace a Google 30. Reserva online 31. Contacto: cómo llegar + ayuda del formulario 32. Portada de página interior 33. Enlace «ver más» a la página de detalle 34. Vídeo de fondo del hero 35. Carta compacta de la home 36. Servicios: pestañas y fichas editoriales 37. Comparador de acabados 38. Asistente flotante «Te ayudo a elegir» 39. Redes en la barra de navegación ========================================================= */ /* ========================================================= 1. VARIABLES Y RESET --------------------------------------------------------- Dos familias de tokens: · Tonos de marca (--lino, --dorado, --rose): SOLO para bordes, puntos, líneas y decoración, donde WCAG 1.4.3 no aplica. NO usar como color de texto. · Tonos de texto (--lino-txt, --dorado-txt, --rose-txt, --verde-txt): mismo matiz, oscurecidos lo justo para superar 4.5:1 sobre --porcelana, --poudre y blanco. Ratios medidos (fórmula de luminancia relativa WCAG 2.1): --lino-txt #6D5E57 → porcelana 5.82 · poudre 4.51 · blanco 6.20 --dorado-txt #765D35 → porcelana 5.82 · poudre 4.52 · blanco 6.20 --rose-txt #A75E53 → porcelana 4.51 · blanco 4.81 --verde-txt #4E7551 → porcelana 4.94 ========================================================= */ :root{ color-scheme:light; --porcelana:#FBF7F4; --poudre:#EBD8D3; --rose:#C99A93; --ciruela:#4A2E33; --lino:#A99A93; --dorado:#B8965F; /* Variantes accesibles para texto (ver ratios arriba) */ --lino-txt:#6D5E57; --dorado-txt:#765D35; --rose-txt:#A75E53; --verde-txt:#4E7551; /* --- Tokens extraídos de valores antes escritos a mano --- Existían ya en la hoja como literales repetidos (#fff, #6d5a57, #F0E4DF…). Se convierten en tokens para poder reajustar la paleta desde un solo sitio. Ratios medidos sobre los fondos reales donde se usan: --gris-txt #6D5A57 → porcelana 6.06 · superficie 6.53 · poudre 4.70 --pend-txt #5A4212 → --pend-fondo 7.75 */ --superficie:#FFFFFF; /* tarjetas, campos de formulario */ --borde:#F0E4DF; /* filetes y bordes de tarjeta */ --borde-suave:#F3E9E5; /* separadores internos de lista */ --gris-txt:#6D5A57; /* párrafo secundario sobre superficie */ --pend-fondo:#F7E7C8; /* resalte de dato pendiente */ --pend-txt:#5A4212; --sombra:rgba(74,46,51,.28); /* Fondos translúcidos de la nav sticky */ --nav-fondo:rgba(251,247,244,.92); --nav-panel:rgba(251,247,244,.98); /* Degradados decorativos de óvalos y camafeos */ --deg-1a:#F8ECE8; --deg-1b:#EBD8D3; --deg-2a:#F3E0DA; --deg-2b:#E5CCC6; --deg-3a:#FAF1EC; --deg-3b:#EDD9CF; --deg-cameo:#F6E9E5; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* Las anclas no deben quedar tapadas por la nav sticky (~80px). */ :target,section[id],header[id],main[id]{scroll-margin-top:6rem} /* ========================================================= 2. TIPOGRAFÍA BASE ========================================================= */ body{background:var(--porcelana);color:var(--ciruela);font-family:'Jost',sans-serif;font-weight:300;line-height:1.7} ::selection{background:var(--poudre);color:var(--ciruela)} /* El foco visible debe cubrir TODOS los elementos enfocables, no solo . */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{outline:2px solid var(--rose-txt);outline-offset:3px} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } /* ========================================================= 3. UTILIDADES ========================================================= */ .fil{height:1px;background:linear-gradient(90deg,transparent,var(--rose),transparent);max-width:520px;margin:0 auto} /* Skip link: oculto hasta recibir el foco por teclado. */ .saltar{position:absolute;left:1rem;top:-100px;z-index:200; background:var(--ciruela);color:var(--porcelana); font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;text-decoration:none; padding:.85rem 1.8rem;border-radius:100px; transition:top .2s} .saltar:focus{top:1rem} /* ========================================================= 4. NAV + MENÚ HAMBURGUESA ========================================================= */ nav{display:flex;justify-content:space-between;align-items:center;padding:1.4rem clamp(1.4rem,6vw,5rem);position:sticky;top:0;background:var(--nav-fondo);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:50} .marque{font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:500;letter-spacing:.05em;color:var(--ciruela);text-decoration:none} .marque i{font-style:italic;color:var(--rose)} nav ul{display:flex;gap:2.4rem;list-style:none;align-items:center} nav a{color:var(--lino-txt);text-decoration:none;font-size:.78rem;text-transform:uppercase;letter-spacing:.28em;transition:color .25s} nav a:hover{color:var(--ciruela)} .rdv{border:1px solid var(--ciruela);color:var(--ciruela)!important;padding:.55rem 1.4rem;border-radius:100px} .rdv:hover{background:var(--ciruela);color:var(--porcelana)!important} /* Botón hamburguesa — mismo lenguaje que .rdv: píldora de 100px, trazo fino en ciruela. Solo aparece en móvil y solo si hay JS. */ .burger{display:none;width:46px;height:46px;flex:0 0 auto; align-items:center;justify-content:center; background:transparent;border:1px solid var(--ciruela);border-radius:100px; cursor:pointer;transition:background .25s} .burger:hover{background:var(--poudre)} .burger-lineas{display:block;width:18px} .burger-lineas span{display:block;height:1px;background:var(--ciruela);border-radius:1px; transition:transform .25s,opacity .2s} .burger-lineas span+span{margin-top:5px} /* Estado abierto: las tres líneas se convierten en aspa. */ .burger[aria-expanded="true"] .burger-lineas span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] .burger-lineas span:nth-child(2){opacity:0} .burger[aria-expanded="true"] .burger-lineas span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* Con «Inicio» en el menú son seis enlaces más la píldora de cita. Entre tablet y portátil pequeño la fila se aprieta un poco para no desbordar antes de llegar a la hamburguesa (760px). */ @media(min-width:761px) and (max-width:1150px){ nav ul{gap:1.4rem} nav a{font-size:.74rem;letter-spacing:.18em} .rdv{padding:.5rem 1.05rem} } @media(max-width:760px){ /* Sin JS: la navegación se conserva y simplemente se envuelve en dos filas. Nunca desaparece (antes hacía display:none). */ nav{flex-wrap:wrap;row-gap:.9rem} nav ul{flex-wrap:wrap;justify-content:center;width:100%;gap:1rem 1.6rem} /* Con JS: hamburguesa + panel desplegable. */ .js .burger{display:inline-flex} .js nav ul{ display:none; position:absolute;top:100%;left:0;right:0;width:auto;margin:0; flex-direction:column;align-items:stretch;gap:0; padding:.4rem clamp(1.4rem,6vw,5rem) 1.6rem; background:var(--nav-panel); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid var(--poudre); box-shadow:0 26px 44px -30px rgba(74,46,51,.5) } .js nav.abierto ul{display:flex} .js nav ul li{border-bottom:1px solid var(--borde)} .js nav ul li:last-child{border-bottom:0} .js nav ul a{display:block;padding:1.05rem .2rem} .js nav ul .rdv{text-align:center;margin-top:1.1rem;padding:.9rem 1.4rem} } @media(prefers-reduced-motion:reduce){ .burger-lineas span{transition:none} } /* ========================================================= 5. HERO (con camafeo oval) ========================================================= */ .hero{text-align:center;padding:clamp(3rem,8vw,6rem) 1.4rem clamp(3.5rem,9vw,6.5rem)} .sur{font-size:.72rem;letter-spacing:.45em;text-transform:uppercase;color:var(--dorado-txt);display:block;margin-bottom:2rem} h1{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2.8rem,7.5vw,5.6rem);line-height:1.06;letter-spacing:.01em} h1 i{font-style:italic;color:var(--rose-txt)} .hero p.lead{max-width:52ch;margin:1.8rem auto 0;color:var(--lino-txt);font-size:1.02rem} .cameo{width:min(240px,58vw);aspect-ratio:3/4;margin:3rem auto 0;border-radius:50%/38%;border:1px solid var(--rose);position:relative;display:flex;align-items:center;justify-content:center;max-width:100%;background: radial-gradient(ellipse at 50% 30%, var(--deg-cameo), var(--poudre));animation:breathe 7s ease-in-out infinite} .cameo::before{content:"";position:absolute;inset:9px;border:1px solid rgba(184,150,95,.5);border-radius:50%/38%} .cameo span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.35rem;color:var(--ciruela);text-align:center;line-height:1.4;padding:0 1.4rem} @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}} @media(prefers-reduced-motion:reduce){.cameo{animation:none}.soin,.mot{opacity:1!important;transform:none!important;transition:none!important}} .hero-actions{margin-top:2.8rem;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap} .btn{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;padding:.95rem 2.4rem;border-radius:100px;transition:all .25s} .btn-plein{background:var(--ciruela);color:var(--porcelana)} .btn-plein:hover{background:var(--rose-txt)} .btn-vide{border:1px solid var(--rose);color:var(--ciruela)} .btn-vide:hover{background:var(--poudre)} /* ========================================================= 6. ESTADO (badge abierto / cerrado) El badge está en el HTML con clase neutra; JS solo cambia clase y texto, por lo que no provoca salto de layout. ========================================================= */ .estado{display:inline-flex;align-items:center;gap:.55rem;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;margin-top:1.4rem;color:var(--lino-txt);min-height:1.6em} .estado .dot{width:8px;height:8px;border-radius:50%;background:var(--lino);flex:0 0 auto} .estado.on{color:var(--verde-txt)}.estado.on .dot{background:var(--verde-txt)} .estado.off{color:var(--rose-txt)}.estado.off .dot{background:var(--rose-txt)} /* ========================================================= 7. SECCIONES GENÉRICAS ========================================================= */ section{padding:clamp(3.5rem,8vw,6.5rem) clamp(1.4rem,6vw,5rem)} .sec-sur{font-size:.7rem;letter-spacing:.45em;text-transform:uppercase;color:var(--dorado-txt);display:block;text-align:center;margin-bottom:1rem} h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2rem,5vw,3.2rem);text-align:center;margin-bottom:.6rem} .sec-note{text-align:center;color:var(--lino-txt);max-width:50ch;margin:0 auto 3.4rem} /* ========================================================= 8. SOINS (servicios) El contenido solo se oculta si hay JS (clase .js en ). Sin JS todo es visible desde el primer paint. ========================================================= */ .soins{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;max-width:1100px;margin:0 auto} .soin{text-align:center;padding:2.6rem 1.8rem;background:var(--superficie);border-radius:180px 180px 18px 18px;border:1px solid var(--borde);transition:opacity .6s,transform .6s,box-shadow .3s} .js .soin{opacity:0;transform:translateY(20px)} .js .soin.vis{opacity:1;transform:none} .soin:hover{box-shadow:0 18px 40px -18px rgba(74,46,51,.18)} .soin .num{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--rose-txt);font-size:1.1rem} .soin h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.7rem;margin:.6rem 0 1.1rem} .soin ul{list-style:none;color:var(--lino-txt);font-size:.93rem} .soin li{padding:.42rem 0} .soin li+li{border-top:1px solid var(--borde-suave)} @media(max-width:880px){.soins{grid-template-columns:1fr;max-width:420px}} /* ========================================================= 9. VITRINA (galería de trabajos) --------------------------------------------------------- Dos variantes sobre EL MISMO marcado: figure.vit-item > a.vit-link > picture > img El lleva display:contents, así que quien hereda la caja es el , hijo directo del enlace (variante marco) o del (variante óvalo). · .vitrina--marco → passe-partout escalonado. Home. Respeta el cuadrado original de la foto: no recorta nada. · .vitrina--ovalo → camafeo ovalado. trabajos.html. Recorta a 3/4 vertical; repite el óvalo de "Quiénes somos". IMPORTANTE: el tamaño del se define SIEMPRE en una de las dos variantes. Un .vitrina sin variante deja la imagen a su tamaño intrínseco (1200 px) y desborda la rejilla. ========================================================= */ .vitrina{display:grid;max-width:1100px;margin:0 auto} .vitrina figure{margin:0} .vit-link{display:block;text-decoration:none;cursor:zoom-in} .vit-link picture{display:contents} .vit-link:focus-visible{outline:2px solid var(--rose-txt);outline-offset:6px} /* --- 9.a PASSE-PARTOUT (Home) ------------------------------- La foto va montada como un cuadro: marco blanco por tres lados y el pie ocupando el cuarto, como el cartón de un passe-partout de verdad. ---------------------------------- */ .vitrina--marco{grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(1.5rem,4vw,2.5rem);align-items:start;max-width:1060px} .vitrina--marco figure{background:var(--superficie);padding:14px 14px 0; border:1px solid var(--borde);box-shadow:0 14px 34px -22px var(--sombra); transition:transform .4s,box-shadow .4s} .vitrina--marco figure:hover{transform:translateY(-6px);box-shadow:0 22px 44px -22px var(--sombra)} .vitrina--marco .vit-link{overflow:hidden} .vitrina--marco .vit-link img{display:block;width:100%;height:auto; aspect-ratio:1/1;object-fit:cover;transition:transform .6s} .vitrina--marco .vit-link:hover img{transform:scale(1.04)} .vitrina--marco figcaption{padding:1rem .2rem 1.1rem;text-align:center; font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1rem;color:var(--ciruela)} /* El escalonado solo cuando de verdad hay tres columnas: apilado en una sola, ese margen se leería como un hueco suelto. */ @media(min-width:820px){ .vitrina--marco figure:nth-child(2){margin-top:2.75rem} } /* --- 9.b ÓVALOS (trabajos.html) ----------------------------- */ .vitrina--ovalo{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(1.5rem,4vw,2.75rem);max-width:1000px} .vitrina--ovalo .vit-link{border-radius:50%/38%} .vitrina--ovalo .ovalo{position:relative;display:block;aspect-ratio:3/4; border-radius:50%/38%;overflow:hidden;border:1px solid var(--rose); background:radial-gradient(ellipse at 50% 40%,var(--deg-1a),var(--deg-1b)); transition:transform .4s} /* Filete dorado interior. Va en ::after para no pisar el degradado de reserva del propio óvalo. */ .vitrina--ovalo .ovalo::after{content:"";position:absolute;inset:8px; border:1px solid rgba(184,150,95,.45);border-radius:50%/38%;pointer-events:none;z-index:2} .vitrina--ovalo .ovalo img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} .vitrina--ovalo .vit-link:hover .ovalo{transform:scale(1.02)} .vitrina--ovalo figcaption{margin-top:.9rem;text-align:center; font-family:'Jost',sans-serif;font-size:.66rem;letter-spacing:.28em; text-transform:uppercase;color:var(--lino-txt)} @media(prefers-reduced-motion:reduce){ .vitrina--marco figure,.vitrina--marco .vit-link img,.vitrina--ovalo .ovalo{transition:none} .vitrina--marco figure:hover,.vitrina--marco .vit-link:hover img, .vitrina--ovalo .vit-link:hover .ovalo{transform:none} } /* ========================================================= 10. MOTS (reseñas) — fondo --poudre ========================================================= */ .mots{background:var(--poudre)} .mots h2,.mots .sec-sur{color:var(--ciruela)} .mots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;max-width:1100px;margin:0 auto} .mot{background:var(--porcelana);padding:2.4rem 2rem;border-radius:14px;text-align:center;transition:opacity .6s,transform .6s} .js .mot{opacity:0;transform:translateY(20px)} .js .mot.vis{opacity:1;transform:none} .mot::before{content:"“";font-family:'Cormorant Garamond',serif;font-size:3rem;color:var(--rose);line-height:.4;display:block;margin-bottom:1rem} .mot p{font-size:.95rem;color:var(--gris-txt)} .mot .cinq{margin-top:1.2rem;color:var(--dorado-txt);letter-spacing:.35em;font-size:.8rem} /* ========================================================= 11. RENDEZ-VOUS (horario y contacto) ========================================================= */ .rdv-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:1000px;margin:0 auto;align-items:start} .rdv-grid h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.5rem;margin-bottom:1.4rem} .horaires{list-style:none;font-size:.95rem} .horaires li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--borde)} .horaires .j{color:var(--lino-txt);text-transform:uppercase;font-size:.75rem;letter-spacing:.22em;padding-top:.2rem} .horaires .h{text-align:right} .horaires .ferme{color:var(--rose-txt);font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.05rem} .coord p{margin-bottom:1.1rem;color:var(--gris-txt);font-size:.98rem} .coord strong{display:block;font-weight:500;color:var(--ciruela);text-transform:uppercase;font-size:.72rem;letter-spacing:.28em;margin-bottom:.25rem} .coord a{color:var(--ciruela);text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:5px} @media(max-width:820px){.rdv-grid{grid-template-columns:1fr;gap:2.5rem}} /* ========================================================= 12. FORMULARIO + MAPA ========================================================= */ .fm-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:1050px;margin:0 auto} /* El formulario depende de JS para componer el mensaje de WhatsApp: sin JS se oculta y el