@font-face { font-family: "DM Serif Display"; src: url("fuentes/dm-serif-display.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fuentes/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --blanco: #ffffff;
  --rosa: #f8e4e5;
  --rosa-fuerte: #f1cfd2;
  --negro: #141010;
  --oro: #b8945a;
  --oro-texto: #6a4e1e;
  --oro-claro: #dcc08a;
  --gris: #443c3a;
  --titulos: "DM Serif Display", "Georgia", "Times New Roman", serif;
  --texto: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; scroll-padding-bottom: 120px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanco); color: var(--negro); font: 400 1.0625rem/1.6 var(--texto); }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--titulos); font-weight: 400; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--oro-texto); outline-offset: 3px; }
.oculto { position: absolute; }
[hidden] { display: none !important; }

.aviso { background: var(--rosa); padding: .45rem 1rem; font-size: .8125rem; line-height: 1.4; text-align: center; }

.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.75rem, 4vw, 2.5rem); padding: .15rem 1rem; background: var(--negro); color: var(--blanco); font-size: .875rem; }
.redes a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding-inline: .25rem; text-decoration: none; }
.redes svg { flex: none; color: var(--oro-claro); }
.redes a:hover { color: var(--oro-claro); }
.redes :focus-visible { outline-color: var(--oro-claro); }

.cabecera { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem clamp(1.25rem, 4vw, 3.5rem); background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); }
.cabecera-logo { width: 124px; flex: none; transition: opacity .25s; }
.cabecera-logo-oculto { opacity: 0; visibility: hidden; }
.cabecera nav { display: flex; gap: clamp(.9rem, 3vw, 2.25rem); font-size: .9375rem; }
.cabecera nav a { text-decoration: none; padding: .35rem 0; }
.cabecera nav a:hover { color: var(--oro-texto); }

.boton { display: inline-block; border: 1px solid transparent; border-radius: 999px; padding: .85rem 1.75rem; min-height: 48px; font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; }
.boton-negro { background: var(--negro); color: var(--blanco); }
.boton-negro:hover { background: var(--oro-texto); }
.boton-rosa { background: var(--rosa); color: var(--negro); }
.boton-rosa:hover { background: var(--blanco); }
.boton-ancho { width: 100%; }
.enlace { padding: .5rem 0; text-underline-offset: 5px; text-decoration-color: var(--oro); }

/* Portada: el logo a todo el ancho y la foto dentro de una uña gigante */
.portada { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 1.5rem; padding: 1.25rem clamp(1.25rem, 4vw, 3.5rem) 3.5rem; overflow: hidden; }
.portada-logo { width: 100%; max-width: 1500px; }
.portada-una { width: min(86vw, 460px); aspect-ratio: 4 / 5.2; }
.portada-una img { width: 100%; height: 100%; object-fit: cover; clip-path: url(#forma-una); animation: revelar 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.portada-texto { max-width: 34rem; text-align: center; }
.portada h1 { font-size: clamp(2.5rem, 9vw, 4.25rem); }
.portada-texto p { margin-top: 1rem; color: var(--gris); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; margin-top: 1.75rem; }

@keyframes revelar {
  from { opacity: 0; transform: translateY(5%) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* Colección: una exposición, con cada obra en forma de uña y su ficha debajo */
.coleccion { padding: clamp(3.5rem, 8vw, 6.5rem) 0; background: var(--rosa); }
.coleccion-cabeza, .filtros { padding-inline: clamp(1.25rem, 4vw, 3.5rem); }
.coleccion-cabeza p { max-width: 36rem; margin-top: .85rem; }
.filtros { display: flex; gap: .5rem; margin-top: 1.75rem; overflow-x: auto; scrollbar-width: none; }
.filtros button { flex: none; min-height: 44px; padding: .45rem 1.1rem; border: 1px solid var(--negro); border-radius: 999px; background: transparent; }
.filtros button[aria-pressed="true"] { background: var(--negro); color: var(--blanco); }
.obras { display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 320px); gap: 1.5rem; padding: 2.25rem clamp(1.25rem, 4vw, 3.5rem) 1rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: clamp(1.25rem, 4vw, 3.5rem); }
.obra { scroll-snap-align: start; display: flex; flex-direction: column; scroll-margin-top: 90px; }
.obra-una { aspect-ratio: 4 / 5.2; overflow: hidden; }
.obra-una img, .obra-una video { width: 100%; height: 100%; object-fit: cover; clip-path: url(#forma-una); }
.obra-una:has(video) { clip-path: url(#forma-una); }
.obra-una video { clip-path: none; object-position: 50% 30%; transform: scale(1.7); transform-origin: 42% 42%; }
.obra-numero { margin-top: 1rem; color: var(--oro-texto); font-size: .9375rem; }
.obra h3 { font: 400 1.125rem/1.3 var(--texto); }
.obra-boton { align-self: flex-start; min-height: 44px; margin-top: .6rem; padding: .4rem 0; border: 0; background: none; font-weight: 500; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 5px; }
.obra-boton[aria-pressed="true"] { color: var(--oro-texto); }
.obra-pausa { margin-top: 0; font-weight: 400; }

/* Precios: una carta impresa, en arco y con marco dorado */
.carta { display: grid; grid-template-columns: minmax(0, 680px); justify-content: center; align-items: center; padding: clamp(3rem, 7vw, 6rem) .75rem; background: var(--negro); }
.carta-hoja { padding: 4.5rem clamp(1.25rem, 5vw, 3.5rem) 3rem; border-radius: 50% 50% 28px 28px / 170px 170px 28px 28px; outline: 1px solid var(--oro); outline-offset: -9px; background: var(--blanco); color: var(--negro); text-align: center; }
.carta-logo { width: min(62%, 240px); margin-inline: auto; }
.carta h2 { margin-top: 1.1rem; font-size: clamp(2.5rem, 8vw, 3.5rem); }
.carta-intro { margin-top: .4rem; color: var(--gris); }
.carta-grupos { display: grid; gap: 2.25rem; margin-top: 2.25rem; text-align: left; }
.grupo h3 { display: flex; align-items: center; gap: 1rem; font: 400 1.75rem/1.2 var(--titulos); color: var(--oro-texto); text-align: center; }
.grupo h3::before, .grupo h3::after { content: ""; flex: 1; height: 1px; background: var(--oro); }
.grupo ul { list-style: none; margin: .6rem 0 0; padding: 0; }
.linea { position: relative; display: flex; align-items: baseline; gap: .6rem; min-height: 48px; padding: .65rem .6rem; border-radius: 12px; cursor: pointer; transition: background-color .15s; }
.linea:hover { background: #fcf3f3; }
.linea:has(input:checked) { background: var(--rosa); }
.linea input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.linea-marca { position: relative; flex: none; align-self: center; width: 20px; height: 20px; border: 1px solid var(--oro-texto); border-radius: 50%; }
.linea input:checked ~ .linea-marca { border-color: var(--negro); background: var(--negro); }
.linea input:checked ~ .linea-marca::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 6px; height: 11px; border: solid var(--blanco); border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }
.linea input:focus-visible ~ .linea-marca { outline: 2px solid var(--oro-texto); outline-offset: 3px; }
.linea-puntos { flex: 1; min-width: .75rem; border-bottom: 1px dotted var(--oro); transform: translateY(-.25em); }
.linea-precio { font-weight: 500; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.carta-cita { margin-top: 2.25rem; }
.carta-una { display: none; }

/* Tres pasos: cada número vive en una uña */
.visita { padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 3.5rem); text-align: center; }
.pasos { display: grid; gap: 2.75rem; max-width: 1040px; margin: 2.75rem auto 0; counter-reset: paso; }
.pasos li { counter-increment: paso; }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 84px; height: 109px; margin-inline: auto; padding-top: .6rem; background: var(--rosa); clip-path: url(#forma-una); font: 400 2.5rem/1 var(--titulos); color: var(--oro-texto); }
.pasos h3 { margin-top: .9rem; font: 500 1.25rem/1.3 var(--texto); }
.pasos p { max-width: 20rem; margin: .35rem auto 0; color: var(--gris); }

/* Reseñas */
.resenas { padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 3.5rem); background: var(--rosa); }
.resenas-cabeza { text-align: center; }
.resenas-cabeza p { margin-top: .75rem; }
.resenas-promedio { font-size: 1.125rem; font-weight: 500; }
.resenas-lista { display: grid; gap: 1.25rem; max-width: 1100px; margin: 2.25rem auto 0; padding: 0; list-style: none; }
.resenas-lista:empty { display: none; }
.resenas-lista li { padding: 1.5rem; border-radius: 4px 28px 4px 28px; background: var(--blanco); }
.resena-estrellas { color: var(--oro-texto); font-size: 1.125rem; letter-spacing: .12em; }
.resenas-lista li > p:nth-child(2) { margin-top: .5rem; overflow-wrap: anywhere; }
.resena-autora { margin-top: .75rem; color: var(--gris); font-size: .9375rem; overflow-wrap: anywhere; }
.resena-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; max-width: 34rem; margin: 2.75rem auto 0; padding: 2rem clamp(1.25rem, 5vw, 2.5rem); outline: 1px solid var(--oro); outline-offset: -8px; border-radius: 24px; background: var(--blanco); }
.resena-form h3 { font: 400 1.875rem/1.2 var(--titulos); text-align: center; }
.resena-form label { display: grid; gap: .2rem; font-size: .9375rem; font-weight: 500; }
.resena-form input:not([type="radio"]), .resena-form textarea { width: 100%; min-height: 46px; padding: .5rem .75rem; border: 1px solid #a89f9c; border-radius: 10px; background: var(--blanco); font-size: 1rem; font-weight: 400; resize: vertical; }
.estrellas { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem; margin: 0; padding: 0; border: 0; }
.estrellas legend { width: 100%; margin-bottom: .1rem; padding: 0; font-size: .9375rem; font-weight: 500; text-align: center; }
.estrellas label { position: relative; display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.875rem; line-height: 1; color: #cbbfb3; cursor: pointer; }
.estrellas label.activa { color: var(--oro-texto); }
.estrellas input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.estrellas label:has(input:focus-visible) { outline: 2px solid var(--oro-texto); outline-offset: 1px; border-radius: 8px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.campo-trampa { position: absolute; left: -9999px; }
.resena-estado { font-size: .9375rem; text-align: center; }
.resena-estado.es-error { color: #a12a32; }

/* Panel privado de reseñas */
.panel main { display: grid; gap: 1.25rem; max-width: 40rem; margin-inline: auto; padding: 2.5rem 1.25rem 4rem; }
.panel-logo { width: 200px; }
.panel h1 { font-size: 2.75rem; }
.panel h2 { margin-top: 1.5rem; font-size: 2rem; }
.panel-entrar { display: grid; gap: .9rem; }
.panel-entrar label { display: grid; gap: .2rem; font-weight: 500; }
.panel-entrar input { min-height: 46px; padding: .5rem .75rem; border: 1px solid #a89f9c; border-radius: 10px; font-size: 1rem; font-weight: 400; }
.panel-lista { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.panel-lista li { padding: 1.25rem; border: 1px solid var(--oro); border-radius: 14px; overflow-wrap: anywhere; }
.panel-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.panel-borrar { border-color: var(--negro); background: transparent; }
#contenido { display: grid; gap: 1rem; }
#contenido[hidden], .panel-entrar[hidden] { display: none; }

/* Cierre: cinco uñas abiertas, como una mano */
.cierre { padding: clamp(3.5rem, 8vw, 6rem) 1.25rem clamp(3rem, 6vw, 4.5rem); background: var(--negro); color: var(--blanco); text-align: center; }
.mano { display: flex; justify-content: center; align-items: flex-start; gap: clamp(.35rem, 1.5vw, 1rem); }
.mano img { width: clamp(44px, 16.5vw, 150px); min-width: 0; aspect-ratio: 4 / 5.2; object-fit: cover; clip-path: url(#forma-una); }
.mano img:nth-child(1) { margin-top: clamp(30px, 8vw, 70px); transform: rotate(-9deg); }
.mano img:nth-child(2) { margin-top: clamp(8px, 2.5vw, 22px); transform: rotate(-4deg); }
.mano img:nth-child(4) { margin-top: clamp(8px, 2.5vw, 22px); transform: rotate(4deg); }
.mano img:nth-child(5) { margin-top: clamp(30px, 8vw, 70px); transform: rotate(9deg); }
.cierre h2 { margin-top: 2.5rem; }
.cierre .enlace { color: var(--blanco); }
.cierre :focus-visible, .pie :focus-visible { outline-color: var(--oro-claro); }

.pie { display: grid; justify-items: center; gap: 1.5rem; padding: 0 1.25rem 2.5rem; background: var(--negro); color: #d9d2cf; font-size: .9375rem; text-align: center; }
.pie::before { content: ""; width: min(100%, 720px); height: 1px; margin-bottom: 1.25rem; background: var(--oro); }
.pie-logo { width: 190px; filter: invert(1); }
.pie-redes { display: flex; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.pie-redes a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--oro-claro); border-radius: 50%; color: var(--oro-claro); }
.pie-redes a:hover { background: var(--oro-claro); color: var(--negro); }
.pie-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; color: var(--blanco); }
.pie-menu a { padding: .5rem 0; text-decoration: none; }
.pie-menu a:hover { color: var(--oro-claro); }
body.con-barra .pie { padding-bottom: 7.5rem; }

/* Total: tarjeta flotante */
.barra { position: fixed; z-index: 20; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 560px; margin-inline: auto; padding: .6rem .6rem .6rem 1.25rem; border: 1px solid var(--oro); border-radius: 999px; background: var(--blanco); color: var(--negro); box-shadow: 0 10px 34px rgba(20, 16, 16, .32); }
.barra p { line-height: 1.25; min-width: 0; }
.barra strong { display: block; font-size: 1.1875rem; font-weight: 500; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.barra span { display: block; font-size: .875rem; color: var(--gris); }
.barra .boton { flex: none; }

/* Ventana de la cita */
.cita { width: min(100%, 30rem); max-height: 92dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 20px 20px 0 0; color: var(--negro); }
.cita::backdrop { background: rgba(20, 16, 16, .6); }
.cita[open] { animation: subir .28s ease-out; }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cita form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
.cita-cabeza { display: flex; align-items: center; justify-content: space-between; }
.cita h2 { font-size: 2.25rem; }
.cerrar { width: 44px; height: 44px; border: 0; background: none; font-size: 1.75rem; line-height: 1; }
.cita label { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: .2rem; font-size: .9375rem; font-weight: 500; }
.cita input, .cita select { width: 100%; min-width: 0; min-height: 46px; padding: .5rem .6rem; border: 1px solid #a89f9c; border-radius: 10px; background: var(--blanco); font-size: 1rem; font-weight: 400; }
.cita input[aria-invalid="true"] { border-color: #a12a32; }
.cita-doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.error { color: #a12a32; font-size: .9375rem; }
.vista-titulo { font-size: .9375rem; font-weight: 500; }
.burbuja { padding: .75rem .9rem; border-radius: 4px 14px 14px 14px; background: var(--rosa); font-size: .9375rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.cita-enviar { position: sticky; bottom: 0; margin-inline: -1.25rem; padding: .6rem 1.25rem; background: var(--blanco); }

@media (min-width: 760px) {
  .cita { margin: auto; border-radius: 20px; }
  .carta-hoja { padding-top: 6.5rem; border-radius: 50% 50% 28px 28px / 250px 250px 28px 28px; }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .resenas-lista { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (min-width: 1000px) {
  .portada { grid-template-columns: min(52vh, 420px) minmax(0, 34rem); justify-content: center; align-items: center; column-gap: clamp(3rem, 7vw, 6.5rem); padding-bottom: 5rem; }
  .portada-logo { grid-column: 1 / -1; width: min(100%, 860px); }
  .portada-una { width: 100%; }
  .portada-texto { text-align: left; justify-self: start; }
  .portada .acciones { justify-content: flex-start; }
  .obras { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; gap: 3rem 2.25rem; overflow: visible; }
  .obra:nth-child(4n + 2), .obra:nth-child(4n + 4) { margin-top: 3rem; }
}

@media (min-width: 1240px) {
  .carta { grid-template-columns: minmax(0, 1fr) 680px minmax(0, 1fr); column-gap: 3.5rem; }
  .carta-una { display: block; width: min(100%, 250px); aspect-ratio: 4 / 5.2; }
  .carta-una-izq { justify-self: end; }
  .carta-una img { width: 100%; height: 100%; object-fit: cover; clip-path: url(#forma-una); }
}

@media (max-width: 420px) {
  .cita-doble { grid-template-columns: minmax(0, 1fr); }
}


/* Menú */
.menu-amplio { display: none !important; }
.menu-movil { position: relative; }
.menu-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem 1.1rem; border: 1px solid var(--negro); border-radius: 999px; font-size: .9375rem; cursor: pointer; list-style: none; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil[open] summary { background: var(--negro); color: var(--blanco); }
.cabecera .menu-movil nav { position: absolute; right: 0; top: calc(100% + .5rem); display: grid; gap: 0; width: min(78vw, 260px); padding: .5rem 1.25rem; border: 1px solid var(--oro); border-radius: 18px; background: var(--blanco); box-shadow: 0 14px 34px rgba(20, 16, 16, .22); font-size: 1.0625rem; }
.cabecera .menu-movil nav a { padding: .7rem 0; border-bottom: 1px solid var(--rosa); }
.cabecera .menu-movil nav a:last-child { border-bottom: 0; }
.cabecera nav a[aria-current="page"] { color: var(--oro-texto); font-weight: 500; }
.boton:not(.boton-negro):not(.boton-rosa) { border-color: var(--negro); }

/* Trabajos */
.obra h3 { font: 500 1.125rem/1.3 var(--texto); }
.obra-precio { color: var(--gris); font-variant-numeric: lining-nums; }
.obra-una:has(video.video-girado) { position: relative; container-type: size; }
.obra-una video.video-girado { position: absolute; top: 50%; left: 50%; width: 171cqh; max-width: none; height: auto; aspect-ratio: 16 / 9; transform: translate(calc(-50% - 8.7cqw), calc(-50% - 2.4cqh)) rotate(90deg); transform-origin: center; object-position: center; }

/* Filas de la carta */
.linea { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: .7rem; }
.linea-una { display: block; width: 44px; height: 57px; background: var(--rosa); clip-path: url(#forma-una); }
.linea-una img { width: 100%; height: 100%; object-fit: cover; }
.linea-textos { display: grid; line-height: 1.3; }
.linea-nombre { font-weight: 500; }
.linea-descripcion { margin-top: .1rem; color: var(--gris); font-size: .875rem; }
.linea-consultar { color: var(--oro-texto); font-size: .8125rem; font-weight: 400; text-align: right; white-space: normal; max-width: 4.5rem; line-height: 1.2; }
.linea:has(input:checked) .linea-una { background: var(--blanco); }
.carta-nota { margin-top: 2.25rem; padding: 1.25rem; border-radius: 16px; background: var(--rosa); text-align: left; }
.carta-nota h3 { font: 500 1.0625rem/1.3 var(--texto); }
.carta-nota p { margin-top: .35rem; font-size: .9375rem; }
.carta-cita { margin-top: 1.25rem; }

/* Domicilio */
.visita .seccion-intro, .seccion-intro { max-width: 42rem; margin: 1rem auto 0; color: var(--gris); }
.pasos { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.pasos p { max-width: 22rem; color: var(--negro); }
.pasos li::before { width: 70px; height: 91px; font-size: 2rem; }
.condiciones { max-width: 42rem; margin: 2.5rem auto 0; text-align: left; border-block: 1px solid var(--oro); }
.condiciones summary, .preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: .85rem 0; font-weight: 500; line-height: 1.35; cursor: pointer; list-style: none; }
.condiciones summary::-webkit-details-marker, .preguntas summary::-webkit-details-marker { display: none; }
.condiciones summary::after, .preguntas summary::after { content: "+"; flex: none; color: var(--oro-texto); font: 400 1.75rem/1 var(--titulos); transition: transform .2s; }
.condiciones[open] summary::after, .preguntas details[open] summary::after { transform: rotate(45deg); }
.lista-una { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.lista-una li { position: relative; padding-left: 1.5rem; }
.lista-una li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 14px; background: var(--oro); clip-path: url(#forma-una); }
.condiciones .lista-una { padding-bottom: 1.25rem; }

/* Aviso de la Academy */
.academy-aviso { display: grid; gap: 2rem; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3.5rem); background: var(--negro); color: var(--blanco); }
.academy-aviso h2 { margin-top: .4rem; }
.academy-aviso p { margin-top: .9rem; }
.lema-academy { color: var(--oro-claro); font-size: .9375rem; letter-spacing: .04em; }
.academy-aviso .lema-academy { margin-top: 0; }
.academy-lema-grande { margin: 0; color: var(--oro-claro); font: 400 clamp(3rem, 12vw, 7rem)/1.02 var(--titulos); }
.acciones-izq { justify-content: flex-start; }

/* Experiencia y comunidad */
.experiencia { display: grid; gap: 2.5rem; padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 3.5rem); background: var(--rosa); }
.experiencia-texto p { max-width: 38rem; margin-top: 1rem; }
.comunidad { padding: 2rem clamp(1.25rem, 4vw, 2.5rem); border-radius: 24px; outline: 1px solid var(--oro); outline-offset: -8px; background: var(--blanco); }
.comunidad h3 { font: 400 clamp(1.875rem, 5vw, 2.5rem)/1.15 var(--titulos); }
.comunidad > p { margin-top: .75rem; }
.comunidad-temas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1.5rem; padding: 0; list-style: none; }
.comunidad-temas li { padding: .3rem .85rem; border-radius: 999px; background: var(--rosa); font-size: .9375rem; }

/* Reseñas sobre blanco */
.resenas { background: var(--blanco); }
.resenas-lista li { background: var(--rosa); }
.casilla { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .6rem !important; font-weight: 400 !important; line-height: 1.4; }
.casilla input { width: 20px !important; height: 20px; min-height: 0 !important; margin: .1rem 0 0; accent-color: var(--negro); }

/* Ventana de la cita */
.cita-lugar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; border: 0; }
.cita-lugar legend { margin-bottom: .25rem; padding: 0; font-size: .9375rem; font-weight: 500; }
.cita-lugar label { position: relative; display: block; }
.cita-lugar input { position: absolute; inset: 0; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.cita-lugar span { display: grid; place-items: center; min-height: 46px; padding: .4rem; border: 1px solid #a89f9c; border-radius: 10px; font-weight: 400; }
.cita-lugar input:checked + span { border-color: var(--negro); background: var(--negro); color: var(--blanco); }
.cita-lugar input:focus-visible + span { outline: 2px solid var(--oro-texto); outline-offset: 2px; }
.cita-nota { color: var(--gris); font-size: .8125rem; line-height: 1.4; }

/* Páginas interiores */
.encabezado { padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 4vw, 3.5rem); text-align: center; }
.encabezado h1 { font-size: clamp(2.75rem, 9vw, 5rem); }
.encabezado p { max-width: 42rem; margin: 1rem auto 0; color: var(--gris); }
.encabezado-foto { display: grid; gap: 2rem; justify-items: center; text-align: left; }
.encabezado-foto p { margin-inline: 0; }
.encabezado-una { width: min(70vw, 340px); aspect-ratio: 4 / 5.2; }
.encabezado-una img { width: 100%; height: 100%; object-fit: cover; clip-path: url(#forma-una); animation: revelar 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.frase-negra { padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 6vw, 5rem); background: var(--negro); color: var(--blanco); text-align: center; }
.frase-negra p { max-width: 54rem; margin-inline: auto; font: 400 clamp(1.875rem, 5vw, 3.25rem)/1.15 var(--titulos); }
.bloque { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3.5rem); }
.bloque > * { max-width: 1040px; margin-inline: auto; }
.bloque-corto { padding-block: 1.75rem; }
.bloque-corto h2 { font-size: clamp(1.875rem, 5vw, 2.5rem); }
.bloque-rosa { background: var(--rosa); }
.bloque-negro { background: var(--negro); color: var(--blanco); }
.bloque-negro .seccion-intro { margin-inline: auto 0; margin-left: auto; margin-right: auto; color: #d9d2cf; }
.columna-texto { display: grid; gap: 1rem; margin-top: 1.25rem; }
.columna-texto > p { max-width: 44rem; }
.valores { display: grid; gap: 1.5rem; margin: 2rem auto 0; padding: 0; list-style: none; }
.valores li { padding-top: 1rem; border-top: 1px solid var(--oro); }
.valores h3 { font: 400 1.875rem/1.2 var(--titulos); }
.valores p { margin-top: .25rem; }

/* Pestañas */
.pestanas-lista { display: flex; gap: .5rem; margin-block: 1.75rem; padding-bottom: .25rem; overflow-x: auto; scrollbar-width: none; }
.pestanas-lista button { flex: none; min-height: 44px; padding: .45rem 1.1rem; border: 1px solid var(--negro); border-radius: 999px; background: transparent; transition: background-color .2s, color .2s; }
.pestanas-lista button[aria-selected="true"] { background: var(--negro); color: var(--blanco); }
.panel-pestana { animation: aparecer .35s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel-pestana > h3 { margin-bottom: 1rem; font: 400 clamp(2rem, 6vw, 3rem)/1.1 var(--titulos); color: var(--oro-texto); }
.panel-pestana .lista-una { max-width: 48rem; }
.bloque-rosa .panel-pestana > h3 { color: var(--negro); }
.gracias { margin-top: 2.25rem; font: 400 1.5rem/1.25 var(--titulos); }

/* Políticas */
.saltos { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin-top: 1.5rem; }
.saltos a { padding: .4rem 0; text-underline-offset: 5px; text-decoration-color: var(--oro); }
.datos-clave { display: grid; gap: 1.5rem; padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem); background: var(--negro); color: var(--blanco); text-align: center; }
.datos-clave strong { display: block; color: var(--oro-claro); font: 400 clamp(3rem, 10vw, 5rem)/1 var(--titulos); }
.datos-clave span { display: block; max-width: 18rem; margin: .4rem auto 0; }
.importante { margin-top: 1.25rem; padding: 1rem 1.15rem; border-left: 3px solid var(--oro); border-radius: 0 12px 12px 0; background: var(--blanco); }
.bloque:not(.bloque-rosa) .importante { background: var(--rosa); }
.cuidado { display: grid; gap: 1.5rem; }
.cuidado > div > p:first-child { margin-bottom: 1rem; }
.cuidado-una { width: min(52vw, 220px); aspect-ratio: 4 / 5.2; }
.cuidado-una img { width: 100%; height: 100%; object-fit: cover; clip-path: url(#forma-una); }
.preguntas { margin-top: 1.5rem; border-top: 1px solid var(--oro); }
.preguntas details { border-bottom: 1px solid var(--oro); }
.preguntas details > p { max-width: 46rem; padding-bottom: 1.25rem; color: var(--gris); }
.preguntas details > ul { padding-bottom: 1.25rem; }

/* Academy */
.academy-portada { display: grid; justify-items: center; gap: 1.25rem; padding: clamp(4rem, 10vw, 7.5rem) 1.25rem; background: var(--negro); color: var(--blanco); text-align: center; }
.academy-portada h1 { font-size: clamp(3rem, 11vw, 6.5rem); }
.academy-portada .academy-lema-grande { font-size: clamp(1.875rem, 6vw, 3.25rem); }
.cursos { display: grid; gap: 1.5rem; margin-top: 2rem; }
.curso { display: grid; gap: 1rem; justify-items: start; padding: 2rem clamp(1.25rem, 4vw, 2.5rem); border-radius: 24px; outline: 1px solid var(--oro); outline-offset: -8px; background: var(--blanco); }
.curso > * { width: 100%; }
.curso > .boton { width: auto; margin-top: .5rem; }
.curso h3 { font: 400 clamp(1.875rem, 6vw, 2.75rem)/1.12 var(--titulos); }
.curso-cabeza p { margin-top: .6rem; max-width: 46rem; color: var(--gris); }
.curso h4 { margin: .5rem 0 0; font-size: 1.0625rem; font-weight: 500; }
.curso-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 0; padding: 1rem; border-radius: 14px; background: var(--rosa); }
.curso-ficha dt { color: var(--oro-texto); font-size: .875rem; }
.curso-ficha dd { margin: 0; font-weight: 500; line-height: 1.3; }
.modulos { margin-top: 0; }
.curso-temas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.curso-temas li { padding: .3rem .85rem; border-radius: 999px; background: var(--rosa); font-size: .9375rem; }
.metodo { display: grid; gap: 1.5rem; margin-top: 2.25rem; counter-reset: metodo; }
.metodo li { counter-increment: metodo; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; }
.metodo li::before { content: counter(metodo); grid-row: span 2; color: var(--oro-claro); font: 400 3rem/1 var(--titulos); }
.metodo h3 { font: 500 1.1875rem/1.3 var(--texto); }
.metodo p { color: #d9d2cf; }

/* Pie */
.pie-lema { font: 400 1.625rem/1.2 var(--titulos); color: var(--blanco); }
.pie-datos { display: grid; gap: .5rem 2.5rem; margin: 0; }
.pie-datos dt { color: var(--oro-claro); font-size: .875rem; }
.pie-datos dd { margin: 0; color: var(--blanco); }
.pie-datos a { text-underline-offset: 4px; }

/* Enlaces */
.pagina-enlaces { min-height: 100dvh; background: var(--rosa); }
.enlaces { display: grid; justify-items: center; gap: 1.25rem; width: min(100%, 26rem); margin-inline: auto; padding: 2.5rem 1.25rem 3rem; }
.enlaces h1 { width: 78%; }
.enlaces-una { width: 58%; aspect-ratio: 4 / 5.2; }
.enlaces-una img { width: 100%; height: 100%; object-fit: cover; clip-path: url(#forma-una); }
.enlaces p { text-align: center; }
.enlaces ul { display: grid; gap: .7rem; width: 100%; margin: .5rem 0 0; padding: 0; list-style: none; }
.enlaces .boton { display: block; width: 100%; }
.enlaces .boton:not(.boton-negro):hover { background: var(--blanco); }

@media (min-width: 620px) {
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos-clave { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cuidado { grid-template-columns: 220px minmax(0, 1fr); gap: 3rem; align-items: start; }
  .pie-datos { grid-template-columns: repeat(2, auto); }
}

@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .academy-aviso { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4rem; }
  .experiencia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; align-items: center; }
  .encabezado-foto { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 4rem; align-items: center; max-width: 1200px; margin-inline: auto; }
  .valores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metodo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .metodo li { display: block; }
  .pie-datos { grid-template-columns: repeat(4, auto); }
}

@media (min-width: 1000px) {
  .menu-amplio { display: flex !important; }
  .menu-movil { display: none; }
}


/* Ajustes finales */
.condiciones summary::after, .preguntas summary::after { font: 300 1.75rem/1 var(--texto); }
.linea-una:empty { display: grid; place-items: center; }
.linea-una:empty::after { content: "M"; padding-top: .55rem; color: var(--oro-texto); font: 400 1.0625rem/1 var(--titulos); }
.academy-formas { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.academy-formas li { padding: .3rem .9rem; border: 1px solid var(--oro-claro); border-radius: 999px; font-size: .9375rem; }
.academy-aclaracion { max-width: 34rem; color: #d9d2cf; font-size: .875rem; line-height: 1.45; }
.academy-portada h1 { font-size: clamp(2.75rem, 9vw, 5.5rem); max-width: 16ch; }
@media (max-width: 619px) {
  .pasos { gap: 1rem; text-align: left; }
  .pasos li { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; column-gap: 1rem; }
  .pasos li::before { width: 54px; height: 70px; margin: 0; font-size: 1.625rem; }
  .pasos p { max-width: none; margin: 0; }
}

.linea-una { width: 58px; height: 75px; }


/* Versión oficial: tipografía */
body { font-size: 1.0625rem; line-height: 1.65; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
h1, h2 { font-weight: 400; letter-spacing: -.012em; line-height: 1.06; }
h2 { font-size: clamp(2.5rem, 6.5vw, 4.25rem); }
.portada h1 { font-size: clamp(2.5rem, 8vw, 4.25rem); }
.encabezado h1 { font-size: clamp(2.75rem, 8vw, 4.75rem); }
.grupo h3, .valores h3, .comunidad h3, .curso h3, .resena-form h3, .panel-pestana > h3, .gracias, .pie-lema, .frase-negra p { font-weight: 400; letter-spacing: -.008em; }
.grupo h3 { font-size: 1.625rem; }
.valores h3 { font-size: 1.625rem; }
.gracias { font-size: 1.375rem; }
.pie-lema { font-size: 1.5rem; }
.boton { font-weight: 600; letter-spacing: .01em; font-size: 1rem; transition: background-color .2s, color .2s, transform .2s; }
.boton:hover { transform: translateY(-1px); }
.cabecera nav { font-size: .9375rem; font-weight: 500; }
.redes { font-weight: 500; font-size: .8125rem; letter-spacing: .01em; }
.obra h3 { font: 600 1.0625rem/1.3 var(--texto); }
.obra-numero { font-size: .875rem; font-weight: 500; letter-spacing: .02em; }
.linea-nombre { font-weight: 600; }
.linea-precio { font-weight: 600; }
.pasos h3, .metodo h3, .carta-nota h3, .curso h4 { font-weight: 600; }
.condiciones summary, .preguntas summary { font-weight: 600; }
.preguntas summary::after, .condiciones summary::after { font-weight: 300; }
.academy-lema-grande { font-weight: 400; letter-spacing: -.015em; }
.datos-clave strong { font-weight: 400; letter-spacing: -.02em; }
.pasos li::before { font-weight: 400; }
.metodo li::before { font-weight: 400; }
.linea-una:empty::after { font-weight: 500; }

/* Carruseles */
.carrusel { position: relative; display: grid; justify-items: center; gap: .85rem; width: min(86vw, 460px); }
.carrusel-marco { position: relative; width: 100%; aspect-ratio: 4 / 5.2; overflow: hidden; clip-path: url(#forma-una); touch-action: pan-y pinch-zoom; cursor: grab; user-select: none; animation: revelar 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.carrusel-marco:active { cursor: grabbing; }
.carrusel-marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: none; opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform 5s ease-out; animation: none; pointer-events: none; -webkit-user-drag: none; }
.carrusel-marco img.activa { opacity: 1; transform: scale(1); }
.carrusel-control { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.carrusel-control button { min-width: 44px; min-height: 44px; padding: .2rem .7rem; border: 0; border-radius: 999px; background: none; font-weight: 500; cursor: pointer; }
.carrusel-control button:hover { background: var(--rosa); }
.carrusel-control [data-anterior], .carrusel-control [data-siguiente] { font-size: 1.5rem; line-height: 1; }
.encabezado-foto .carrusel { width: min(70vw, 340px); }
.encabezado-una, .portada-una { width: 100%; }

/* Galería deslizable */
.galeria { position: relative; margin-top: 1rem; --ancho-obra: min(72vw, 340px); }
.obras { display: flex !important; gap: 1.5rem; padding: 1.5rem calc(50% - var(--ancho-obra) / 2) 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.obras::-webkit-scrollbar, .filtros::-webkit-scrollbar, .pestanas-lista::-webkit-scrollbar { display: none; }
.obras.arrastrando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.obras.sin-iman { scroll-snap-type: none; }
.obras { position: relative; }
.obras .obra { flex: 0 0 var(--ancho-obra); margin-top: 0 !important; scroll-snap-align: center; }
.obra .obra-una { position: relative; transform: scale(var(--foco, 1)) rotate(var(--giro, 0deg)); will-change: transform; }
.obra-una img { -webkit-user-drag: none; user-select: none; }
.obra-ampliar { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.arrastrando .obra-ampliar { cursor: grabbing; }
.obra-ampliar:focus-visible { outline-offset: -4px; }
.galeria-flecha { position: absolute; z-index: 2; top: 40%; display: none; width: 52px; height: 52px; border: 1px solid var(--negro); border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 1.75rem; line-height: 1; cursor: pointer; transition: background-color .2s, color .2s; }
.galeria-flecha:hover { background: var(--negro); color: var(--blanco); }
.galeria-anterior { left: clamp(1rem, 4vw, 3.5rem); }
.galeria-siguiente { right: clamp(1rem, 4vw, 3.5rem); }

/* Visor a pantalla completa */
.visor { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 1rem; border: 0; background: rgba(20, 16, 16, .96); color: var(--blanco); overflow: hidden; }
.visor[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .25rem; animation: aparecer .25s ease-out; }
.visor::backdrop { background: var(--negro); }
.visor figure { display: grid; justify-items: center; gap: .75rem; min-width: 0; margin: 0; touch-action: pan-y pinch-zoom; user-select: none; }
.visor-medio { position: relative; display: grid; place-items: center; width: 100%; height: calc(100dvh - 7rem); overflow: hidden; container-type: size; }
.visor-medio img, .visor-medio video { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 14px; object-fit: contain; -webkit-user-drag: none; }
.visor-medio .visor-girado { position: absolute; top: 50%; left: 50%; max-width: none; max-height: none; width: min(100cqh, 177cqw); height: auto; aspect-ratio: 16 / 9; transform: translate(-50%, -50%) rotate(90deg); }
.visor figure:has(.visor-pausa:not([hidden])) .visor-medio { height: calc(100dvh - 10.5rem); }
.visor figcaption { text-align: center; font-size: .9375rem; }
.visor-flecha, .visor-cerrar { width: 48px; height: 48px; padding: 0; border: 1px solid var(--oro-claro); border-radius: 50%; background: rgba(20, 16, 16, .7); color: var(--oro-claro); font-size: 1.625rem; line-height: 1; cursor: pointer; }
.visor-flecha:hover, .visor-cerrar:hover { background: var(--oro-claro); color: var(--negro); }
.visor-cerrar { position: absolute; z-index: 2; top: 1rem; right: 1rem; }
.visor-pausa { min-height: 44px; padding: .3rem 1rem; border: 1px solid var(--oro-claro); border-radius: 999px; background: none; color: var(--oro-claro); font-size: .875rem; cursor: pointer; }
.visor :focus-visible { outline-color: var(--oro-claro); }
@media (max-width: 619px) {
  .visor[open] { grid-template-columns: minmax(0, 1fr); padding: .5rem; }
  .visor-flecha { position: absolute; z-index: 2; bottom: .75rem; }
  #visor-anterior { left: .75rem; }
  #visor-siguiente { right: .75rem; }
  .visor figcaption { padding-inline: 3.75rem; }
  .visor-medio { height: calc(100dvh - 7.5rem); }
  .visor figure:has(.visor-pausa:not([hidden])) .visor-medio { height: calc(100dvh - 11rem); }
}
@media (min-width: 760px) {
  .galeria { --ancho-obra: 320px; }
  .galeria-flecha { display: block; }
}
@media (min-width: 1000px) {
  .portada .carrusel { width: 100%; }
}


/* Títulos firmes y textos más oscuros */
h1, h2, h3, .frase-negra p, .gracias, .pie-lema { letter-spacing: 0; }
h1, h2 { color: inherit; font-weight: 400; line-height: 1.1; }
h2 { font-size: clamp(2.375rem, 6vw, 3.75rem); }
.portada h1 { font-size: clamp(2.5rem, 7.5vw, 4rem); }
.encabezado h1 { font-size: clamp(2.5rem, 7.5vw, 4.25rem); }
.academy-portada h1 { font-size: clamp(2.5rem, 8vw, 4.75rem); }
.coleccion-cabeza p, .carta-intro, .seccion-intro, .encabezado p, .portada-texto p, .curso-cabeza p, .pasos p, .preguntas details > p { color: var(--gris); }
.coleccion-cabeza p { color: var(--negro); }
body { color: var(--negro); }
.cabecera nav { font-weight: 500; color: var(--negro); }
.academy-lema-grande { letter-spacing: 0; }

/* Galería en 3D */
.obras { align-items: flex-start; }
.obra .obra-una { transform: perspective(1100px) rotateY(var(--giro, 0deg)) scale(var(--foco, 1)); filter: brightness(var(--brillo, 1)); transition: transform .28s ease-out, filter .28s ease-out; transform-origin: center 60%; }
.obras.arrastrando .obra .obra-una { transition: none; }
.obra .obra-una:hover { filter: brightness(1.04); }
.obra > :not(.obra-una) { opacity: var(--texto-foco, 1); transition: opacity .28s ease-out; }
.obra:focus-within > :not(.obra-una) { opacity: 1; }
.galeria .obra { transition: opacity .75s cubic-bezier(.2, .7, .2, 1), translate .75s cubic-bezier(.2, .7, .2, 1); }
.galeria:not(.vista) .obra { opacity: 0; translate: 0 64px; }
.galeria.vista .obra { transition-delay: calc(var(--orden, 0) * 110ms); }
.galeria-pausa { display: block; min-height: 44px; margin: 0 auto; padding: .3rem 1.1rem; border: 0; border-radius: 999px; background: none; font-size: .9375rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 5px; cursor: pointer; }
.galeria-pausa:hover { color: var(--oro-texto); }


/* Títulos: las letras suben en dorado y se asientan en su color */
.palabra { display: inline-block; white-space: nowrap; perspective: 600px; }
.titulo-animado:not(.titulo-visto) .letra { opacity: 0; }
.letra { display: inline-block; }
.titulo-visto .letra { animation: letra-sube .95s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i) * var(--ritmo, 28ms)); transform-origin: 50% 100%; }
@keyframes letra-sube {
  0% { opacity: 0; color: var(--oro); transform: translateY(.75em) rotateX(-80deg) scale(.92); }
  55% { opacity: 1; color: var(--oro); transform: translateY(-.05em) rotateX(8deg) scale(1.03); }
  100% { opacity: 1; transform: none; }
}

/* Carta: el arco sube, sus líneas se abren y cada fila entra en orden */
#carta .carta-hoja { opacity: 0; transform: translateY(70px) scale(.97); transition: opacity .8s ease-out, transform 1s cubic-bezier(.2, .8, .2, 1); }
#carta.carta-vista .carta-hoja { opacity: 1; transform: none; }
#carta .carta-una { opacity: 0; transition: opacity 1s ease-out .35s, transform 1.2s cubic-bezier(.2, .8, .2, 1) .35s; }
#carta .carta-una-izq { transform: translateX(-70px) rotate(-14deg); }
#carta .carta-una-der { transform: translateX(70px) rotate(14deg); }
#carta.carta-vista .carta-una { opacity: 1; }
#carta.carta-vista .carta-una-izq { transform: rotate(-6deg); }
#carta.carta-vista .carta-una-der { transform: rotate(6deg); }
#carta .grupo h3::before, #carta .grupo h3::after { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--fila, 0) * 45ms + .3s); }
#carta .grupo h3::before { transform-origin: right; }
#carta .grupo h3::after { transform-origin: left; }
#carta.carta-vista .grupo h3::before, #carta.carta-vista .grupo h3::after { transform: none; }
#carta .linea { opacity: 0; transform: translateX(-22px); transition: opacity .55s ease-out calc(var(--fila, 0) * 45ms + .25s), transform .6s cubic-bezier(.2, .8, .2, 1) calc(var(--fila, 0) * 45ms + .25s), background-color .2s; }
#carta.carta-vista .linea { opacity: 1; transform: none; }
#carta .linea-una { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); transform: scale(.65) rotate(-10deg); }
#carta.carta-vista .linea-una { transform: none; transition-delay: calc(var(--fila, 0) * 45ms + .3s); }
.linea:hover .linea-una { transform: scale(1.1) rotate(-3deg) !important; transition-delay: 0s !important; }
.linea:has(input:checked) .linea-una { transform: scale(1.14) rotate(-5deg) !important; transition-delay: 0s !important; }
.linea input:checked ~ .linea-marca { animation: marca-salta .4s cubic-bezier(.3, 1.8, .5, 1); }
.linea:has(input:checked) .linea-precio { animation: precio-salta .4s ease-out; }
@keyframes marca-salta { 0% { transform: scale(.5); } 100% { transform: scale(1); } }
@keyframes precio-salta { 40% { transform: scale(1.14); color: var(--oro-texto); } }
.total-salta { animation: precio-salta .4s ease-out; transform-origin: left; }

/* Aviso de cookies y pie legal */
.aviso-cookies { position: fixed; z-index: 30; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; max-width: 34rem; padding: .85rem 1rem; border: 1px solid var(--oro); border-radius: 18px; background: var(--blanco); color: var(--negro); box-shadow: 0 10px 34px rgba(20, 16, 16, .3); font-size: .9375rem; line-height: 1.4; }
.aviso-cookies p { flex: 1 1 14rem; }
.aviso-cookies .boton { min-height: 44px; padding: .55rem 1.25rem; }
body.con-barra .aviso-cookies { bottom: calc(5.75rem + env(safe-area-inset-bottom)); }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem 1.25rem; font-size: .875rem; }
.pie-legal a { padding: .35rem 0; text-underline-offset: 4px; }
.pie-autor { max-width: 40rem; color: #d9d2cf; font-size: .875rem; }
.pie .pie-autor { margin-top: -.5rem; }
.bloque-corto { scroll-margin-top: 80px; }
.columna-texto strong { font-weight: 600; }


/* Fotos con movimiento de cámara, como un video */
@keyframes vida-a { from { transform: scale(1); } to { transform: scale(1.07) translate(1.5%, -1.5%); } }
@keyframes vida-b { from { transform: scale(1.07) translate(-1.5%, 1.5%); } to { transform: scale(1); } }
@keyframes vida-c { from { transform: scale(1.01); } to { transform: scale(1.08) translate(-1.5%, 1.5%); } }
@keyframes vida-d { from { transform: scale(1.08) translate(1.5%, 1.5%); } to { transform: scale(1.01); } }
.obra .obra-una { clip-path: url(#forma-una); overflow: hidden; }
.obra .obra-una img { clip-path: none; animation: vida-a 9s ease-in-out infinite alternate; animation-play-state: var(--vida, paused); }
.obra:nth-child(4n + 2) .obra-una img { animation-name: vida-b; animation-duration: 10s; }
.obra:nth-child(4n + 3) .obra-una img { animation-name: vida-c; animation-duration: 8.5s; }
.obra:nth-child(4n) .obra-una img { animation-name: vida-d; animation-duration: 11s; }
.carrusel-marco img { transform: none; }
.carrusel-marco img.activa { animation: vida-a 10s ease-in-out infinite alternate; }
.carrusel-marco img:nth-child(2n).activa { animation-name: vida-b; }
.carrusel-marco img:nth-child(3n).activa { animation-name: vida-c; }
.mano img { animation: dedo-flota 3.4s ease-in-out infinite alternate; }
.mano img:nth-child(2) { animation-delay: -.7s; }
.mano img:nth-child(3) { animation-delay: -1.4s; }
.mano img:nth-child(4) { animation-delay: -2.1s; }
.mano img:nth-child(5) { animation-delay: -2.8s; }
@keyframes dedo-flota { from { translate: 0 0; } to { translate: 0 -12px; } }
html.sin-animar *, html.sin-animar *::before, html.sin-animar *::after { animation-play-state: paused !important; }

/* Cinta de trabajos en movimiento */
.cinta { overflow: hidden; padding: 1.5rem 0 3rem; background: var(--blanco); }
.cinta-fila { --separacion: clamp(.75rem, 2vw, 1.5rem); display: flex; gap: var(--separacion); padding-right: var(--separacion); width: max-content; animation: cinta-corre 70s linear infinite; }
.cinta:hover .cinta-fila { animation-play-state: paused; }
.cinta img { flex: none; width: clamp(110px, 16vw, 190px); aspect-ratio: 4 / 5.2; object-fit: cover; clip-path: url(#forma-una); }
.cinta img:nth-child(2n) { translate: 0 14px; }
@keyframes cinta-corre { to { transform: translateX(-50%); } }

/* Destello dorado sobre el logo */
.portada-logo-marco { position: relative; width: 100%; max-width: 1500px; }
.portada-logo-marco .portada-logo { width: 100%; }
.logo-brillo { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url("logo.svg") center / contain no-repeat; mask: url("logo.svg") center / contain no-repeat; pointer-events: none; }
.logo-brillo::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(105deg, transparent 10%, #e8cf9a 42%, #fff4d6 50%, #e8cf9a 58%, transparent 90%); transform: translateX(-110%); animation: logo-destello 6.5s ease-in-out 1s infinite; }
@keyframes logo-destello { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(240%); } }

/* Controles ocultos para el cliente: solo aparecen al navegar con teclado */
.carrusel-control { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.carrusel-control:focus-within { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.pausar-animaciones { padding: .35rem 0; border: 0; background: none; color: inherit; font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

@media (min-width: 1000px) {
  .portada-logo-marco { grid-column: 1 / -1; width: min(100%, 860px); }
  .cinta img { width: clamp(150px, 13vw, 200px); }
}


/* Lo legal, discreto */
.pie .pie-autor { max-width: 40rem; margin-top: .25rem; color: #b9b0ad; font-size: .75rem; line-height: 1.5; }
.pie-autor a { padding: .35rem 0; text-underline-offset: 3px; }
.aviso-cookies { right: auto; gap: .25rem .75rem; flex-wrap: nowrap; max-width: calc(100vw - 1.5rem); padding: .3rem .4rem .3rem .85rem; border-color: var(--rosa-fuerte); border-radius: 999px; box-shadow: 0 4px 16px rgba(20, 16, 16, .14); font-size: .75rem; }
.aviso-cookies p { flex: 0 1 auto; }
.aviso-cerrar { flex: none; min-height: 36px; padding: .2rem .7rem; border: 0; border-radius: 999px; background: var(--rosa); font-size: .75rem; font-weight: 600; cursor: pointer; }
.aviso-cerrar:hover { background: var(--rosa-fuerte); }
/* La pausa general solo aparece al navegar con el teclado */
.pausar-animaciones { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pausar-animaciones:focus-visible { position: static; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--blanco); }


/* Alejamiento: cada foto retrocede despacio y termina mostrando el trabajo completo */
.obra .obra-una img { animation: none !important; transform: scale(1.12); transition: transform .7s ease-out; }
.obra.en-centro .obra-una img { transform: scale(1); transition: transform 4.2s cubic-bezier(.2, .6, .25, 1); }
.carrusel-marco img { transform: scale(1.12); transition: opacity .9s ease, transform 0s linear .9s; }
.carrusel-marco img.activa { animation: none !important; transform: scale(1); transition: opacity .9s ease, transform 4.8s cubic-bezier(.2, .6, .25, 1); }
@media (prefers-reduced-motion: reduce) {
  .obra .obra-una img, .carrusel-marco img { transform: none; }
}

/* Enlaces legales discretos */
.pie .pie-legal { gap: 0 .9rem; margin-top: .25rem; color: #b9b0ad; font-size: .75rem; }
.pie .pie-legal a { padding: .55rem .1rem; text-decoration: none; }
.pie .pie-legal a:hover { color: var(--blanco); text-decoration: underline; }
.pie .pie-autor { margin-top: -1.25rem; }

/* Remate blanco al final de la página */
.pie { padding-bottom: 0; }
body.con-barra .pie { padding-bottom: 0; }
.pie-final { display: grid; justify-items: center; gap: .1rem; width: calc(100% + 2.5rem); margin: .75rem -1.25rem 0; padding: 1rem 1.25rem 1.25rem; background: var(--blanco); color: var(--gris); }
body.con-barra .pie-final { padding-bottom: 6.5rem; }
.pie .pie-final .pie-legal { margin: 0; color: var(--gris); }
.pie .pie-final .pie-legal a:hover { color: var(--negro); }
.pie .pie-final .pie-autor { margin: 0; color: var(--gris); }
.pie-final :focus-visible { outline-color: var(--oro-texto); }
.pie-final .pausar-animaciones:focus-visible { color: var(--negro); }

/* Logos de redes en movimiento */
.redes svg, .pie-redes svg { animation: logo-saluda 3.6s ease-in-out infinite; transform-origin: 50% 60%; }
.redes a:nth-child(2) svg, .pie-redes li:nth-child(2) svg { animation-delay: .9s; }
@keyframes logo-saluda {
  0%, 62%, 100% { transform: none; }
  70% { transform: translateY(-3px) rotate(-12deg) scale(1.16); }
  78% { transform: translateY(-3px) rotate(10deg) scale(1.16); }
  86% { transform: translateY(-1px) rotate(-5deg) scale(1.06); }
}
.pie-redes a { position: relative; transition: background-color .2s, color .2s, transform .2s; }
.pie-redes a::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--oro-claro); border-radius: 50%; opacity: 0; animation: logo-aro 3.6s ease-out infinite; pointer-events: none; }
.pie-redes li:nth-child(2) a::after { animation-delay: .9s; }
@keyframes logo-aro {
  0%, 60% { opacity: 0; transform: scale(1); }
  66% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.55); }
}
.redes a:hover svg, .pie-redes a:hover svg { animation-duration: 1.2s; }
.pie-redes a:hover { transform: scale(1.08); }

/* Vaciar la cita */
#carta:focus { outline: none; }
.barra { padding-left: .5rem; gap: .5rem; }
.barra p { flex: 1; }
.barra-vaciar { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gris); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.barra-vaciar:hover { background: var(--rosa); color: var(--negro); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}