/* Aloima Forten · Hair Luxury by Alo.
   Cobre y oro sobre espresso: el color de su pelo es la marca. La tarjeta es
   un cristal dorado sobre sus rizos, que respiran. Un solo tema, oscuro y cálido,
   a propósito: es una pieza de lujo, no una app. */
:root {
  color-scheme: dark;
  --espresso: #140a06;
  --capa: #21120b;
  --cobre: #c8632b;
  --oro: #e2b56a;
  --champan: #f3dcb0;
  --crema: #fbefe0;
  --crema-2: rgba(251, 239, 224, .72);
  --linea: rgba(226, 181, 106, .32);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --script: 'Great Vibes', 'Brush Script MT', cursive;
  --texto: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Las letras sobre foto o vídeo: un filo oscuro muy fino que las recorta del
     fondo y un halo suave detrás. Se hereda, así que basta ponerlo en el bloque. */
  --sombra-letra: 0 1px 1px rgba(10, 5, 2, .7), 0 0 2px rgba(10, 5, 2, .55), 0 2px 16px rgba(10, 5, 2, .5);
}
* { box-sizing: border-box }
html.lenis, html.lenis body { height: auto }
body { margin: 0; background: var(--espresso); color: var(--crema); font: 400 16px/1.6 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: hidden }
a { color: inherit }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px }
.marco { width: min(1100px, 100%); margin-inline: auto; padding-inline: 22px }
h1, h2 { font-family: var(--serif); font-weight: 500; margin: 0; line-height: 1.02; text-wrap: balance }
h2 { font-size: clamp(40px, 7vw, 76px) }
h2 em, h1 em { font-style: italic; color: var(--oro) }
.ceja { font: 500 12px/1 var(--texto); letter-spacing: .32em; text-transform: uppercase; color: var(--oro); margin: 0 0 16px }
.por-confirmar { opacity: .55; font-style: italic }
.borrador { position: fixed; z-index: 90; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 999px;
            background: rgba(20, 10, 6, .8); border: 1px solid var(--linea); font: 500 11px/1.2 var(--texto); letter-spacing: .04em; color: var(--champan); white-space: nowrap; backdrop-filter: blur(8px) }

/* ══ LA TARJETA ══ */
/* El lienzo de la magia va entre los fondos (capa 0) y el contenido (capa 2). */
#magia { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none }
main, .pie { position: relative; z-index: 2 }
.tarjeta { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 64px 18px 40px; overflow: hidden }
.fondo { position: absolute; inset: -6%; z-index: 0 }
.cristal-3d { position: relative; z-index: 2; width: min(400px, 100%); transform-style: preserve-3d; will-change: transform }
/* Sin ondular la foto: deformaba el pelo. Solo un acercamiento muy lento.
   PENDIENTE: un vídeo en bucle hecho con IA a partir de esta foto. */
.fondo-foto, .fondo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.12) saturate(1.25) contrast(1.05) }
.fondo-foto { animation: acerca 24s ease-in-out infinite alternate; transform-origin: 50% 40% }
.fondo-video { opacity: 0; transition: opacity 1.6s ease }
.fondo-video.visible { opacity: 1 }
@keyframes acerca { to { transform: scale(1.04) } }
/* Más luz que antes: el fondo es el pelo y tiene que brillar (como la versión de Nio). */
.fondo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(140% 95% at 50% 45%, rgba(20, 10, 6, 0) 35%, rgba(20, 10, 6, .35) 75%, rgba(20, 10, 6, .7)) }
.fondo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(50% 40% at 50% 42%, rgba(255, 190, 110, .28), transparent 70%); mix-blend-mode: screen }
.luz { position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgba(255, 214, 150, .18) 50%, transparent 60%); animation: barre 7s ease-in-out infinite; mix-blend-mode: screen }
@keyframes barre { 0%, 20% { transform: translateX(-60%) } 70%, 100% { transform: translateX(60%) } }

.cristal { position: relative; width: 100%; padding: 26px 22px 22px; border-radius: 34px; overflow: hidden; text-align: center;
           background: linear-gradient(160deg, rgba(255, 236, 205, .2), rgba(80, 40, 18, .08) 55%, rgba(255, 214, 150, .14)), rgba(42, 20, 9, .2);
           border: 1px solid rgba(255, 224, 170, .55);
           box-shadow: inset 0 1px 0 rgba(255, 245, 225, .55), inset 0 0 40px rgba(255, 200, 130, .08), 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 60px -10px rgba(226, 150, 70, .35);
           backdrop-filter: blur(10px) saturate(1.3) brightness(1.04); -webkit-backdrop-filter: blur(10px) saturate(1.3) brightness(1.04) }
/* El brillo del cristal sigue a la luz cuando se inclina el teléfono. */
.reflejo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 45% at var(--luz-x, 50%) var(--luz-y, 30%), rgba(255, 246, 228, .28), transparent 70%); mix-blend-mode: screen }
.activa-3d { position: fixed; z-index: 95; right: 16px; top: calc(14px + env(safe-area-inset-top, 0px)); padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255, 224, 170, .6);
             background: rgba(20, 10, 6, .75); color: var(--champan); font: 500 13px/1 var(--texto); backdrop-filter: blur(8px) }
.destello { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 246, 228, .35) 47%, transparent 58%); transform: translateX(-120%); animation: destello 5.5s 1.4s ease-in-out infinite }
@keyframes destello { 0% { transform: translateX(-120%) } 35%, 100% { transform: translateX(120%) } }
.monograma { width: 150px; height: auto; display: block; margin: 0 auto -6px; filter: drop-shadow(0 4px 14px rgba(226, 150, 70, .45)) }
.monograma .mechon { stroke-dasharray: 160; stroke-dashoffset: 160; animation: traza 2.2s .5s cubic-bezier(.6, 0, .2, 1) forwards }
@keyframes traza { to { stroke-dashoffset: 0 } }
.monograma .chispa { transform-origin: 172px 66px; animation: titila 2.6s ease-in-out infinite }
@keyframes titila { 50% { transform: scale(.55) rotate(45deg); opacity: .45 } }
.cristal { text-shadow: var(--sombra-letra) }
/* El nombre lleva el oro recortado en las letras: ahí la sombra va como filtro, que no tapa el degradado. */
.cristal h1 { filter: drop-shadow(0 1px .6px rgba(10, 5, 2, .8)) drop-shadow(0 3px 12px rgba(10, 5, 2, .55)); text-shadow: none; font-size: clamp(42px, 12vw, 54px); background: linear-gradient(180deg, #fff6e2 10%, #e9c27f 60%, #b98443); -webkit-background-clip: text; background-clip: text; color: transparent }
.oficio { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0 0; font: 500 14px/1 var(--texto); letter-spacing: .5em; text-transform: uppercase; color: var(--champan); padding-left: .5em }
.oficio span { width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--oro)) }
.oficio span:last-child { transform: scaleX(-1) }
.lema { font: 400 34px/1.1 var(--script); color: var(--champan); margin: 14px 0 4px }
.licencia { margin: 0 0 18px; font: 500 11px/1.4 var(--texto); letter-spacing: .06em; color: var(--crema-2) }
.botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.b { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 12px; border-radius: 16px; text-decoration: none; cursor: pointer;
     font: 500 15px/1 var(--texto); color: var(--crema); background: linear-gradient(180deg, rgba(255, 236, 205, .14), rgba(60, 30, 14, .35)); border: 1px solid rgba(255, 224, 170, .4);
     box-shadow: inset 0 1px 0 rgba(255, 245, 225, .3); transition: transform .2s, box-shadow .2s }
.b:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 245, 225, .4), 0 10px 24px -10px rgba(226, 150, 70, .6) }
.b:active { transform: scale(.97) }
.b svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none }
.b.oro { color: #2a1508; background: linear-gradient(180deg, #f6dca4, #d9a85c 55%, #b47e3d); border-color: #f8e3b5 }
.b.ancho { grid-column: 1 / -1 }
.b.web { margin-top: 14px }
.redes { display: flex; justify-content: center; gap: 14px; margin-top: 16px }
.redes a { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 224, 170, .5); background: rgba(255, 236, 205, .08); transition: transform .2s }
.redes a:hover { transform: translateY(-2px) }
.redes svg { width: 21px; height: 21px; fill: none; stroke: var(--champan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.falta { position: relative }
.falta::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #ff9a62 }

/* ══ PORTADA DE LA LANDING ══ */
.barra { position: fixed; z-index: 80; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
         padding: calc(12px + env(safe-area-inset-top, 0px)) 22px 12px; background: linear-gradient(180deg, rgba(20, 10, 6, .75), transparent) }
.firma { font: 500 24px/1 var(--serif); text-decoration: none; color: var(--crema) }
.firma em { color: var(--oro) }
.b.mini { min-height: 40px; font-size: 14px; padding: 0 16px; border-radius: 12px }
.portada { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 5vw, 70px);
           padding: 90px max(22px, calc(50% - 560px)) 60px; overflow: hidden }
.portada-fondo { position: absolute; inset: -5%; z-index: 0 }
.arco-3d { order: 2; justify-self: center; width: min(420px, 100%); position: relative; z-index: 2; transform-style: preserve-3d }
.portada-fondo img, .portada-fondo .fondo-video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(1.3) }
.portada-fondo .fondo-video { position: absolute; inset: 0 }
.portada-fondo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 70% 45%, transparent, var(--espresso) 85%) }
/* El retrato en un arco dorado: recorta lo que sobra de la foto (el coche) y da el aire de lujo. */
.portada-arco { width: 100%; margin: 0; padding: 10px; border-radius: 999px 999px 28px 28px; border: 1px solid rgba(255, 224, 170, .6);
                background: linear-gradient(160deg, rgba(255, 236, 205, .18), rgba(80, 40, 18, .25)); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 70px -10px rgba(226, 150, 70, .35) }
.portada-arco img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 38% 55%; border-radius: 999px 999px 20px 20px }
.portada-texto { order: 1; padding: 0; position: relative; z-index: 2; text-shadow: var(--sombra-letra) }
.barra { text-shadow: var(--sombra-letra) }
/* Los botones dorados llevan letra oscura: sin sombra. */
.b.oro { text-shadow: none }
.portada h1 { font-size: clamp(62px, 15vw, 150px) }
.portada .lema { font-size: clamp(34px, 6vw, 56px); margin: 10px 0 6px }
.portada .licencia { margin-bottom: 26px }
.portada-botones { display: flex; flex-wrap: wrap; gap: 12px }
.portada-botones .b { min-width: 180px; padding: 0 24px }

/* ══ ZOOM: una foto se abre en círculo y se convierte en la siguiente ══ */
.zoom { position: relative }
.zoom-escena { position: relative; height: 100svh; overflow: hidden }
.capa { position: absolute; inset: 0; margin: 0; z-index: calc(1 + var(--i)) }
.capa img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.03) }
.capa::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 10, 6, .1) 40%, rgba(20, 10, 6, .82)) }
.capa figcaption { position: absolute; left: 22px; right: 22px; bottom: 9svh; z-index: 2; font: italic 500 clamp(40px, 9vw, 84px)/1 var(--serif); color: var(--crema); text-shadow: var(--sombra-letra), 0 10px 40px rgba(0, 0, 0, .5) }
.capa figcaption small { display: block; font: 500 12px/1 var(--texto); letter-spacing: .32em; color: var(--oro); font-style: normal; margin-bottom: 14px }
/* Quieto (sin guion): las tres fotos, una debajo de otra */
html:not(.cine) .zoom-escena { height: auto }
html:not(.cine) .capa { position: relative; height: 90svh }

/* ══ SECCIONES ══ */
.seccion { padding-block: clamp(90px, 14vw, 160px) }
.dos { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 80px); align-items: center }
.marco-foto { margin: 0; border-radius: 200px 200px 24px 24px; overflow: hidden; border: 1px solid var(--linea); padding: 10px; background: var(--capa) }
.marco-foto img { width: 100%; border-radius: 190px 190px 16px 16px; display: block; aspect-ratio: 3 / 4; object-fit: cover }
.sobre p:not(.ceja) { color: var(--crema-2); font-size: 18px; margin: 22px 0 0; max-width: 32em }
.sellos { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px }
.sellos li { display: grid; gap: 4px; padding: 16px 20px; border-radius: 18px; border: 1px solid var(--linea); background: linear-gradient(160deg, rgba(226, 181, 106, .1), transparent) }
.sellos b { font: 600 20px/1.2 var(--serif); color: var(--champan) }
.sellos span { font-size: 14px; color: var(--crema-2) }
.lista-servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 40px }
.lista-servicios article { padding: 28px; border-radius: 26px; border: 1px solid var(--linea); background: var(--capa); display: grid; gap: 8px }
.lista-servicios span { color: var(--oro); font-size: 22px }
.lista-servicios b { font: 600 26px/1.15 var(--serif) }
.lista-servicios p { margin: 0; color: var(--crema-2) }

.galeria { position: relative; overflow: hidden; padding-block: 40px 90px }
.galeria-cab { padding-bottom: 34px }
.pista { display: flex; gap: 16px; padding-inline: 22px; overflow-x: auto; scrollbar-width: none }
.pista img { flex: none; width: min(70vw, 340px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 26px; border: 1px solid var(--linea) }
.cine .pista { overflow: visible; width: max-content }

.cita { text-align: center }
.lema.grande { font-size: clamp(44px, 9vw, 86px); margin: 0 0 6px }
.cita h2 { font-size: clamp(36px, 6vw, 60px) }
.grande-b { display: inline-flex; margin-top: 34px; min-height: 60px; padding: 0 34px; font-size: 17px }
.pie-cita { margin-top: 22px; color: var(--crema-2) }
.pie { text-align: center; padding: 26px 20px 40px; border-top: 1px solid var(--linea); color: var(--crema-2); font-size: 13px }
.aviso { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 95; padding: 12px 18px; border-radius: 14px;
         background: rgba(20, 10, 6, .92); border: 1px solid var(--linea); font-size: 14px; color: var(--champan); max-width: calc(100% - 32px); text-align: center }

@media (max-width: 860px) {
  .dos { grid-template-columns: minmax(0, 1fr) } .marco-foto { max-width: 380px }
  .portada { grid-template-columns: minmax(0, 1fr); align-content: center; padding-top: 80px }
  .arco-3d { order: 1; width: min(300px, 78vw) }
  .portada-texto { order: 2; text-align: center }
  .portada-botones { justify-content: center }
}
@media (prefers-reduced-motion: reduce) {
  .fondo-foto { animation: none }
  .fondo-video { display: none }
  .luz, .destello, .monograma .chispa { animation: none }
  .monograma .mechon { animation: none; stroke-dashoffset: 0 }
}