/* ==========================================================================
   Candora · styles.css
   Único CSS del sitio. Orden: 1) tipografías, 2) Lenis, 3) tokens, 4) base y componentes.
   Al cambiarlo, sube el ?v= del <link> en las 8 páginas.
   ========================================================================== */

/* ==================== 1. Tipografías ==================== */
/* Tipografías alojadas en assets/fonts (subconjunto latin de Google Fonts, licencia OFL).
   Sin peticiones a terceros. Los archivos de Cormorant y Jost son variables: un woff2 por estilo. */
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Mrs Saint Delafield"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/mrs-saint-delafield-latin.woff2") format("woff2");
}

/* Tipografías de reserva ajustadas al ancho de las definitivas. Mientras llega el woff2 el texto
   ocupa casi lo mismo, así que al cambiar de fuente los títulos no cambian de número de líneas
   (eso movía toda la página: CLS de 0,10 a 0,25 en la 404 y las legales). */
@font-face { font-family: "Cormorant Reserva"; font-style: normal; font-weight: 500 600; src: local("Times New Roman"), local("Times"); size-adjust: 97%; }
@font-face { font-family: "Cormorant Reserva"; font-style: italic; font-weight: 500 600; src: local("Times New Roman Italic"), local("Times New Roman Cursiva"), local("Times Italic"); size-adjust: 88%; }
@font-face { font-family: "Jost Reserva"; font-style: normal; font-weight: 400 500; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 94.5%; }

/* ==================== 2. Lenis (scroll suave) 1.3.26 ==================== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ==================== 3. Tokens de diseño ==================== */
/* Tokens de diseño de Candora. Única fuente de color, tipografía y espaciado. */
:root {
  /* Color: paleta aprobada (PROJECT-NOTES §2.1) */
  --cd-bg: #FFFDF7;
  --cd-beige: #F3EADC;
  --cd-nude: #DCC6AC;       /* huecos de imagen, tarjetas y bordes. Nunca bajo un título dorado */
  --cd-ink: #2F1D11;
  --cd-espresso: #5E4B3E;
  --cd-gold: #A67C52;       /* solo títulos grandes y decoración, sobre fondo o beige */
  --cd-gold-deep: #86623E;  /* precios y etiquetas pequeñas: 4,6:1 sobre beige, 5,4:1 sobre fondo */
  --cd-gold-soft: #DCBD95;  /* dorado sobre espresso: 4,61:1, AA también en etiquetas pequeñas */
  --cd-line: rgba(47, 29, 17, 0.14);
  --cd-line-on-dark: rgba(255, 253, 247, 0.2);
  /* Degradado del logo (medido en Logo.jpg). Solo para el brillo puntual del H1 */
  --cd-gold-shine: linear-gradient(100deg, #BA831C 0%, #FEC35F 50%, #E3AD43 100%);

  /* Tipografía */
  --cd-font-serif: "Cormorant Garamond", "Cormorant Reserva", "Times New Roman", serif;
  --cd-font-sans: "Jost", "Jost Reserva", "Helvetica Neue", Arial, sans-serif;
  --cd-font-script: "Mrs Saint Delafield", cursive;

  /* Escala tipográfica fluida, de 375 a 1440 px */
  --cd-text-h1: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --cd-text-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3.375rem);
  --cd-text-h3: clamp(1.5rem, 1.3rem + 0.85vw, 2.125rem);
  --cd-text-lead: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --cd-text-body: 1rem;
  --cd-text-small: 0.875rem;
  --cd-text-label: 0.75rem;
  --cd-text-price: 1.125rem;
  --cd-text-script: clamp(2.75rem, 2rem + 3.2vw, 5rem);

  --cd-leading-tight: 1.08;
  --cd-leading-title: 1.15;
  --cd-leading-body: 1.65;
  --cd-tracking-h1: 0.03em;
  --cd-tracking-title: 0.06em;
  --cd-tracking-label: 0.24em;

  /* Espaciado */
  --cd-space-1: 0.25rem;
  --cd-space-2: 0.5rem;
  --cd-space-3: 1rem;
  --cd-space-4: 1.5rem;
  --cd-space-5: 2.5rem;
  --cd-space-6: 4rem;
  --cd-space-section: clamp(4.5rem, 3rem + 6.5vw, 9rem);
  --cd-gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --cd-max: 76rem;

  --cd-radius: 2px;
  --cd-radius-pill: 999px;
  --cd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cd-header-h: 4.5rem;
}
/* Pantallas grandes: todo el sitio va en rem, así que subir la base escala a la vez tipografía,
   espacios y ancho máximo. El contenido no queda perdido en el centro a 1920 ni a 2560 px. */
@media (min-width: 1920px) { html { font-size: 112.5%; } }
@media (min-width: 2400px) { html { font-size: 125%; } }
/* Pantallas muy bajas (móvil en horizontal, zoom al 200 %): la cabecera ocupa menos alto */
@media (max-height: 480px) { :root { --cd-header-h: 3.5rem; } }

/* ==================== 4. Base y componentes ==================== */
/* Base y componentes compartidos por todas las páginas. Los valores salen de tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: lo que recibe el foco o un ancla no queda tapado por la cabecera pegada */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cd-header-h) + 1rem); }
body {
  margin: 0;
  background: var(--cd-bg);
  color: var(--cd-ink);
  font-family: var(--cd-font-sans);
  font-size: var(--cd-text-body);
  line-height: var(--cd-leading-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cd-gold-deep); outline-offset: 3px; }
/* Sobre espresso el dorado oscuro no se ve: el foco va en dorado claro */
.cd-footer :focus-visible, .cd-section--espresso :focus-visible { outline-color: var(--cd-gold-soft); }

/* ---------- Selección de texto, cursor de escritura y toque, en colores de marca ---------- */
/* Dorado claro con tinta: 9,1:1. Sobre espresso el bloque claro también se distingue (4,6:1 con el fondo). */
::selection { background: #DCBD95; color: #2F1D11; -webkit-text-fill-color: #2F1D11; text-shadow: none; }
html { caret-color: var(--cd-gold); }
/* Sin el destello gris/azul del navegador al tocar: el toque lo marca el propio elemento */
a, button { -webkit-tap-highlight-color: transparent; }
a:active, button:active { opacity: 0.8; }

/* ---------- Barra de scroll vertical de la página ---------- */
/* Solo la del documento (html): los chips con scroll horizontal siguen con la barra oculta. */
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: #F3EADC; }
html::-webkit-scrollbar-thumb { background: #A67C52; border-radius: 999px; border: 2px solid #F3EADC; }
html::-webkit-scrollbar-thumb:hover { background: #8A6540; }
html::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* Firefox no tiene ::-webkit-scrollbar. Va dentro de @supports porque en Chrome estas dos
   propiedades anularían los estilos de arriba. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: #A67C52 #F3EADC; scrollbar-width: thin; }
}

.cd-skip {
  position: absolute; left: var(--cd-space-3); top: -4rem; z-index: 110;
  padding: var(--cd-space-2) var(--cd-space-3); background: var(--cd-ink); color: var(--cd-bg);
}
.cd-skip:focus { top: var(--cd-space-3); }
/* Trozo de texto que no se puede partir entre dos líneas, p. ej. "(3D–6D)" */
.cd-nb { white-space: nowrap; }

/* El margen lateral respeta la muesca del iPhone en horizontal (viewport-fit=cover) */
.cd-wrap { width: 100%; max-width: var(--cd-max); margin-inline: auto; padding-left: max(var(--cd-gutter), env(safe-area-inset-left)); padding-right: max(var(--cd-gutter), env(safe-area-inset-right)); }
.cd-section { padding-block: var(--cd-space-section); }
.cd-section--beige { background: var(--cd-beige); }
.cd-section--espresso { background: var(--cd-espresso); color: var(--cd-bg); }

/* ---------- Tipografía ---------- */
.cd-h1, .cd-h2, .cd-h3 { font-family: var(--cd-font-serif); text-wrap: balance; }
/* H1 en dos colores, como el "GRAN APERTURA" del flyer: base recta en tinta + acento dorado en cursiva */
.cd-h1 {
  font-size: var(--cd-text-h1); font-weight: 600; line-height: var(--cd-leading-tight);
  text-transform: uppercase; letter-spacing: var(--cd-tracking-h1); color: var(--cd-ink);
}
/* pre-wrap: si SplitText parte el acento en dos trozos (pasa justo en el ancho en que el título
   deja de caber en una línea, p. ej. 667 px), el espacio entre palabras no se pierde */
.cd-h1-accent { position: relative; display: inline-block; font-style: italic; color: var(--cd-gold); letter-spacing: 0.01em; white-space: pre-wrap; }
.cd-h2 {
  font-size: var(--cd-text-h2); font-weight: 500; line-height: var(--cd-leading-title);
  text-transform: uppercase; letter-spacing: var(--cd-tracking-title); color: var(--cd-gold);
}
.cd-h2 em { font-style: italic; letter-spacing: 0.02em; }
.cd-h3 { font-size: var(--cd-text-h3); font-weight: 500; line-height: var(--cd-leading-title); letter-spacing: 0.01em; color: var(--cd-gold); }
.cd-section--espresso .cd-h1 { color: var(--cd-bg); }
.cd-section--espresso .cd-h1-accent, .cd-section--espresso .cd-h2, .cd-section--espresso .cd-h3 { color: var(--cd-gold-soft); }
.cd-lead { font-size: var(--cd-text-lead); line-height: 1.6; max-width: 38em; }
.cd-body { max-width: 38em; }
.cd-label {
  font-size: var(--cd-text-label); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--cd-tracking-label); color: var(--cd-gold-deep);
}
.cd-section--espresso .cd-label { color: var(--cd-gold-soft); }
.cd-script { font-family: var(--cd-font-script); font-size: var(--cd-text-script); line-height: 1.1; color: var(--cd-gold-deep); }
.cd-section--espresso .cd-script { color: var(--cd-gold-soft); }

/* ---------- Motivos e iconos de línea ---------- */
.cd-ico { width: 1em; height: 1em; overflow: visible; }
.cd-ico * { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Botones ---------- */
/* El relleno del hover es un ::before que barre con transform: no se anima ningún color. */
.cd-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: 3.25rem; padding: 0.9em 2.1em;
  border: 1px solid var(--cd-ink); border-radius: var(--cd-radius-pill);
  background: var(--cd-ink); color: var(--cd-bg);
  font-family: var(--cd-font-sans); font-size: 0.8125rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; cursor: pointer;
}
.cd-btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--cd-gold-deep);
  transform: scaleX(0); transform-origin: right center; transition: transform 0.55s var(--cd-ease);
}
.cd-btn .cd-ico { font-size: 1.35em; flex: none; }
.cd-btn--ghost { background: transparent; color: var(--cd-ink); border-color: var(--cd-gold-deep); }
.cd-btn--ghost::before { background: var(--cd-gold-soft); }
.cd-section--espresso .cd-btn { background: var(--cd-bg); color: var(--cd-ink); border-color: var(--cd-bg); }
.cd-section--espresso .cd-btn::before { background: var(--cd-gold-soft); }
.cd-section--espresso .cd-btn--ghost { background: transparent; color: var(--cd-bg); border-color: var(--cd-gold-soft); }
.cd-section--espresso .cd-btn--ghost::before { background: var(--cd-gold-deep); }
@media (hover: hover) and (pointer: fine) {
  .cd-btn:hover::before { transform: scaleX(1); transform-origin: left center; }
}
.cd-btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }

/* ---------- Carta de precios (escrita a mano en el HTML de cada página de servicio) ---------- */
.cd-precios { border-top: 1px solid var(--cd-line); }
.cd-precio { padding-block: var(--cd-space-4); border-bottom: 1px solid var(--cd-line); }
.cd-precio__cab { display: flex; align-items: baseline; gap: var(--cd-space-3); }
.cd-precio__nombre { font-family: var(--cd-font-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.cd-precio__puntos { flex: 1; min-width: 1.5rem; height: 0; border-bottom: 1px dotted var(--cd-gold-deep); transform-origin: left center; }
.cd-precio__importe { font-size: var(--cd-text-price); font-weight: 500; color: var(--cd-gold-deep); white-space: nowrap; }
.cd-precio__pie { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cd-space-4); margin-top: var(--cd-space-2); }
.cd-precio__desc { font-size: var(--cd-text-small); max-width: 34em; opacity: 0.82; }
/* Zona táctil de 44 px: la caja crece, pero los márgenes negativos dejan la fila con el mismo alto */
.cd-precio__reservar {
  flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.5rem -0.65rem;
  font-size: var(--cd-text-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
  text-decoration: underline; text-decoration-color: var(--cd-gold); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
/* Menos de 360 px: nombre largo + puntos + precio no caben en una línea ("Micropigmentación de labios … 350,00 €") */
@media (max-width: 359px) {
  .cd-precio__cab { gap: var(--cd-space-2); }
  .cd-precio__puntos { min-width: 0.5rem; }
  .cd-carta .cd-precio__nombre { font-size: 1.25rem; }
}
@media (max-width: 479px) {
  .cd-precio__cab:has(.cd-precio__importe--largo) { flex-wrap: wrap; }
  .cd-precio__cab:has(.cd-precio__importe--largo) .cd-precio__puntos { display: none; }
  .cd-precio__importe--largo { white-space: normal; flex-basis: 100%; }
}

/* ---------- Reseña ---------- */
.cd-resena { display: grid; gap: var(--cd-space-4); padding: var(--cd-space-5); background: var(--cd-espresso); color: var(--cd-bg); border-radius: var(--cd-radius); }
.cd-resena__texto { font-family: var(--cd-font-serif); font-style: italic; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.35; }
.cd-resena__autor { font-size: var(--cd-text-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--cd-tracking-label); color: var(--cd-gold-soft); }

/* ---------- Hueco de imagen sin foto real ---------- */
.cd-hueco {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--cd-nude); border-radius: var(--cd-radius);
  background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(47, 29, 17, 0.06) 22px 23px);
}
.cd-hueco__texto { padding: var(--cd-space-3); font-size: var(--cd-text-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; text-align: center; color: var(--cd-ink); }

/* ---------- Foto real dentro de un hueco ---------- */
/* El hueco conserva su proporción y su color nude (se ve mientras carga); la foto lo cubre. */
.cd-hueco--foto { background-image: none; }
.cd-foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Encuadres: qué parte de la foto se conserva cuando la caja la recorta */
.cd-foto--arriba { object-position: 50% 22%; }
.cd-foto--abajo { object-position: 50% 78%; }
.cd-foto--izq { object-position: 25% 50%; }
.cd-foto--der { object-position: 75% 50%; }
.cd-foto--arriba-der { object-position: 80% 20%; }

/* ---------- Separador de sección ---------- */
.cd-separador { display: flex; align-items: center; gap: var(--cd-space-3); width: min(100%, 40rem); margin-inline: auto; color: var(--cd-gold); }
.cd-separador__linea { flex: 1; height: 1px; background: currentColor; }
.cd-separador__linea--izq { transform-origin: right center; }
.cd-separador__linea--der { transform-origin: left center; }
.cd-separador__estrella { position: relative; display: grid; font-size: 1.5rem; }
.cd-separador__estrella > * { grid-area: 1 / 1; }

/* ---------- Sol junto a un H2 ---------- */
.cd-titulo-sol { display: flex; align-items: center; gap: var(--cd-space-4); }
.cd-titulo-sol--aire { margin-bottom: var(--cd-space-5); }
.cd-titulo-sol__sol { flex: none; font-size: clamp(2.5rem, 2rem + 2vw, 4rem); color: var(--cd-gold); }

/* ---------- Brillo del acento del H1 (la capa la crea animaciones.js) ---------- */
.cd-h1-accent__brillo {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--cd-gold-shine); -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: polygon(-40% 0, -20% 0, -30% 100%, -50% 100%);
}

/* ---------- Remate en script con corazón ---------- */
.cd-firma { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.1em 0.35em; max-width: 100%; }
.cd-firma__texto { padding: 0.15em 0.2em; min-width: 0; }
.cd-firma__corazon { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); color: var(--cd-gold-deep); }
.cd-section--espresso .cd-firma__corazon { color: var(--cd-gold-soft); }
/* El corazón es un único trazo que empieza arriba, en el centro. Estado inicial sin dibujar, puesto
   abajo para que no se vea antes de que arranque el JS (pathLength="100": las medidas van de 0 a 100;
   el 105 deja el extremo redondeado fuera del trazo). Sin animaciones queda dibujado. */
.cd-firma__corazon .cd-ico * { stroke-width: 1.4; }
/* Trazos que se dibujan: ocultos desde el primer pintado. .cd-anim la pone el script del <head>
   solo si hay JS y no se ha pedido reducir el movimiento; main.js la quita si falta GSAP. */
.cd-anim [data-cd="firma"] .cd-firma__corazon path,
.cd-anim [data-cd="hero"] [data-cd-sol] .cd-ico *,
.cd-anim [data-cd="porque"] .cd-porque__icono > .cd-ico *,
.cd-anim [data-cd="dibujo"] * { stroke-dasharray: 100 150; stroke-dashoffset: 105; }
/* Entradas: estado oculto desde el primer pintado, para que nada se vea antes de tiempo. Son los
   mismos valores de partida que usa main.js (registro de entradas); GSAP los pisa con estilos en
   línea al animar. Si se añade una entrada nueva, su estado oculto va aquí.
   Ninguna de estas propiedades puede llevar transition en CSS: se pelearía con GSAP. */
.cd-anim [data-cd="hero"] [data-cd-item],
.cd-anim [data-cd="entrada"] > *,
.cd-anim [data-cd="equipo"] .cd-equipo__nombre,
.cd-anim [data-cd="equipo"] .cd-label,
.cd-anim [data-cd="equipo"] .cd-equipo__servicios,
.cd-anim [data-cd="porque"] .cd-porque__texto,
.cd-anim .cd-precios .cd-precio,
.cd-anim .cd-categoria__cab .cd-h2 { opacity: 0; }
/* Los títulos por líneas se ocultan enteros hasta que SplitText los ha partido (.cd-partido) */
.cd-anim [data-cd="hero"] .cd-h1:not(.cd-partido),
.cd-anim [data-cd="titulo"]:not(.cd-partido) { visibility: hidden; }
.cd-anim [data-cd="equipo"] .cd-equipo__foto,
.cd-anim [data-cd="imagen"] { clip-path: inset(100% 0% 0% 0%); }
.cd-anim [data-cd="firma"] .cd-firma__texto { clip-path: inset(-30% 100% -30% -5%); }
.cd-anim .cd-precios .cd-precio__puntos,
.cd-anim .cd-categoria__cab .cd-categoria__linea,
.cd-anim [data-cd="separador"] .cd-separador__linea { transform: scaleX(0); }
.cd-anim .cd-categoria__cab .cd-categoria__sol .cd-ico,
.cd-anim [data-cd="separador"] .cd-separador__estrella > * { transform: scale(0); }

/* ---------- Marquee de servicios ---------- */
.cd-marquee { overflow: hidden; padding-block: var(--cd-space-4); border-block: 1px solid var(--cd-line); }
.cd-marquee__pista { display: flex; flex-wrap: wrap; justify-content: center; }
/* La pista en movimiento va en su propia capa: sin will-change Chrome la rasterizaba de nuevo en cada frame */
.cd-marquee.is-activo .cd-marquee__pista { flex-wrap: nowrap; justify-content: flex-start; width: max-content; will-change: transform; contain: layout paint; backface-visibility: hidden; }
.cd-marquee__grupo { display: flex; align-items: center; flex: none; }
.cd-marquee__palabra { font-family: var(--cd-font-serif); font-size: clamp(1.75rem, 1.3rem + 2vw, 3.25rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cd-ink); white-space: nowrap; }
.cd-marquee__sol { font-size: clamp(1.25rem, 1rem + 1vw, 2rem); color: var(--cd-gold); margin-inline: clamp(1rem, 0.5rem + 2vw, 2.5rem); }

/* ---------- ¿Por qué elegirnos? ---------- */
.cd-porque { display: grid; gap: var(--cd-space-5) var(--cd-space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .cd-porque { grid-template-columns: repeat(4, 1fr); } }
.cd-porque__item { display: grid; justify-items: center; gap: var(--cd-space-3); text-align: center; }
.cd-porque__icono { position: relative; font-size: 3.5rem; color: var(--cd-gold); }
.cd-porque__brillo { position: absolute; right: -0.25em; top: -0.2em; font-size: 0.32em; opacity: 0; }
.cd-porque__texto { font-size: var(--cd-text-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; max-width: 12em; }

/* ---------- Cabecera ---------- */
/* La cabecera lleva backdrop-filter y transform (se oculta al bajar). Las dos cosas crean un
   containing block para los position: fixed que tenga dentro, así que el menú a pantalla completa
   (.cd-menu) vive FUERA de <header>. */
.cd-header {
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--cd-line);
  background: rgba(255, 253, 247, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.cd-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--cd-space-4); min-height: var(--cd-header-h); }
/* Logo horizontal (PNG/WebP con transparencia). La altura manda; el ancho sale de la proporción. */
.cd-logo { display: inline-flex; align-items: center; min-height: 2.75rem; line-height: 0; }
.cd-logo img { height: 2.75rem; width: auto; }
@media (max-height: 480px) { .cd-logo img { height: 2.25rem; } }
.cd-nav__lista { display: flex; gap: var(--cd-space-5); }
/* 44 px de alto (tablet en horizontal es táctil). El subrayado es un fondo, para que siga a la
   misma distancia del texto aunque la caja sea más alta. */
.cd-nav__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem;
  font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none;
  background: linear-gradient(var(--cd-gold), var(--cd-gold)) no-repeat 0 calc(50% + 1.15rem) / 0 1px;
}
.cd-nav__link:hover, .cd-nav__link[aria-current="page"] { background-size: 100% 1px; }
.cd-nav__toggle, .cd-menu__cerrar {
  display: none; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.25rem; background: none; border: 0; cursor: pointer;
  font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
}

/* ---------- Menú móvil a pantalla completa ---------- */
.cd-menu { display: none; }
@media (max-width: 959px) {
  .cd-nav { display: none; }
  /* Sin JS el menú queda como bloque normal bajo la cabecera */
  .cd-menu { display: block; position: relative; overflow: hidden; background: var(--cd-beige); padding: var(--cd-space-3) var(--cd-gutter) var(--cd-space-5); }
  .cd-menu__cerrar, .cd-menu__sol, .cd-menu__pie { display: none; }
  .cd-menu__link { display: block; padding-block: var(--cd-space-2); font-family: var(--cd-font-serif); font-size: 1.5rem; text-decoration: none; }

  .cd-js .cd-nav__toggle { display: inline-flex; }
  .cd-js .cd-menu {
    position: fixed; inset: 0; z-index: 80; visibility: hidden;
    display: flex; flex-direction: column; justify-content: center; gap: var(--cd-space-5);
    padding: calc(var(--cd-header-h) + 1rem + env(safe-area-inset-top)) max(var(--cd-gutter), env(safe-area-inset-right)) calc(var(--cd-space-5) + env(safe-area-inset-bottom)) max(var(--cd-gutter), env(safe-area-inset-left));
  }
  .cd-js .cd-menu.is-open { visibility: visible; }
  .cd-js .cd-menu__cerrar { display: inline-flex; position: absolute; top: env(safe-area-inset-top, 0px); right: max(var(--cd-gutter), env(safe-area-inset-right)); height: var(--cd-header-h); }
  .cd-js .cd-menu__sol { display: block; position: absolute; right: -32vw; bottom: -18vw; font-size: 120vw; color: var(--cd-gold-soft); pointer-events: none; }
  .cd-js .cd-menu__sol .cd-ico * { stroke-width: 0.35; }
  .cd-js .cd-menu__lista { position: relative; display: grid; gap: var(--cd-space-2); }
  .cd-js .cd-menu__lista li { overflow: hidden; }
  /* 23 px a 320 de ancho: "MICROPIGMENTACIÓN" cabe entera */
  .cd-js .cd-menu__link { font-size: clamp(1.375rem, 0.6rem + 4.2vw, 3rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; }
  .cd-js .cd-menu__link[aria-current="page"] { color: var(--cd-gold-deep); font-style: italic; }
  .cd-js .cd-menu__pie { display: block; position: relative; }
  /* Cada <li> recorta su enlace (entrada con máscara): el foco va por dentro para que se vea */
  .cd-js .cd-menu__link:focus-visible { outline-offset: -2px; }
}
/* Móvil en horizontal: los cinco enlaces y el botón no caben a su tamaño. Letra más pequeña, en dos
   columnas, sin el sol de fondo y con scroll propio si aun así no cabe. */
@media (max-width: 959px) and (max-height: 520px) {
  .cd-js .cd-menu { justify-content: flex-start; gap: var(--cd-space-4); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(var(--cd-space-4) + env(safe-area-inset-bottom)); }
  .cd-js .cd-menu__sol { display: none; }
  .cd-js .cd-menu__lista { margin-top: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--cd-space-5); }
  .cd-js .cd-menu__link { font-size: 1.375rem; }
  .cd-js .cd-menu__pie { margin-bottom: auto; }
}

/* ---------- Pie ---------- */
.cd-footer { background: var(--cd-espresso); color: var(--cd-bg); padding-block: var(--cd-space-6) calc(var(--cd-space-3) + env(safe-area-inset-bottom)); }
.cd-footer__grid { display: grid; gap: var(--cd-space-5); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.cd-footer__marca { line-height: 0; }
.cd-footer__marca img { height: 3.4rem; width: auto; }
.cd-footer__titulo { font-size: var(--cd-text-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--cd-tracking-label); color: var(--cd-gold-soft); margin-bottom: var(--cd-space-3); }
.cd-footer address { font-style: normal; }
.cd-footer a { text-decoration: none; border-bottom: 1px solid var(--cd-line-on-dark); }
.cd-footer a:hover { border-bottom-color: var(--cd-gold-soft); }
.cd-footer__lema { margin-top: var(--cd-space-3); font-size: var(--cd-text-small); opacity: 0.85; }
.cd-footer__lista li + li { margin-top: var(--cd-space-2); }
.cd-footer__email { font-size: var(--cd-text-small); }
/* Táctil y pantallas de móvil o tablet: cada enlace del pie y el teléfono miden 44 px de alto */
@media (pointer: coarse), (max-width: 1023px) {
  .cd-footer a, .cd-ubicacion__tel a, .cd-legal__datos a {
    display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; border-bottom: 0;
    text-decoration: underline; text-decoration-color: var(--cd-line-on-dark); text-decoration-thickness: 1px; text-underline-offset: 5px;
  }
  .cd-ubicacion__tel a, .cd-legal__datos a { text-decoration-color: var(--cd-gold); }
  .cd-footer__lista li + li { margin-top: 0; }
  .cd-footer__legal-lista { row-gap: 0; }
}

/* ---------- Botón flotante "Pide tu cita" ---------- */
/* Es una píldora recortada a círculo con clip-path; en escritorio el hover la descubre entera. */
.cd-cita {
  --cd-cita-d: 3.5rem;
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: 0.9rem; height: var(--cd-cita-d);
  padding: 0 0 0 1.5rem; border-radius: var(--cd-radius-pill);
  background: var(--cd-espresso); color: var(--cd-bg); text-decoration: none;
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; white-space: nowrap;
  clip-path: inset(0 0 0 calc(100% - var(--cd-cita-d)) round 999px);
  transition: clip-path 0.55s var(--cd-ease);
}
.cd-cita__icono { display: grid; place-items: center; width: var(--cd-cita-d); height: var(--cd-cita-d); flex: none; font-size: 1.9rem; color: var(--cd-gold-soft); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cd-gold-soft); }
@media (hover: hover) and (pointer: fine) {
  .cd-cita:hover { clip-path: inset(0 0 0 0 round 999px); }
}
/* Con teclado se despliega siempre. En táctil no hay hover: main.js la despliega unos segundos la
   primera vez que aparece (clase is-abierta), para que se lea "Pide tu cita". */
.cd-cita:focus-visible, .cd-cita.is-abierta { clip-path: inset(0 0 0 0 round 999px); }
/* El clip-path recortaría un outline: el foco se marca con un anillo interior */
.cd-cita:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cd-gold-soft); }

/* ---------- Cortina: preloader y transición entre páginas ---------- */
.cd-cortina {
  position: fixed; inset: 0; z-index: 100; visibility: hidden;
  display: grid; place-items: center; background: var(--cd-beige); color: var(--cd-gold);
}
.cd-pre .cd-cortina, .cd-entra .cd-cortina { visibility: visible; }
.cd-cortina__in { display: grid; justify-items: center; gap: var(--cd-space-3); }
.cd-cortina__sol { font-size: clamp(4.5rem, 3.5rem + 5vw, 7rem); }
.cd-cortina__marca { line-height: 0; }
.cd-cortina__marca img { width: clamp(11rem, 8rem + 12vw, 15rem); height: auto; }
.cd-pre .cd-cortina__sol .cd-ico * { stroke-dasharray: 100 150; stroke-dashoffset: 105; }
.cd-pre .cd-cortina__marca { opacity: 0; }
.cd-entra .cd-cortina__marca { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==================== Bloques de página ==================== */

/* ---------- Cabecera de sección: etiqueta + H2 ---------- */
.cd-cab { display: grid; gap: var(--cd-space-3); margin-bottom: var(--cd-space-5); max-width: 44rem; }
.cd-cab--centro { margin-inline: auto; text-align: center; justify-items: center; }
.cd-cab--tras-separador { margin-top: var(--cd-space-5); }
.cd-linea { padding-bottom: 0.1em; } /* aire para que la máscara de SplitText no corte los descendentes */

/* ---------- Hero ---------- */
.cd-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--cd-space-section); }
.cd-hero__in { display: grid; gap: var(--cd-space-5); align-items: center; }
.cd-hero__texto { position: relative; display: grid; gap: var(--cd-space-4); justify-items: start; }
.cd-hero__texto .cd-lead { max-width: 30em; }
.cd-hero__botones { display: flex; flex-wrap: wrap; gap: var(--cd-space-3); margin-top: var(--cd-space-2); }
.cd-hero__visual { position: relative; }
.cd-hero__marco { position: relative; }
/* Home: la foto del rótulo solo existe a 640×853 px. El marco va en 3:4 y no pasa de 560 px de ancho,
   así nunca se presenta por encima de su tamaño real a 1x. */
.cd-hero--inicio .cd-hero-borde { max-width: 35rem; margin-inline: auto; }
.cd-hero--inicio .cd-hueco { aspect-ratio: 3 / 4; width: 100%; }
.cd-hero__sol { position: absolute; z-index: 0; pointer-events: none; color: var(--cd-gold-soft); font-size: clamp(13rem, 9rem + 16vw, 24rem); right: -22%; top: -20%; }
.cd-hero__sol .cd-ico * { stroke-width: 0.16; }
.cd-hero__visual .cd-hero__marco { z-index: 1; }
/* Borde dorado de la foto de cabecera: pegado a la foto, 2 px (3 px desde 600) y con un brillo que da
   la vuelta cada 7 s. Solo CSS: el ::before es un cuadrado con conic-gradient, más grande que la diagonal
   del contenedor (250cqw: la cabecera más alargada, a 960 px, mide unas 2 veces su ancho), que gira solo
   con transform en su propia capa; el overflow lo recorta y la foto tapa el centro. El ::after pinta el
   fondo bajo la foto para que, mientras la foto entra con su clip-path, no se vea el degradado detrás.
   El brillo entra con un fade al empezar la foto (main.js añade .is-dentro); con reduced-motion no gira. */
.cd-hero-borde {
  --cd-borde-w: 2px;
  position: relative; z-index: 1; height: 100%; overflow: hidden; isolation: isolate;
  padding: var(--cd-borde-w); border-radius: var(--cd-radius); container-type: inline-size;
}
.cd-hero-borde::before {
  content: ""; position: absolute; z-index: -2; top: 50%; left: 50%; width: 250cqw; aspect-ratio: 1; margin: -125cqw 0 0 -125cqw;
  background: conic-gradient(#8A6540 0deg, #DCBD95 70deg, #F3EADC 100deg, #DCBD95 130deg, #A67C52 220deg, #8A6540 360deg);
  will-change: transform; animation: cd-borde-gira 7s linear infinite;
}
.cd-hero-borde::after { content: ""; position: absolute; z-index: -1; inset: var(--cd-borde-w); background: var(--cd-bg); border-radius: var(--cd-radius); }
@keyframes cd-borde-gira { to { transform: rotate(1turn); } }
@media (min-width: 600px) { .cd-hero-borde { --cd-borde-w: 3px; } }
/* La regla general de reduced-motion acorta las animaciones a 0,01 ms: en una infinita eso sería girar sin parar */
@media (prefers-reduced-motion: reduce) { .cd-hero-borde::before { animation: none; } }
.cd-anim [data-cd-borde]::before { opacity: 0; }
.cd-anim [data-cd-borde].is-dentro::before { opacity: 1; transition: opacity 0.4s var(--cd-ease); }
@media (min-width: 960px) {
  .cd-hero--inicio { min-height: calc(100svh - var(--cd-header-h)); display: grid; align-items: center; }
  .cd-hero--inicio .cd-hero__in { grid-template-columns: 1.1fr 0.9fr; gap: var(--cd-space-6); }
  .cd-hero--inicio .cd-hero-borde { margin-right: 0; }
  .cd-hero--inicio .cd-hueco { max-height: 72svh; }
}
/* Hero de página interior: solo texto, con el sol asomando por la derecha */
.cd-hero--interior { background: var(--cd-beige); padding-block: clamp(3.5rem, 2rem + 7vw, 8rem); }
.cd-hero--interior .cd-hero__sol { right: -8rem; top: 50%; margin-top: -0.5em; color: var(--cd-nude); }
.cd-hero--interior .cd-hero__texto { max-width: 46rem; }

/* ---------- Tarjetas de servicio ---------- */
.cd-servicios { display: grid; gap: var(--cd-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .cd-servicios--3 { grid-template-columns: repeat(3, 1fr); } .cd-servicios--2 { grid-template-columns: repeat(2, 1fr); } }
.cd-servicio__enlace {
  position: relative; isolation: isolate; overflow: hidden; height: 100%;
  display: grid; gap: var(--cd-space-3); align-content: start; padding: var(--cd-space-5) var(--cd-space-4);
  border: 1px solid var(--cd-line); border-radius: var(--cd-radius); background: var(--cd-bg); text-decoration: none;
}
.cd-servicio__enlace::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cd-beige); transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--cd-ease); }
.cd-section--beige .cd-servicio__enlace::before { background: var(--cd-nude); }
@media (hover: hover) and (pointer: fine) { .cd-servicio__enlace:hover::before { transform: scaleY(1); } }
/* Tarjetas con foto (solo en la home): la foto va a sangre arriba, en 3:2 */
.cd-servicio__foto { position: relative; overflow: hidden; aspect-ratio: 3 / 2; margin: calc(-1 * var(--cd-space-5)) calc(-1 * var(--cd-space-4)) var(--cd-space-2); background: var(--cd-nude); }
.cd-servicio__foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.9s var(--cd-ease); }
@media (hover: hover) and (pointer: fine) { .cd-servicio__enlace:hover .cd-servicio__foto img { transform: scale(1.04); } }
.cd-servicio__titulo { font-family: var(--cd-font-serif); font-size: var(--cd-text-h3); font-weight: 500; line-height: 1.15; }
.cd-servicio__texto { font-size: var(--cd-text-small); }
.cd-servicio__desde { margin-top: var(--cd-space-3); font-size: var(--cd-text-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--cd-gold-deep); }
.cd-servicio__desde b { font-size: 1.5rem; font-weight: 500; letter-spacing: 0; margin-left: 0.2em; }
.cd-servicio__ver { justify-self: start; font-size: var(--cd-text-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; border-bottom: 1px solid var(--cd-gold); padding-bottom: 2px; }

/* ---------- Galería en marquesina ---------- */
.cd-carrusel { overflow-x: auto; }
.cd-carrusel.is-activo { overflow: hidden; }
.cd-carrusel__pista { display: flex; width: max-content; }
.cd-carrusel.is-activo .cd-carrusel__pista { will-change: transform; contain: layout paint; backface-visibility: hidden; }
.cd-carrusel__grupo { display: flex; gap: var(--cd-space-4); padding-right: var(--cd-space-4); flex: none; }
.cd-carrusel__item { width: clamp(13rem, 9rem + 14vw, 20rem); flex: none; }

/* ---------- Reseñas ---------- */
.cd-resenas { display: grid; gap: var(--cd-space-4); grid-template-columns: 1fr; }
@media (min-width: 960px) { .cd-resenas { grid-template-columns: repeat(3, 1fr); } }
.cd-resenas { align-items: stretch; }
/* Tarjetas de igual altura con el autor anclado abajo; la cita va algo más pequeña que la reseña suelta */
.cd-resenas .cd-resena { grid-template-rows: 1fr auto; align-content: stretch; height: 100%; }
.cd-resenas .cd-resena__texto { font-size: clamp(1.25rem, 1.12rem + 0.4vw, 1.5rem); }
.cd-resenas .cd-resena__autor { align-self: end; }
.cd-section--espresso .cd-resena { background: transparent; border: 1px solid var(--cd-line-on-dark); }

/* ---------- Texto de introducción ---------- */
.cd-intro { display: grid; gap: var(--cd-space-5); }
.cd-intro__texto { display: grid; gap: var(--cd-space-3); max-width: 40em; }
@media (min-width: 960px) { .cd-intro { grid-template-columns: 5fr 7fr; gap: var(--cd-space-6); align-items: start; } }

/* ---------- Carta de precios: chips + categorías a lo ancho ---------- */
.cd-carta { padding-top: 0; padding-bottom: var(--cd-space-6); }
/* Fila de chips: pegada bajo la cabecera mientras dura la carta. Cuando la cabecera se oculta al
   bajar, la fila sube con ella (clase cd-header-oculta en <html>, la pone main.js). */
.cd-chips {
  position: sticky; top: var(--cd-header-h); z-index: 40;
  background: var(--cd-beige); border-bottom: 1px solid var(--cd-line);
  transition: transform 0.45s var(--cd-ease);
}
.cd-header-oculta .cd-chips.is-pegada { transform: translateY(calc(-1 * var(--cd-header-h))); }
.cd-chips__lista { display: flex; gap: var(--cd-space-2); padding-block: 0.75rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cd-chips__lista::-webkit-scrollbar { display: none; }
.cd-chip {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; white-space: nowrap;
  border: 1px solid var(--cd-gold-deep); border-radius: var(--cd-radius-pill); text-decoration: none;
  font-size: var(--cd-text-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
}
.cd-chip[aria-current="true"] { background: var(--cd-ink); border-color: var(--cd-ink); color: var(--cd-bg); }

.cd-categoria { padding-top: 2rem; scroll-margin-top: calc(var(--cd-header-h) + 4.5rem); }
.cd-categoria__cab { display: flex; align-items: center; gap: var(--cd-space-3); margin-bottom: var(--cd-space-2); }
.cd-categoria__sol { flex: none; font-size: 1.75rem; color: var(--cd-gold); }
.cd-categoria .cd-h2 { font-size: clamp(1.3rem, 1rem + 1.6vw, 2.125rem); line-height: 1.1; letter-spacing: 0.04em; min-width: 0; }
.cd-categoria__linea { flex: 1; min-width: 0; height: 1px; background: var(--cd-gold); transform-origin: left center; }
.cd-nota { font-size: var(--cd-text-small); margin-bottom: var(--cd-space-2); }
.cd-carta .cd-precios { border-top: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--cd-space-6); }
.cd-carta .cd-precio { padding-block: 0.8rem; }
.cd-carta .cd-precio__nombre { font-size: 1.375rem; }
.cd-carta .cd-precio__pie { margin-top: 0.2rem; }
.cd-carta .cd-precio__desc { line-height: 1.5; }
.cd-carta__iva { margin-top: var(--cd-space-4); }
@media (min-width: 900px) { .cd-carta .cd-precios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "Reservar" va a la izquierda, bajo la descripción, siempre que el botón flotante pisa la columna
   de contenido (por debajo de 1400 px de ancho): así su esquina nunca tiene un enlace debajo. */
@media (max-width: 1399px) {
  .cd-carta .cd-precio__pie { flex-direction: column; gap: 0.35rem; }
}
@media (max-width: 767px) {
  /* Aire al final de la carta: alto del botón flotante + margen */
  .cd-carta { padding-bottom: calc(var(--cd-space-5) + 3.5rem + 1.5rem); }
}

/* ---------- Cierre de página y tarjeta de ubicación ---------- */
.cd-cierre__in { display: grid; gap: var(--cd-space-6); align-items: center; }
@media (min-width: 960px) { .cd-cierre__in { grid-template-columns: 7fr 5fr; } }
.cd-cierre__texto { display: grid; gap: var(--cd-space-4); justify-items: start; }
.cd-cierre__frase { font-family: var(--cd-font-serif); font-style: italic; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.3; max-width: 22em; }
.cd-ubicacion { display: grid; gap: var(--cd-space-3); justify-items: start; padding: var(--cd-space-5) var(--cd-space-4); background: var(--cd-bg); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); }
.cd-ubicacion__dir { font-style: normal; font-family: var(--cd-font-serif); font-size: 1.625rem; font-weight: 500; line-height: 1.25; }
.cd-ubicacion__tel a { text-decoration: none; border-bottom: 1px solid var(--cd-gold); }

/* ---------- El local (huecos de foto) ---------- */
.cd-local { display: grid; gap: var(--cd-space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .cd-local { grid-template-columns: 3fr 2fr; align-items: end; } }
.cd-marco { overflow: hidden; border-radius: var(--cd-radius); aspect-ratio: 4 / 5; }
.cd-marco--ancho { aspect-ratio: 3 / 2; }
.cd-marco > .cd-hueco { width: 100%; height: 124%; margin-top: -12%; aspect-ratio: auto; border-radius: 0; }

/* ---------- El equipo (Sobre nosotras) ---------- */
/* Móvil: una columna (son tres personas; un carrusel escondería a dos y pelearía con el scroll).
   Tablet: 2 + 1 centrada. Escritorio: 3 columnas. */
.cd-equipo { display: grid; gap: var(--cd-space-5) var(--cd-space-4); grid-template-columns: minmax(0, 24rem); justify-content: center; }
.cd-equipo__persona { display: grid; gap: var(--cd-space-2); align-content: start; }
/* 3:4, la misma proporción que el archivo: la foto entra entera y no se corta ninguna cabeza */
.cd-equipo__foto { position: relative; overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: var(--cd-space-2); border-radius: var(--cd-radius); background: var(--cd-nude); }
.cd-equipo__foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cd-equipo__servicios { font-size: var(--cd-text-small); opacity: 0.82; }
.cd-equipo .cd-label, .cd-equipo__servicios { text-wrap: balance; }
.cd-equipo__nombre { font-family: var(--cd-font-serif); font-size: var(--cd-text-h3); font-weight: 500; line-height: 1.15; color: var(--cd-gold); }
@media (min-width: 600px) {
  .cd-equipo { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; }
  .cd-equipo__persona { grid-column: span 2; }
  .cd-equipo__persona:nth-child(3) { grid-column: 2 / span 2; }
}
@media (min-width: 960px) {
  .cd-equipo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cd-equipo__persona, .cd-equipo__persona:nth-child(3) { grid-column: auto; }
}

/* ---------- Páginas legales y 404 ---------- */
.cd-legal { display: grid; gap: var(--cd-space-4); max-width: 46rem; }
.cd-legal h2 { margin-top: var(--cd-space-4); font-size: var(--cd-text-h3); text-transform: none; letter-spacing: 0.01em; }
.cd-404 { min-height: calc(100svh - var(--cd-header-h)); display: grid; place-items: center; text-align: center; overflow: hidden; }
.cd-404__in { position: relative; display: grid; gap: var(--cd-space-4); justify-items: center; }
.cd-404__sol { font-size: clamp(6rem, 4rem + 8vw, 10rem); color: var(--cd-gold); }

/* ---------- Pie: redes, horario y franja final ---------- */
.cd-redes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--cd-space-4); }
.cd-footer .cd-redes__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.875rem; height: 2.875rem; min-height: 0;
  border: 1px solid var(--cd-gold-soft); border-radius: 50%; color: var(--cd-gold-soft); text-decoration: none;
  transition: background-color 0.35s var(--cd-ease), color 0.35s var(--cd-ease), transform 0.35s var(--cd-ease);
}
.cd-footer .cd-redes__btn:hover, .cd-footer .cd-redes__btn:focus-visible { background: var(--cd-gold-soft); color: var(--cd-espresso); transform: translateY(-2px); }
.cd-redes__ico { width: 1.375rem; height: 1.375rem; fill: currentColor; }
.cd-redes__ico--linea { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cd-redes__punto { fill: currentColor; }
.cd-footer__mapa { margin-top: var(--cd-space-2); font-size: var(--cd-text-small); }
.cd-horario { display: grid; gap: 0.6rem; }
.cd-horario dt { font-size: var(--cd-text-small); opacity: 0.8; }
.cd-horario dd { margin: 0; font-variant-numeric: tabular-nums; }
.cd-horario dd.cd-horario__nota { margin-top: 0.15rem; font-size: 0.8125rem; opacity: 0.8; }
.cd-footer__fin { display: grid; justify-items: center; gap: var(--cd-space-2); margin-top: var(--cd-space-6); padding-top: var(--cd-space-3); border-top: 1px solid var(--cd-line-on-dark); font-size: 0.8125rem; text-align: center; }
.cd-footer__legal-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cd-space-2) var(--cd-space-4); }
.cd-footer__copy { font-size: 0.75rem; opacity: 0.85; }
.cd-footer__corazon { display: inline-block; width: 0.95em; height: 0.95em; margin-left: 0.2em; vertical-align: -0.12em; fill: none; stroke: var(--cd-gold-soft); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Enlace bajo las reseñas */
.cd-resenas__mas { margin-top: var(--cd-space-4); font-size: var(--cd-text-small); }
.cd-resenas__mas a { text-decoration: none; border-bottom: 1px solid var(--cd-gold); padding-block: 0.6rem; }
.cd-section--espresso .cd-resenas__mas a { color: var(--cd-gold-soft); border-bottom-color: var(--cd-line-on-dark); }
.cd-resenas__mas a:hover { border-bottom-color: currentColor; }

/* ---------- Galería estática de micropigmentación (sobria, sin marquesina) ---------- */
.cd-micro-galeria { display: grid; gap: var(--cd-space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .cd-micro-galeria { grid-template-columns: repeat(3, 1fr); } }

/* H1 con una palabra muy larga (MICROPIGMENTACIÓN): baja de tamaño en móvil para no partirla */
.cd-h1--largo { font-size: clamp(1.5rem, 7.5vw, 4.5rem); } /* 24 px a 320 de ancho: la palabra mide 255 px y caben 280 */
/* En dos columnas la palabra tiene que caber en la suya (7/12 del ancho): a 4,5rem se metía bajo la foto */
@media (min-width: 960px) { .cd-h1--largo { font-size: clamp(2rem, 3.6vw, 3.4rem); } }

/* ---------- Apertura de página de servicio ---------- */
/* Escritorio: 2 columnas alineadas arriba; la imagen ocupa toda la altura del bloque de texto.
   Móvil: H1, imagen, párrafos. */
.cd-apertura__in { display: grid; gap: var(--cd-space-5); grid-template-areas: "titulo" "imagen" "texto"; }
.cd-apertura__titulo { grid-area: titulo; display: grid; gap: var(--cd-space-4); align-content: start; }
.cd-apertura__texto { grid-area: texto; display: grid; gap: var(--cd-space-3); align-content: start; max-width: 40em; }
.cd-apertura__texto .cd-hero__botones { margin-top: var(--cd-space-3); }
.cd-apertura__visual { grid-area: imagen; position: relative; }
.cd-apertura__marco { position: relative; z-index: 1; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--cd-radius); }
.cd-apertura__marco > .cd-hueco { width: 100%; height: 116%; margin-top: -8%; aspect-ratio: auto; border-radius: 0; }
/* De 600 a 959 px el hero va en una columna: la imagen pasa a apaisada y nunca mide más que la pantalla */
@media (min-width: 600px) and (max-width: 959px) {
  .cd-apertura__marco { aspect-ratio: 3 / 2; max-height: 75svh; }
  .cd-hero--inicio .cd-hero-borde { max-width: 30rem; }
}
@media (min-width: 960px) {
  .cd-apertura__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "titulo imagen" "texto imagen"; column-gap: var(--cd-space-6); row-gap: var(--cd-space-4); }
  .cd-apertura__marco { height: 100%; min-height: 26rem; aspect-ratio: auto; }
}

/* ---------- Botón flotante: se retira mientras hay un CTA principal en pantalla ---------- */
.cd-cita { transition: clip-path 0.55s var(--cd-ease), opacity 0.35s var(--cd-ease), transform 0.35s var(--cd-ease), visibility 0s linear 0s; }
.cd-cita.is-oculta { opacity: 0; transform: translateY(1rem); visibility: hidden; pointer-events: none; transition: clip-path 0.55s var(--cd-ease), opacity 0.35s var(--cd-ease), transform 0.35s var(--cd-ease), visibility 0s linear 0.35s; }

/* ---------- Carta: sin descripción, "Reservar" sigue a la derecha en pantallas anchas ---------- */
@media (min-width: 1400px) { .cd-carta .cd-precio__reservar { margin-left: auto; } }

/* ---------- Páginas legales: listas, datos pendientes y fecha ---------- */
.cd-legal a { text-decoration: none; border-bottom: 1px solid var(--cd-gold); }
.cd-legal__datos { display: grid; gap: var(--cd-space-2); padding: var(--cd-space-4); background: var(--cd-beige); border-radius: var(--cd-radius); }
.cd-legal b { font-weight: 500; } /* Jost solo tiene 400 y 500: sin negrita sintética */
.cd-legal__lista { display: grid; gap: var(--cd-space-2); padding-left: 1.25rem; list-style: disc; }
.cd-legal__fecha { margin-top: var(--cd-space-4); font-size: var(--cd-text-small); opacity: 0.82; }
.cd-legal code { font-size: 0.9em; padding: 0.1em 0.35em; background: var(--cd-beige); border-radius: var(--cd-radius); }
.cd-pendiente { padding: 0.1em 0.45em; background: transparent; color: var(--cd-ink); border: 1px dashed var(--cd-gold-deep); border-radius: var(--cd-radius); font-size: var(--cd-text-small); }