@font-face{font-family:"Gilda Display";src:url(/fonts/gilda-display-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Didact Gothic";src:url(/fonts/didact-gothic-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* Layout: la web es una ficha más de la colección. Papel marfil, doble filete dorado, numerales romanos, plumillas y mucho aire. Composición clásica y centrada, como la portada de los capítulos. Un solo tema, claro, por decisión de marca. */
:root{
  color-scheme:light;
  --papel:#F7F3EC;      /* papel marfil de las fichas */
  --lino:#EFE8DC;       /* recuadro «el detalle que se recuerda» */
  --tinta:#2F2B27;      /* texto */
  --tinta-suave:#6B635A;
  --oro:#A3865C;        /* numerales y etiquetas */
  --filete:#CDBB9C;     /* doble línea dorada */
  --blanco:#FFFDF9;
  --f-titulo:"Gilda Display","Didot",Georgia,serif;
  --f-cursiva:"Cormorant Garamond","Palatino Linotype",Palatino,Georgia,serif;
  --f-texto:"Didact Gothic","Century Gothic","Avant Garde",Arial,sans-serif;
  --ancho:70rem;
}
*{box-sizing:border-box}
html{background:var(--papel)}
body{background:var(--papel);color:var(--tinta);font-family:var(--f-texto);font-size:1rem;line-height:1.75;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
.envoltura{max-width:var(--ancho);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
:focus-visible{outline:1px solid var(--oro);outline-offset:4px}
h1,h2,h3{font-family:var(--f-titulo);font-weight:400;line-height:1.12;text-wrap:balance;margin:0;color:var(--tinta)}
p{margin:0}
img{display:block;max-width:100%;height:auto}
.etiqueta{font-family:var(--f-texto);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--oro)}
.cursiva{font-family:var(--f-cursiva);font-style:italic;font-weight:400;color:var(--tinta-suave)}
.marco{border:1px solid var(--filete);padding:7px}
.marco>.interior{border:1px solid var(--filete)}
.separador{display:flex;align-items:center;justify-content:center;gap:.6rem;color:var(--filete)}
.separador::before,.separador::after{content:"";width:3.5rem;height:1px;background:var(--filete)}
.separador span{width:6px;height:6px;border:1px solid var(--oro);border-radius:50%}

/* Cabecera */
.cabecera{display:grid;justify-items:center;gap:.9rem;padding-block:2.2rem 1.4rem;text-align:center}
.logo{text-decoration:none;display:grid;gap:.1rem}
.logo .nombre{font-family:var(--f-titulo);font-size:1.9rem;letter-spacing:.04em}
.logo .firma{font-family:var(--f-cursiva);font-style:italic;font-size:1.05rem;color:var(--tinta-suave)}
.menu{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2.2rem;padding-top:1rem;border-top:1px solid var(--filete);width:min(100%,34rem)}
.menu a{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;color:var(--tinta-suave)}
.menu a:hover{color:var(--oro)}

/* Portada */
.portada{padding-block:1.5rem 4.5rem}
.portada .interior{display:grid;justify-items:center;text-align:center;gap:1.4rem;padding:clamp(2.5rem,7vw,5.5rem) clamp(1.25rem,6vw,5rem)}
.portada .portico{width:clamp(5.5rem,10vw,7.5rem)}
.portada h1{font-size:clamp(2.3rem,5.4vw,4.4rem);max-width:15ch}
.portada .cursiva{font-size:clamp(1.25rem,2.2vw,1.6rem);max-width:30rem;line-height:1.4}
.portada .entrada{max-width:36rem;color:var(--tinta-suave);font-size:.98rem}
.acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:.6rem}
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:3.1rem;padding:.8rem 2rem;font:400 .74rem/1 var(--f-texto);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;border:1px solid var(--oro);cursor:pointer;transition:background-color .3s,color .3s}
.boton.lleno{background:var(--oro);color:var(--blanco)}
.boton.lleno:hover{background:var(--tinta);border-color:var(--tinta)}
.boton.vacio{background:transparent;color:var(--oro)}
.boton.vacio:hover{background:var(--oro);color:var(--blanco)}
.idiomas{font-size:.8rem;color:var(--tinta-suave)}

/* Bloques */
.bloque{padding-block:clamp(4rem,9vw,7rem)}
.titular{display:grid;justify-items:center;text-align:center;gap:1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.titular h2{font-size:clamp(2rem,4vw,3rem)}
.titular .cursiva{font-size:1.25rem;max-width:34rem;line-height:1.45}

/* Método: cinco sentidos */
.sentidos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--filete);border-bottom:1px solid var(--filete)}
.sentido{display:grid;justify-items:center;align-content:start;text-align:center;gap:.7rem;padding:2.2rem 1rem}
.sentido+.sentido{border-left:1px solid var(--filete)}
.sentido .num{font-family:var(--f-cursiva);font-style:italic;font-size:2.4rem;line-height:1;color:var(--oro)}
.sentido img{height:5.5rem;width:auto;opacity:.9}
.sentido h3{font-size:1.35rem}
.sentido p{font-family:var(--f-cursiva);font-style:italic;font-size:1.08rem;color:var(--tinta-suave);line-height:1.35}
@media (max-width:860px){.sentidos{grid-template-columns:repeat(2,minmax(0,1fr))}.sentido+.sentido{border-left:0}.sentido{border-bottom:1px solid var(--filete)}.sentido:nth-child(even){border-left:1px solid var(--filete)}.sentido:last-child{grid-column:1/-1;border-bottom:0}}

/* Colección */
.coleccion{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.ficha{background:var(--blanco)}
.ficha .interior{height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem;padding:2.4rem 1.6rem 2rem}
.ficha .num{font-family:var(--f-cursiva);font-style:italic;font-size:3rem;line-height:1;color:var(--oro)}
.ficha img{height:4.2rem;width:auto;opacity:.9}
.ficha h3{font-size:1.65rem}
.ficha .cursiva{font-size:1.1rem;line-height:1.4}
.ficha .texto{font-size:.93rem;color:var(--tinta-suave)}
.ficha .enlace{margin-top:auto;padding-top:.8rem}
.enlace a{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--oro);text-decoration:none;border-bottom:1px solid var(--filete);padding-bottom:.25rem}
.enlace a:hover{border-color:var(--oro)}
.enlace{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem}
.nuevo{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--oro);border:1px solid var(--filete);padding:.2rem .7rem}
@media (max-width:860px){.coleccion{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}}
.pendientes{text-align:center;margin-top:2rem;font-family:var(--f-cursiva);font-style:italic;font-size:1.1rem;color:var(--tinta-suave)}

/* Pack y plantillas */
.par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.par+.par{margin-top:clamp(3.5rem,7vw,5.5rem)}
.par.inverso .foto{order:2}
.foto{background:var(--blanco)}
.foto img{width:100%}
.texto-par{display:grid;gap:1.1rem;justify-items:start}
.texto-par h3{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.texto-par .cursiva{font-size:1.2rem;line-height:1.45}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;color:var(--tinta-suave);font-size:.95rem}
.lista li{display:grid;grid-template-columns:1.4rem 1fr}
.lista li::before{content:"—";color:var(--oro)}
@media (max-width:860px){.par{grid-template-columns:1fr}.par.inverso .foto{order:0}}

/* Estilos */
.estilos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.75rem,2vw,1.4rem)}
.estilo{display:grid;gap:.8rem;justify-items:center;text-align:center}
.estilo .marco{width:100%;background:var(--blanco)}
.estilo .interior{aspect-ratio:2/3;overflow:hidden;display:grid;place-items:center;align-content:center;gap:.8rem}
.estilo .interior img{width:100%;height:100%;object-fit:cover}
.estilo .interior .vacio-img{height:3.5rem;width:auto;opacity:.45}
.estilo .interior span{font-family:var(--f-cursiva);font-style:italic;color:var(--tinta-suave)}
.estilo h3{font-size:1.25rem}
.estilo p{font-size:.84rem;color:var(--tinta-suave);line-height:1.5}
@media (max-width:860px){.estilos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.estilos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Quién soy */
.david{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.david .marco{background:var(--blanco);max-width:21rem}
.david blockquote{margin:0;font-family:var(--f-cursiva);font-style:italic;font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.35;color:var(--tinta)}
.david .resto{display:grid;gap:1rem;margin-top:1.6rem;color:var(--tinta-suave);max-width:36rem}
.david .llave{width:9rem;margin-top:1.4rem;opacity:.85}
@media (max-width:860px){.david{grid-template-columns:1fr}.david .marco{margin-inline:auto;max-width:16rem}}

/* Boletín */
.boletin{background:var(--lino)}
.boletin .interior{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem 4rem;align-items:center;padding:clamp(2rem,6vw,4.5rem)}
.boletin .izq{display:grid;gap:1rem;justify-items:start}
.boletin .campana{width:4.5rem;opacity:.85}
.boletin h2{font-size:clamp(2rem,4vw,2.9rem)}
.boletin .cursiva{font-size:1.2rem;line-height:1.45}
.formulario{display:grid;gap:.6rem}
.formulario label{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--tinta-suave)}
.formulario input{width:100%;min-height:3.1rem;border:0;border-bottom:1px solid var(--oro);background:transparent;color:var(--tinta);padding:.5rem 0;font:1.05rem var(--f-texto);margin-bottom:.6rem}
.formulario input::placeholder{color:#9C9389}
.formulario input:focus-visible{outline:0;border-bottom-width:2px}
.formulario .boton{margin-top:.4rem}
.formulario small{font-size:.8rem;color:var(--tinta-suave)}
.aviso{font-size:.9rem;min-height:1.4em;color:var(--oro)}
@media (max-width:860px){.boletin .interior{grid-template-columns:1fr}}

/* Pie */
.pie{padding-block:3.5rem 4rem;display:grid;justify-items:center;text-align:center;gap:1.2rem;border-top:1px solid var(--filete);margin-top:2rem}
.pie .nombre{font-family:var(--f-titulo);font-size:1.5rem}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.8rem}
.pie li,.pie a{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-suave);text-decoration:none}
.pie a:hover{color:var(--oro)}
.pie .correo{font-size:.95rem;letter-spacing:.04em;text-transform:none}
.pie .nota{font-family:var(--f-cursiva);font-style:italic;font-size:1rem;color:var(--tinta-suave);max-width:36rem}

@media (prefers-reduced-motion:no-preference){
  .portada .interior>*{animation:aparecer 1.2s cubic-bezier(.2,.6,.2,1) both}
  .portada .interior>*:nth-child(2){animation-delay:.12s}
  .portada .interior>*:nth-child(3){animation-delay:.24s}
  .portada .interior>*:nth-child(n+4){animation-delay:.36s}
  @keyframes aparecer{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ===== Volumen y movimiento ===== */
:root{--sombra-papel:0 1px 1px rgba(90,70,40,.05),0 6px 14px -6px rgba(90,70,40,.12),0 28px 50px -24px rgba(90,70,40,.22);
  --sombra-alta:0 2px 2px rgba(90,70,40,.06),0 14px 26px -10px rgba(90,70,40,.18),0 44px 70px -30px rgba(90,70,40,.30);
  --oro-brillo:linear-gradient(100deg,#9A7B4F 0%,#B8986A 28%,#E6D3AE 46%,#B8986A 62%,#957647 100%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .47  0 0 0 0 .36  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html{background:radial-gradient(120% 70% at 50% 0%,#FBF8F2 0%,var(--papel) 55%,#F2ECE1 100%) fixed}
body{background:transparent}
.portada>.marco{background:linear-gradient(180deg,#FFFDF9 0%,#FAF6EE 100%);box-shadow:var(--sombra-alta)}
.ficha,.foto,.estilo .marco,.david .marco{box-shadow:var(--sombra-papel);transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s cubic-bezier(.2,.7,.2,1)}
.ficha:hover,.foto:hover,.estilo .marco:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta)}
.boletin{box-shadow:var(--sombra-papel)}
.sentidos{background:linear-gradient(180deg,rgba(255,253,249,.7),rgba(255,253,249,0))}
/* numerales en pan de oro */
.num,.portada h1{-webkit-background-clip:text;background-clip:text}
.num{background-image:var(--oro-brillo);background-size:250% 100%;background-position:100% 0;color:transparent;transition:background-position 1.4s ease}
.ficha:hover .num,.sentido:hover .num{background-position:0 0}
/* brillo en el botón principal */
.boton.lleno{position:relative;overflow:hidden;background-image:var(--oro-brillo);background-size:220% 100%;background-position:90% 0;border-color:#A3865C}
.boton.lleno:hover{background-position:10% 0;background-color:transparent;border-color:#A3865C;color:#fff}
.boton.lleno::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%)}
/* fotos con profundidad dentro del marco */
.estilo .interior img,.foto img{transform:scale(1.08);will-change:transform}
.sentido img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.sentido:hover img{transform:translateY(-4px) rotate(-2deg)}

@media (prefers-reduced-motion:no-preference){
  /* el filete dorado se dibuja al cargar */
  .portada>.marco{animation:levantar 1.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes levantar{from{transform:translateY(14px) scale(.985);box-shadow:none}to{transform:none}}
  .portada .interior{position:relative}
  /* la plumilla del pórtico aparece como si se dibujara a tinta */
  .portada .portico{animation:tinta 2.4s .4s cubic-bezier(.45,.05,.3,1) both}
  @keyframes tinta{from{clip-path:inset(0 0 100% 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
  .separador::before,.separador::after{animation:filete 1.6s 1.1s cubic-bezier(.2,.7,.2,1) both}
  @keyframes filete{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .separador::before{transform-origin:right}.separador::after{transform-origin:left}
  .boton.lleno::after{animation:destello 5.5s 2.2s ease-in-out infinite}
  @keyframes destello{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
  /* aparición al bajar: el contenido es visible si no hay script */
  .js .revelar{opacity:0;transform:translateY(22px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--retraso,0s)}
  .js .revelar.visible{opacity:1;transform:none}
  .js .revelar.plumilla-tinta img{clip-path:inset(0 0 100% 0);transition:clip-path 1.8s .25s cubic-bezier(.45,.05,.3,1)}
  .js .revelar.plumilla-tinta.visible img{clip-path:inset(0 0 0 0)}
}
@media (prefers-reduced-motion:reduce){.estilo .interior img,.foto img{transform:none}}

.legal{padding-block:1.5rem 5rem}
.legal .interior{background:var(--blanco);padding:clamp(1.75rem,6vw,4.5rem);max-width:48rem;margin-inline:auto}
.legal-marco{max-width:48rem;margin-inline:auto;box-shadow:var(--sombra-papel)}
.legal h1{font-size:clamp(2rem,4.5vw,3rem);text-align:center;margin-bottom:.6rem}
.legal .cursiva{text-align:center;margin-bottom:2.2rem}
.legal h2{font-size:1.45rem;margin:2.2rem 0 .7rem}
.legal p{color:var(--tinta-suave);margin-bottom:.9rem;max-width:65ch}
.datos{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.5rem;border-top:1px solid var(--filete);padding-top:1rem}
.datos li{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;color:var(--tinta)}
.datos span{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);padding-top:.3rem}
@media (max-width:560px){.datos li{grid-template-columns:1fr;gap:0}}
.error404{text-align:center;padding-block:5rem;display:grid;gap:1.2rem;justify-items:center}