/* Alberto Muñoz Makeup & Hair Salon: estilo Kanva (Framer) adaptado al salón.
   Fondo gris cálido y tinta de Kanva, verde eucalipto (su muro de plantas y las hojas de su logo) y olivo de acento. */

@font-face { font-family: "Sentient"; src: url("fuentes/sentient-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sentient"; src: url("fuentes/sentient-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Sentient"; src: url("fuentes/sentient-300i.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fuentes/figtree-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --fondo: #F2F2EF;
  --tarjeta: #E8E8E1;
  --linea: #DBDBD1;
  --blanco: #FFFFFF;
  --tinta: #1A1C18;
  --tinta-suave: #4D4B47;
  --tinta-foto: #6E6C67;
  --olivo: #5B6449;
  --verde: #3A4335;
  --verde-hondo: #1F231D;
  --salvia: #C9CCC0;
  --salvia-2: #B9BDB1;
  --serif: "Sentient", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --margen: 48px;
  --nav-alto: 72px;
  --suave: cubic-bezier(.22, 1, .36, 1);

  /* Tokens de kamu-ui con los colores del salón */
  --radius: 1rem;
  --background: var(--fondo);
  --foreground: var(--tinta);
  --card: var(--tarjeta);
  --card-foreground: var(--tinta);
  --primary: var(--tinta);
  --primary-foreground: var(--blanco);
  --secondary: var(--blanco);
  --secondary-foreground: var(--tinta);
  --muted: var(--tarjeta);
  --muted-foreground: var(--tinta-suave);
  --border: var(--linea);
  --input: #8C857B;
  --ring: var(--tinta);
  --destructive: #A23A2A;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-alto) + 40px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 1rem/1.55 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: currentColor; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenedor { width: min(1344px, 100% - var(--margen) * 2); margin-inline: auto; }
.centro { text-align: center; }
.nav__nombre, .nav__giro { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.oscura :focus-visible, .pie :focus-visible { outline-color: var(--fondo); }
.saltar { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--tinta); color: var(--blanco); text-decoration: none; }
.saltar:focus { top: 16px; }

/* Títulos: renglón recto + renglón en cursiva, como Kanva */
.titulo { font: 400 4rem/1.04 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.titulo .l1, .titulo .l2 { display: block; }
.titulo--centro { text-align: center; }
.titulo--claro { color: var(--fondo); }
.titulo--claro .l2 { color: var(--salvia-2); }

/* Enlace subrayado de Kanva ("Shop Now"): la línea se va y regresa al pasar el mouse */
.enlace-linea { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: 1rem; text-decoration: none; }
.enlace-linea::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; } /* taste-skill-ignore: es el subrayado del enlace ("Shop Now" de Kanva), no un divisor */
.enlace-linea:hover::after { animation: subraya .8s var(--suave); }
@keyframes subraya { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 46% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.enlace-linea--suave { color: var(--tinta-suave); }
.enlace-linea--claro { color: var(--fondo); }

/* kamu-ui con el look del salón */
.ui-btn { border-radius: 999px; white-space: normal; text-align: center; font-weight: 500; transition: background-color .3s, color .3s; }
.btn-tinta { background: var(--tinta); color: var(--blanco); }
.btn-tinta:hover { background: var(--verde); }
.btn-crema { background: var(--fondo); color: var(--tinta); }
.btn-crema:hover { background: var(--salvia); }
.ui-btn--outline { background: transparent; border-color: var(--tinta); }
.ui-btn--outline:hover { background: var(--tinta); color: var(--blanco); }
.ui-badge { font-size: .875rem; font-weight: 500; }

/* ---------- Barra de navegación flotante ---------- */
.nav { position: fixed; top: 20px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav__barra { pointer-events: auto; position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(1344px, 100% - var(--margen) * 2); min-height: var(--nav-alto); margin-inline: auto; padding: 0 12px 0 24px; border-radius: 14px; background: var(--blanco); transition: background-color .4s; }
.nav__menu { display: flex; align-items: center; gap: 6px; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font-size: 1rem; text-decoration: none; cursor: pointer; }
.nav__link:hover, .nav__link.es-actual { color: var(--olivo); }
.ico--mas { width: .85em; height: .85em; transition: transform .35s var(--suave); }
.nav__abre[aria-expanded="true"] .ico--mas { transform: rotate(45deg); }
.nav__grupo { position: relative; }
.nav__sub { position: absolute; top: calc(100% + 14px); left: 0; min-width: 240px; padding: 10px; border-radius: 14px; background: var(--blanco); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s var(--suave), visibility 0s .3s; }
.nav__abre[aria-expanded="true"] + .nav__sub { visibility: visible; opacity: 1; transform: none; transition: opacity .3s, transform .3s var(--suave); }
.nav__sub a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; text-decoration: none; }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--fondo); }
.nav__logo { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.nav__logo img { width: 44px; height: auto; }
.nav__marca { display: grid; line-height: 1.05; }
.nav__nombre { font: 400 1.375rem/1 var(--serif); letter-spacing: -.01em; }
.nav__giro { margin-top: 3px; font: 400 .8125rem/1 var(--serif); letter-spacing: .05em; color: var(--tinta-suave); }
.nav__der { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.nav__ico, .idioma, .nav__hamb { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; text-decoration: none; cursor: pointer; }
.idioma { width: auto; grid-auto-flow: column; gap: 6px; padding: 0 10px; font-size: .875rem; font-weight: 600; letter-spacing: .04em; }
.nav__ico:hover, .idioma:hover, .nav__hamb:hover { background: var(--fondo); }
.nav__cita { margin-left: 8px; min-height: 44px; padding: 0 18px; font-size: 1rem; }
.nav__hamb { display: none; }
.menu-cel { position: fixed; z-index: 49; top: calc(20px + var(--nav-alto) + 8px); left: 12px; right: 12px; padding: 12px 20px 20px; border-radius: 16px; background: var(--blanco); }
.menu-cel nav { display: grid; }
.menu-cel nav { gap: 4px; }
.menu-cel nav a { display: flex; align-items: center; min-height: 56px; padding: 0 12px; border-radius: 10px; background: var(--fondo); font: 400 1.375rem/1.1 var(--serif); text-decoration: none; }
.menu-cel__acciones { display: grid; gap: 10px; margin-top: 18px; }

/* ---------- Inicio: carrusel a todo lo ancho ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; max-height: 1040px; overflow: hidden; background: var(--tarjeta); }
.hero__slides { position: absolute; inset: 0; touch-action: pan-y; }
.js:not(.intro-lista) .slide__texto, .js:not(.intro-lista) .cabeza__texto { visibility: hidden; }
.slide { position: absolute; inset: 0; visibility: hidden; }
.slide.es-activa { visibility: visible; }
.slide__media { position: absolute; inset: 0; overflow: hidden; }
.slide__media img, .slide__video { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.slide__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(242 242 239 / .88) 0%, rgb(242 242 239 / .55) 32%, rgb(242 242 239 / 0) 56%), linear-gradient(0deg, rgb(242 242 239 / .35) 0%, rgb(242 242 239 / 0) 18%); } /* taste-skill-ignore: velo bajo el texto sobre la foto */
.slide__texto { position: absolute; left: max(var(--margen), (100% - 1344px) / 2); bottom: clamp(96px, 12vh, 140px); width: min(640px, 100% - var(--margen) * 2); }
.hero__titulo { font: 400 6rem/.98 var(--serif); letter-spacing: -.03em; color: var(--tinta); }
.hero__titulo .hl { display: block; }
.hero__titulo em.hl { color: var(--tinta-foto); padding-bottom: .06em; }
.hero__bajada { max-width: 30em; margin: 22px 0 18px; font-size: 1.125rem; color: var(--tinta-suave); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.hero__controles { position: absolute; left: 50%; bottom: 26px; z-index: 3; display: flex; align-items: center; gap: 8px; width: max-content; transform: translateX(-50%); }
.hero__pausa, .hero__sig { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgb(255 255 255 / .72); cursor: pointer; transition: background-color .3s; }
.hero__pausa { border-radius: 50%; }
.hero__pausa:hover, .hero__sig:hover { background: var(--blanco); }
.hero__puntos { display: flex; align-items: center; padding: 0 6px; height: 44px; border-radius: 999px; background: rgb(255 255 255 / .72); }
.hero__dot { position: relative; width: 32px; height: 44px; border: 0; background: none; cursor: pointer; }
.hero__dot span { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px; background: rgb(28 27 24 / .3); overflow: hidden; transition: width .5s var(--suave), margin .5s var(--suave); }
.hero__dot.es-activa span { width: 26px; margin-left: -13px; }
.hero__dot span::after { content: ""; position: absolute; inset: 0; background: var(--tinta); transform: scaleX(var(--avance, 0)); transform-origin: left; }
.hero__sig { position: absolute; right: var(--margen); top: 50%; z-index: 3; margin-top: -22px; }
.hero__bajar { position: absolute; right: var(--margen); bottom: 26px; z-index: 3; display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .875rem; font-weight: 500; text-decoration: none; }
.hero__bajar i { position: relative; width: 1px; height: 28px; background: rgb(28 27 24 / .25); overflow: hidden; }
.hero__bajar i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 12px; background: var(--tinta); animation: baja 1.8s var(--suave) infinite; }
@keyframes baja { from { transform: translateY(-12px); } to { transform: translateY(28px); } }

/* ---------- Puntos sobre las fotos: un botón que abre su globito con precio y "Agendar" ----------
   Sin clase en <body> es el punto con halo; con "puntos-b", la etiqueta de vidrio (la que escogió Emiliano, 2026-10-27). */
.punto { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 0; height: 0; }
.punto:hover, .punto:has([aria-expanded="true"]) { z-index: 4; } /* el abierto queda encima del otro punto */
.punto__boton { position: absolute; left: -22px; top: -22px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--tinta); cursor: pointer; }
.punto__marca { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--blanco); }
.punto__marca::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: rgb(255 255 255 / .38); transform: scale(2.2); transition: transform .5s var(--suave); }
.punto__boton:hover .punto__marca::after, .punto__boton[aria-expanded="true"] .punto__marca::after { transform: scale(2.8); }
.punto__nombre { display: none; }
.punto__globo { position: absolute; left: 30px; top: 0; display: grid; justify-items: start; gap: 2px; width: max-content; max-width: 260px; padding: 14px 18px 2px; border-radius: 14px; background: var(--blanco); text-align: left; visibility: hidden; opacity: 0; transform: translate(-8px, -50%); transition: opacity .3s, transform .4s var(--suave), visibility 0s .3s; }
.punto__globo::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 18px; } /* puente: el mouse llega al globito sin que se cierre */
.punto--izq .punto__globo { left: auto; right: 30px; transform: translate(8px, -50%); }
.punto--izq .punto__globo::before { right: auto; left: 100%; }
.punto__boton[aria-expanded="true"] + .punto__globo { visibility: visible; opacity: 1; transform: translate(0, -50%); transition: opacity .3s, transform .4s var(--suave); }
@media (hover: hover) { .punto:hover .punto__globo { visibility: visible; opacity: 1; transform: translate(0, -50%); transition: opacity .3s, transform .4s var(--suave); } }
.punto__globo strong { font: 400 1.125rem/1.25 var(--serif); }
.punto__dato { font-size: .875rem; color: var(--tinta-suave); }
.punto__acciones { display: flex; gap: 18px; }
.punto__acciones a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 600; text-underline-offset: 3px; }
/* B: etiqueta de vidrio con el nombre siempre a la vista; el globito abre abajo */
.puntos-b .punto__boton { left: -19px; display: flex; gap: 8px; width: auto; padding: 0 16px 0 14px; background: rgb(255 255 255 / .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); white-space: nowrap; transition: background-color .3s; } /* taste-skill-ignore: etiqueta chica sobre la foto, para que se lea; la escogió Emiliano */
.puntos-b .punto__boton:hover, .puntos-b .punto__boton[aria-expanded="true"] { background: var(--blanco); }
.puntos-b .punto--izq .punto__boton { left: auto; right: -19px; flex-direction: row-reverse; padding: 0 14px 0 16px; }
.puntos-b .punto__marca { width: 10px; height: 10px; background: var(--tinta); }
.puntos-b .punto__marca::after, .puntos-b .punto__globo strong { display: none; }
.puntos-b .punto__nombre { display: block; font-size: .875rem; font-weight: 600; }
.puntos-b .punto__globo { top: 30px; left: -19px; padding-top: 12px; transform: translateY(-6px); }
.puntos-b .punto--izq .punto__globo { left: auto; right: -19px; transform: translateY(-6px); }
.puntos-b .punto__globo::before, .puntos-b .punto--izq .punto__globo::before { top: auto; bottom: 100%; left: 0; right: 0; width: auto; height: 14px; }
.puntos-b .punto__boton[aria-expanded="true"] + .punto__globo { transform: none; }
@media (hover: hover) { .puntos-b .punto:hover .punto__globo { transform: none; } }

/* ---------- Ventajas: 4 tarjetas blancas ---------- */
.ventajas { padding: 40px 0 0; }
.ventajas__fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ventaja { padding: 34px 24px 30px; border-radius: 16px; background: var(--blanco); text-align: center; }
.ventaja .ico { width: 28px; height: 28px; margin: 0 auto 14px; color: var(--olivo); }
.ventaja__t { font: 400 1.375rem/1.2 var(--serif); }
.ventaja p { max-width: 26ch; margin: 8px auto 0; font-size: 1rem; color: var(--tinta-suave); }

/* ---------- Frase con fotitos ---------- */
.frase { padding: 120px 0 104px; text-align: center; }
.frase__txt { max-width: 1120px; font: italic 400 3rem/1.24 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.trozo { white-space: nowrap; }
.ficha { display: inline-block; width: 1.06em; height: 1.06em; margin: 0 .06em; object-fit: cover; border: 3px solid var(--blanco); border-radius: .2em; vertical-align: -.2em; rotate: -7deg; }
.ficha--2 { rotate: 8deg; }
.ficha--ramita { width: 1.2em; height: 1.38em; margin-left: -.05em; border: 0; border-radius: 0; object-fit: contain; rotate: 14deg; }

/* ---------- Servicios: pestañas y tarjetas ---------- */
.servicios { padding: 24px 0 120px; }
.pestanas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px 0 40px; }
.pestana { min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--blanco); font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color .3s, color .3s; }
.pestana:hover { background: var(--tarjeta); }
.pestana[aria-selected="true"] { background: var(--tinta); color: var(--blanco); }
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1180px; margin-inline: auto; }
.servicio.ui-card { position: relative; gap: 0; padding: 10px 10px 22px; overflow: visible; border-radius: 20px; background: var(--tarjeta); text-align: center; }
.servicio__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; }
.servicio__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--suave), opacity .6s; }
.servicio__foto-2 { opacity: 0; }
.servicio:hover .servicio__foto img, .servicio:has(.servicio__enlace:focus-visible) .servicio__foto img { transform: scale(1.04); }
.servicio:hover .servicio__foto-2, .servicio:has(.servicio__enlace:focus-visible) .servicio__foto-2 { opacity: 1; }
.servicio__etiqueta.ui-badge { position: absolute; top: 22px; left: 22px; background: var(--blanco); color: var(--tinta); }
.servicio__nombre { margin-top: 18px; font: 400 1.375rem/1.2 var(--serif); }
.servicio__enlace { text-decoration: none; }
.servicio__enlace::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.servicio__enlace:focus-visible { outline: 0; }
.servicio__enlace:focus-visible::after { outline: 3px solid var(--tinta); outline-offset: 3px; }
.servicio__precio { display: flex; justify-content: center; gap: 10px; margin-top: 6px; font-size: 1rem; color: var(--tinta-suave); }
.servicio__tiempo::before { content: "·"; margin-right: 10px; }
.precios { max-width: 900px; margin: 44px auto 0; columns: 2; column-gap: 56px; }
.precios li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin-bottom: 6px; padding: 8px 8px 8px 18px; border-radius: 12px; background: var(--blanco); break-inside: avoid; }
.precios .ui-badge { flex-shrink: 0; }
.nota { max-width: 60ch; margin: 28px auto 4px; text-align: center; font-size: .875rem; color: var(--tinta-suave); }
.panel__mas { margin-top: 22px; text-align: center; }

/* ---------- Secciones oscuras (productos y cita) ---------- */
.oscura { position: relative; display: grid; min-height: 660px; overflow: hidden; border-radius: 24px; background: var(--verde); color: var(--fondo); }
.oscura__foto { position: absolute; inset: 0; }
.oscura__foto img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 75% 50%; }
.oscura__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(32 36 30 / .9) 0%, rgb(32 36 30 / .62) 36%, rgb(32 36 30 / 0) 62%); } /* taste-skill-ignore: velo bajo el texto sobre la foto */
.oscura__texto { position: relative; align-self: center; max-width: 680px; padding: 64px; }
.oscura .titulo { font-size: 3rem; }
.oscura__p { margin: 22px 0 0; max-width: 34em; font-size: 1.125rem; color: var(--salvia); }
.lista-ico { display: grid; gap: 12px; margin: 34px 0 26px; }
.lista-ico li { display: flex; align-items: center; gap: 12px; font-size: 1rem; }
.lista-ico .ico { color: var(--salvia-2); }
.lista-ico--chica { margin: 18px 0 0; gap: 8px; }

/* ---------- Por qué nos eligen: mosaico ---------- */
.porque { padding: 120px 0; }
.porque__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.calif { display: flex; align-items: center; gap: 16px; }
.calif__txt { font-size: 1rem; color: var(--tinta-suave); text-align: right; }
.calif__txt strong { color: var(--tinta); }
.estrellas { display: block; width: 92px; height: 16px; margin-left: auto; background: var(--tinta); clip-path: path("M8 0l2.4 5 5.6.7-4.1 3.8 1 5.5L8 12.3 3.1 15l1-5.5L0 5.7 5.6 5zM27 0l2.4 5 5.6.7-4.1 3.8 1 5.5L27 12.3 22.1 15l1-5.5L19 5.7 24.6 5zM46 0l2.4 5 5.6.7-4.1 3.8 1 5.5L46 12.3 41.1 15l1-5.5L38 5.7 43.6 5zM65 0l2.4 5 5.6.7-4.1 3.8 1 5.5L65 12.3 60.1 15l1-5.5L57 5.7 62.6 5zM84 0l2.4 5 5.6.7-4.1 3.8 1 5.5L84 12.3 79.1 15l1-5.5L76 5.7 81.6 5z"); }
.calif__caras { display: flex; }
.calif__caras img { width: 46px; height: 46px; object-fit: cover; border: 3px solid var(--blanco); border-radius: 10px; rotate: -6deg; }
.calif__caras img + img { margin-left: -10px; rotate: 5deg; }
.calif__caras img:last-child { rotate: -3deg; }
.bento { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.bento__grande { position: relative; grid-row: span 2; min-height: 620px; overflow: hidden; border-radius: 20px; background: var(--tarjeta); }
.bento__grande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bento__nota { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 12px; max-width: 330px; padding: 18px 20px; border-radius: 14px; background: var(--blanco); }
.bento__nota .ico { margin-top: 3px; color: var(--olivo); }
.bento__nota strong { display: block; font: 400 1.375rem/1.15 var(--serif); }
.bento__nota em { display: block; font: italic 400 1.375rem/1.15 var(--serif); }
.bento__nota-p { display: block; margin-top: 8px; font-size: .875rem; color: var(--tinta-suave); }
.bento__claro { position: relative; display: grid; grid-template-columns: 1fr minmax(120px, 38%); grid-template-rows: auto auto 1fr; column-gap: 20px; min-height: 302px; padding: 32px 0 0 32px; overflow: hidden; border-radius: 20px; background: var(--tarjeta); }
.bento__claro > .ico { width: 28px; height: 28px; color: var(--olivo); }
.bento__claro .bento__t { margin-top: 18px; }
.bento__claro p { margin-top: 10px; padding-bottom: 32px; font-size: 1rem; color: var(--tinta-suave); }
.bento__foto { grid-column: 2; grid-row: 1 / -1; align-self: end; width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 14px 0 0 0; }
.bento__t { font: 400 2.25rem/1.08 var(--serif); letter-spacing: -.01em; }
.bento__t span, .bento__t em { display: block; }
.bento__oscuro { position: relative; display: grid; grid-template-columns: 34% 1fr; align-items: center; gap: 12px; min-height: 302px; padding: 28px 32px 28px 8px; overflow: hidden; border-radius: 20px; background: var(--verde); color: var(--fondo); }
.bento__oscuro .bento__t em { color: var(--salvia-2); }
.bento__ramita { width: 100%; max-width: 190px; justify-self: center; rotate: -12deg; }

/* ---------- Reseña ---------- */
.resena { padding: 40px 0 120px; text-align: center; }
.resena__caja { display: grid; justify-items: center; }
.resena__ficha { width: 64px; height: 64px; object-fit: cover; border: 3px solid var(--blanco); border-radius: 12px; rotate: -8deg; }
.resena__cita { margin: 26px 0 0; }
.resena__txt { max-width: 860px; font: 400 2.25rem/1.25 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.resena__autor { display: grid; justify-items: center; gap: 6px; margin-top: 26px; }
.resena__autor .estrellas { margin: 0; }
.resena__autor cite { font: 400 1.125rem/1.2 var(--serif); font-style: normal; }
.resena__fuente { font-size: .875rem; color: var(--tinta-suave); }
.resena .enlace-linea { margin-top: 10px; }

/* ---------- Vitrina de novias y XV (puntos como el producto de Kanva) ---------- */
.vitrina { padding: 0 0 120px; text-align: center; overflow-x: clip; }
.vitrina__t { font: 400 3rem/1.05 var(--serif); letter-spacing: -.02em; }
.vitrina__escena { position: relative; display: grid; place-items: center; min-height: 720px; margin-top: 20px; }
.vitrina__marco { position: relative; width: min(440px, 78%); }
.vitrina__foto { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 24px 24px; background: var(--tarjeta); }
.vitrina__foto img { width: 100%; height: 100%; object-fit: cover; }
.flota { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 14px; background: var(--blanco); text-align: left; text-decoration: none; transition: background-color .3s; }
.flota:hover { background: var(--fondo); }
.flota img { width: 52px; height: 60px; object-fit: cover; border-radius: 8px; }
.flota span { display: grid; line-height: 1.25; }
.flota small { font-size: .8125rem; color: var(--tinta-suave); }
.flota strong { font: 400 1rem/1.2 var(--serif); }
.flota span span { font-size: .8125rem; color: var(--tinta-suave); }
.flota .ico { margin-left: 8px; }
.flota--1 { left: calc(50% - 470px); top: 18%; }
.flota--2 { right: calc(50% - 470px); bottom: 20%; }
.vitrina__nota { max-width: 46ch; margin: 8px auto 0; color: var(--tinta-suave); }

/* ---------- Agenda tu cita ---------- */
.cita { padding-bottom: 120px; }
.oscura--cita { grid-template-columns: 1.2fr .8fr; min-height: 0; }
.cita__texto { padding: 64px; }
.reserva { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 32px; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo--ancho { grid-column: 1 / -1; }
.reserva .ui-label { font-size: 1rem; color: var(--fondo); }
.reserva .ui-input, .reserva .ui-textarea { border-color: rgb(242 242 239 / .55); background: rgb(242 242 239 / .06); color: var(--fondo); color-scheme: dark; }
.reserva .ui-input:focus-visible, .reserva .ui-textarea:focus-visible { outline-color: var(--fondo); }
.reserva .ui-textarea::placeholder { color: var(--salvia); opacity: 1; }
.reserva option, .reserva optgroup { background: var(--blanco); color: var(--tinta); }
.campo__ayuda { font-size: .8125rem; color: var(--salvia); }
.campo__error { font-size: .875rem; font-weight: 500; color: #F4BCA9; }
.reserva .ui-input[aria-invalid="true"] { border-color: #F4BCA9; }
.reserva__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 6px; }
.reserva__ok { grid-column: 1 / -1; font-size: 1rem; color: var(--fondo); }
.reserva__ok:empty { display: none; }
.reserva__ok a { color: var(--fondo); }
.cita__foto { position: relative; margin: 16px; }
.cita__foto > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.cita__ramita { position: absolute; left: -46px; bottom: 32px; width: 150px; rotate: -18deg; }

/* ---------- Instagram ---------- */
.insta { padding: 0 0 120px; text-align: center; overflow-x: clip; }
.insta__t { padding-inline: var(--margen); font: italic 400 3rem/1.1 var(--serif); letter-spacing: -.015em; }
.insta__t .ficha { width: 1em; height: 1em; }
.insta__usuario { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 1rem; color: var(--tinta-suave); text-decoration: none; }
.insta__usuario:hover { color: var(--olivo); }
.insta__fila { display: block; margin-top: 28px; overflow: hidden; text-decoration: none; }
.insta__fila:hover img { filter: saturate(1.08); }
.insta__pista { display: flex; gap: 16px; width: max-content; }
.insta__fila.a-mano { overflow-x: auto; padding-inline: var(--margen); }
.insta__pista li { width: 300px; flex-shrink: 0; }
.insta__pista img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }

/* ---------- Visítanos y preguntas ---------- */
.visita { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px 64px; padding-bottom: 120px; }
.visita__dir { display: flex; gap: 10px; margin-top: 26px; max-width: 34em; color: var(--tinta-suave); }
.visita__dir .ico { margin-top: 2px; color: var(--olivo); }
.horario { width: 100%; max-width: 440px; margin-top: 26px; border-collapse: collapse; font-size: 1rem; }
.horario caption { padding-bottom: 8px; text-align: left; font: 400 1.375rem/1.2 var(--serif); }
.horario th, .horario td { padding: 10px 0; border-bottom: 1px solid var(--linea); text-align: left; font-weight: 400; }
.horario td { text-align: right; color: var(--tinta-suave); }
.horario tr.es-hoy th, .horario tr.es-hoy td { color: var(--tinta); font-weight: 600; }
.horario tr.es-hoy th::after { content: attr(data-hoy); margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: var(--tinta); color: var(--blanco); font-size: .8125rem; font-weight: 500; }
.visita__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.visita__fotos { display: grid; grid-template-columns: 1fr; gap: 16px; align-content: start; }
.visita__fachada { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0%; border-radius: 20px; }
.visita__mapa { width: 100%; height: 300px; border: 0; border-radius: 20px; background: var(--tarjeta); }
.preguntas { grid-column: 1 / -1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; margin-top: 24px; padding: 48px; border-radius: 24px; background: var(--blanco); }
.preguntas__t { font: 400 3rem/1.08 var(--serif); letter-spacing: -.015em; }
.preguntas__lado { display: grid; align-content: start; justify-items: start; gap: 18px; }
.preguntas__lado p { max-width: 30ch; font-size: 1.125rem; }
.ui-accordion { gap: 8px; }
.ui-accordion-item, .ui-accordion-item:not(:last-child) { padding: 0 20px; border-bottom: 0; border-radius: 14px; background: var(--fondo); }
.ui-accordion-item > summary { font: 400 1.375rem/1.3 var(--serif); }
.ui-accordion-item p { max-width: 60ch; color: var(--tinta-suave); }

/* ---------- Pie oscuro ---------- */
.pie { padding: 88px 0 32px; background: var(--verde-hondo); color: var(--fondo); }
.pie__fila { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.pie__t { margin-bottom: 14px; font: 400 1.375rem/1.2 var(--serif); }
.pie__t em { color: var(--salvia-2); }
.pie p { color: var(--salvia); font-size: 1rem; max-width: 40ch; }
.pie__redes { display: flex; gap: 4px; margin: 20px 0 16px -10px; }
.pie__redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--fondo); }
.pie__redes a:hover { background: rgb(242 242 239 / .1); }
.pie__pagos { display: flex; flex-wrap: wrap; gap: 6px; }
.pie__pagos li { padding: 4px 10px; border-radius: 6px; background: rgb(242 242 239 / .1); font-size: .8125rem; color: var(--salvia); }
.pie__col li { color: var(--salvia); font-size: 1rem; }
.pie__col a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--salvia); }
.pie__col a:hover { color: var(--fondo); }
.pie .pie__gigante { max-width: none; margin-top: 72px; font: 400 calc(min(1344px, 100vw - var(--margen) * 2) / 6.8)/.82 var(--serif); /* el nombre mide 6.6 em: llena justo el ancho */ letter-spacing: -.045em; color: var(--verde); white-space: nowrap; }
.pie__abajo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 64px; padding-top: 28px; }
.pie__abajo p { font-size: .8125rem; max-width: none; }

.flotante-cita { display: none; }

/* ---------- Páginas de servicios ---------- */
.cabeza { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 72px; padding: calc(20px + var(--nav-alto) + 72px) 0 104px; }
.migas ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; font-size: .875rem; color: var(--tinta-suave); }
.migas li + li::before { content: "/"; margin-right: 8px; }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--olivo); }
.titulo--pag { font-size: 6rem; line-height: .98; letter-spacing: -.03em; }
.titulo--pag .l2 { color: var(--tinta-foto); padding-bottom: .06em; }
.cabeza__p { max-width: 32em; margin-top: 26px; font-size: 1.125rem; color: var(--tinta-suave); }
.datos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.datos li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--blanco); font-size: .875rem; font-weight: 500; }
.cabeza__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 34px; }
.cabeza__foto { position: relative; justify-self: end; width: min(520px, 100%); }
.cabeza__foto figure { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 24px 24px; background: var(--tarjeta); }
.cabeza__foto img { width: 100%; height: 100%; object-fit: cover; }
.seccion { padding-bottom: 120px; }
.seccion__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 40px; }
.seccion__cabeza p { max-width: 38ch; color: var(--tinta-suave); }
.menu-serv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grupo-serv { margin: 72px 0 16px; font: 400 2.25rem/1.1 var(--serif); letter-spacing: -.01em; }
.seccion__cabeza + .grupo-serv { margin-top: 0; }
.fila-serv { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 20px; padding: 24px 26px 12px; border-radius: 18px; background: var(--blanco); }
.fila-serv__nombre { font: 400 1.375rem/1.2 var(--serif); }
.fila-serv__precio { font: 400 1.125rem/1.2 var(--serif); white-space: nowrap; }
.fila-serv__desc { grid-column: 1 / -1; max-width: 46ch; color: var(--tinta-suave); }
.fila-serv__pie { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.fila-serv__tiempo { font-size: .875rem; color: var(--tinta-suave); }
.pasos { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px 64px; padding: 48px; border-radius: 24px; background: var(--tarjeta); }
.pasos__cabeza p { max-width: 30ch; margin-top: 18px; color: var(--tinta-suave); }
.pasos__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; margin: 0; padding: 0; list-style: none; }
.paso__t { font: 400 1.375rem/1.2 var(--serif); }
.paso p { margin-top: 8px; color: var(--tinta-suave); }
.galeria__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.galeria__item { position: relative; overflow: hidden; border-radius: 18px; background: var(--tarjeta); }
.galeria__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.1s var(--suave); }
.galeria__item:hover img { transform: scale(1.04); }
.galeria__pie { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: var(--blanco); font-size: .875rem; font-weight: 500; }
.antes__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.antes__fila figure { overflow: hidden; border-radius: 18px; background: var(--blanco); }
.antes__fila img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.antes__fila figcaption { padding: 14px 20px 18px; color: var(--tinta-suave); }
.otras__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.otra { display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 24px; padding: 10px 28px 10px 10px; border-radius: 20px; background: var(--blanco); text-decoration: none; transition: background-color .3s; }
.otra:hover { background: var(--tarjeta); }
.otra img { width: 180px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.otra__t { display: block; font: 400 1.375rem/1.2 var(--serif); }
.otra__p { display: block; margin-top: 6px; color: var(--tinta-suave); }
.otra .ico { width: 24px; height: 24px; transition: transform .4s var(--suave); }
.otra:hover .ico { transform: translateX(4px); }

/* Sombras solo en lo que flota encima de la página: barra fija, menús, globo del punto, tarjetas que flotan sobre la foto, promoción y botón flotante */
.nav__barra.con-sombra, .nav__sub, .menu-cel, .punto__globo { box-shadow: 0 10px 30px -12px rgb(28 27 24 / .28); } /* taste-skill-ignore: piezas que flotan sobre el contenido */
.servicio.ui-card, .ui-btn--outline, .ui-input, .ui-textarea { box-shadow: none; } /* taste-skill-ignore: quita la sombra que trae kamu-ui */

/* ---------- Tableta ---------- */
@media (max-width: 1100px) {
  :root { --margen: 28px; }
  .hero__titulo { font-size: 4.25rem; }
  .titulo { font-size: 3rem; }
  .frase__txt, .resena__txt { font-size: 2rem; }
  .nav__menu { display: none; }
  .nav__barra { grid-template-columns: auto 1fr; padding-left: 16px; }
  .nav__hamb { display: inline-grid; }
  .ventajas__fila { grid-template-columns: repeat(2, 1fr); }
  .flota--1 { left: 0; }
  .flota--2 { right: 0; }
  .oscura--cita { grid-template-columns: 1fr; }
  .cita__foto { display: none; }
  .visita { grid-template-columns: 1fr; }
  .preguntas { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
  .bento { grid-template-columns: 1fr; }
  .bento__grande { grid-row: auto; min-height: 520px; }
  .pie__fila { grid-template-columns: 1fr 1fr; }
  .cabeza { grid-template-columns: 1fr; gap: 44px; padding-top: calc(20px + var(--nav-alto) + 48px); }
  .cabeza__foto { justify-self: start; }
  .titulo--pag { font-size: 4.25rem; }
  .menu-serv, .otras__fila { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; padding: 32px; }
}

/* ---------- Celular ---------- */
@media (max-width: 720px) {
  :root { --margen: 16px; --nav-alto: 64px; }
  .hero__titulo { font-size: 3.25rem; }
  .titulo, .oscura .titulo, .vitrina__t, .insta__t, .preguntas__t { font-size: 2rem; }
  .frase__txt, .resena__txt, .bento__t { font-size: 1.5rem; }
  .nav { top: 10px; }
  .nav__barra { width: calc(100% - 20px); padding: 0 6px 0 12px; }
  .nav__logo img { width: 36px; }
  .nav__nombre { font-size: 1.125rem; }
  .nav__cita, .solo-compu { display: none; }
  .menu-cel { top: calc(10px + var(--nav-alto) + 8px); left: 10px; right: 10px; }
  .hero { height: auto; min-height: 0; max-height: none; aspect-ratio: auto; }
  .hero__slides { position: relative; inset: auto; height: min(132vw, 640px); }
  .slide__media img, .slide__video { object-position: 82% 50%; }
  .slide__media::after { background: linear-gradient(0deg, rgb(242 242 239 / .96) 0%, rgb(242 242 239 / .72) 38%, rgb(242 242 239 / 0) 70%); } /* taste-skill-ignore: velo bajo el texto sobre la foto */
  .slide__texto { left: var(--margen); bottom: 76px; }
  .hero__bajada { font-size: 1rem; margin: 14px 0 6px; }
  .punto, .hero__sig, .hero__bajar { display: none; }
  .hero__controles { bottom: 14px; }
  .ventajas { padding-top: 24px; }
  .ventajas__fila { grid-template-columns: 1fr; gap: 10px; }
  .ventaja { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 20px; text-align: left; }
  .ventaja .ico { grid-row: span 2; margin: 2px 0 0; }
  .ventaja p { margin: 4px 0 0; max-width: none; }
  .frase { padding: 80px 0 64px; }
  .servicios { padding-bottom: 80px; }
  .pestanas { margin: 22px 0 26px; }
  .tarjetas { grid-template-columns: 1fr; gap: 12px; }
  .servicio__foto { aspect-ratio: 4 / 3; }
  .precios { columns: 1; margin-top: 28px; }
  .oscura { min-height: 0; border-radius: 20px; }
  .oscura__foto { position: relative; height: 300px; }
  .oscura__foto::after { background: linear-gradient(0deg, var(--verde) 0%, rgb(56 66 54 / 0) 60%); } /* taste-skill-ignore: velo bajo el texto sobre la foto */
  .oscura__texto { padding: 8px 22px 36px; }
  .productos { width: calc(100% - 20px); }
  .porque { padding: 80px 0; }
  .porque__cabeza { flex-direction: column; align-items: flex-start; }
  .calif__txt { text-align: left; }
  .calif .estrellas { margin-left: 0; }
  .bento { grid-template-columns: 1fr; }
  .bento__grande { grid-row: auto; min-height: 460px; }
  .bento__nota { left: 14px; right: 14px; bottom: 14px; max-width: none; }
  .bento__claro { grid-template-columns: 1fr; padding: 26px 22px 0; }
  .bento__foto { grid-column: 1; grid-row: auto; height: 220px; margin-top: 4px; border-radius: 14px 14px 0 0; }
  .bento__claro p { padding-bottom: 20px; }
  .bento__oscuro { grid-template-columns: 30% 1fr; padding: 24px 22px 24px 6px; }
  .resena { padding: 24px 0 80px; }
  .vitrina { padding-bottom: 80px; }
  .vitrina__escena { min-height: 0; padding: 20px 0 0; }
  .vitrina__marco { width: 100%; }
  .flota { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; margin-top: 10px; }
  .flota--1 { margin-top: 16px; }
  .cita { width: calc(100% - 20px); padding-bottom: 80px; }
  .cita__texto { padding: 36px 22px; }
  .reserva { grid-template-columns: 1fr; }
  .insta { padding-bottom: 80px; }
  .insta__pista li { width: 200px; }
  .visita { padding-bottom: 80px; gap: 40px; }
  .visita__fotos { grid-template-columns: 1fr; }
  .visita__mapa { height: 280px; }
  .visita__acciones .ui-btn { flex: 1 1 100%; }
  .pie { padding-top: 64px; padding-bottom: 96px; }
  .pie__fila { grid-template-columns: 1fr; gap: 28px; }
  .flotante-cita { position: fixed; left: 50%; bottom: 14px; z-index: 45; display: flex; align-items: center; gap: 8px; width: max-content; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--tinta); color: var(--blanco); font-weight: 500; text-decoration: none; transform: translate(-50%, 140%); transition: transform .5s var(--suave); }
  .flotante-cita.es-visible { transform: translate(-50%, 0); }
  .cabeza { gap: 32px; padding: calc(10px + var(--nav-alto) + 36px) 0 72px; }
  .titulo--pag { font-size: 3.25rem; }
  .seccion { padding-bottom: 80px; }
  .seccion__cabeza { margin-bottom: 26px; }
  .fila-serv { padding: 20px 20px 10px; }
  .grupo-serv { font-size: 1.5rem; }
  .pasos { padding: 26px 22px; gap: 26px; }
  .pasos__lista { grid-template-columns: 1fr; gap: 22px; }
  .galeria__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .antes__fila { grid-template-columns: 1fr; }
  .otra { grid-template-columns: 1fr auto; gap: 14px 16px; padding: 10px 20px 18px 10px; }
  .otra img { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; }
  .otra > span { padding-left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bajar i::after { animation: none; }
  .enlace-linea:hover::after { animation: none; }
  .servicio__foto img, .galeria__item img, .flotante-cita, .nav__sub, .ico--mas, .punto__globo, .punto__boton { transition: none; }
}