/* ==========================================================
   El Tarot de Fran · identidad boho
   Arena + lino, barro, rosa seca, mostaza y salvia.
   Cormorant Garamond (títulos) · Jost (texto)
   ========================================================== */

@font-face{font-family:"Cormorant";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jost-latin-500-normal.woff2) format("woff2")}

:root{
  --arena:#EFE3D0;
  --lino:#F8F1E6;
  --barro:#A4532F;
  --barro-osc:#83401F;
  --rosa:#D6A193;
  --rosa-claro:#EBCFC4;
  --mostaza:#CF9B3F;
  --salvia:#7E8C6E;
  --salvia-claro:#D5DACB;
  --cacao:#33241B;
  --cacao-2:#5F4A3C;
  --linea:#D9C7AD;

  --serif:"Cormorant","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ancho:72rem;
  --texto:40rem;
  --r:14px;
  --sombra:0 1px 0 rgba(51,36,27,.06),0 12px 28px -14px rgba(51,36,27,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--arena);color:var(--cacao);
  font:400 1.0625rem/1.7 var(--sans);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
img{display:block}
a{color:var(--barro);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--barro-osc)}
:focus-visible{outline:3px solid var(--mostaza);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-variant-numeric:lining-nums;font-family:var(--serif);font-weight:600;line-height:1.12;color:var(--cacao);margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(2.4rem,1.6rem + 3.6vw,4.4rem)}
h2{font-size:clamp(1.9rem,1.5rem + 1.6vw,2.7rem)}
h3{font-size:clamp(1.45rem,1.3rem + .6vw,1.75rem)}
h4{font-size:1.3rem}
p{margin:0 0 1.1em}
strong{font-weight:500;color:var(--cacao)}

[hidden]{display:none!important}
.saltar{position:absolute;left:-999px;top:0;background:var(--cacao);color:var(--lino);padding:.6em 1em;z-index:100}
.saltar:focus{left:1rem;top:1rem}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.envoltorio{width:min(100% - 2rem,var(--ancho));margin-inline:auto}
.seccion{padding-block:clamp(3.5rem,2rem + 6vw,7rem)}
.seccion--lino{background:var(--lino)}

/* ── Botones ─────────────────────────────────────────── */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:500 1rem/1 var(--sans);letter-spacing:.01em;
  padding:1.05em 1.6em;border-radius:999px;border:1.5px solid var(--barro);
  background:var(--barro);color:var(--lino);text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.boton:hover{background:var(--barro-osc);border-color:var(--barro-osc);color:var(--lino)}
.boton:active{transform:translateY(1px)}
.boton--borde{background:transparent;color:var(--barro)}
.boton--borde:hover{background:var(--barro);color:var(--lino)}
.boton--peq{padding:.75em 1.2em;font-size:.95rem}
.boton[disabled]{opacity:.55;cursor:progress}
.enlace{background:none;border:0;padding:0;font:inherit;color:var(--barro);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}

/* ── Cabecera ────────────────────────────────────────── */
.cabecera{position:sticky;top:0;z-index:40;background:rgba(239,227,208,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.cabecera__in{width:min(100% - 2rem,var(--ancho));margin-inline:auto;display:flex;align-items:center;gap:1rem;min-height:72px}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--cacao);margin-right:auto}
.marca__txt{display:flex;flex-direction:column;line-height:1}
.marca__nombre{font:600 1.55rem/1 var(--serif)}
.marca__lema{font:500 .72rem/1 var(--sans);letter-spacing:.24em;color:var(--barro);margin-top:.35rem}

.menu ul{list-style:none;margin:0;padding:0}
.menu > ul{display:flex;align-items:center;gap:.25rem}
.menu a,.menu__subbtn{display:block;padding:.55rem .8rem;color:var(--cacao);text-decoration:none;font:500 .98rem/1.2 var(--sans);border-radius:999px;background:none;border:0;cursor:pointer}
.menu a:hover,.menu__subbtn:hover{color:var(--barro)}
.menu a[aria-current="page"]{color:var(--barro)}
.menu .menu__cta a{color:var(--lino);background:var(--barro);margin-left:.4rem;padding:.7rem 1.15rem}
.menu .menu__cta a:hover{background:var(--barro-osc)}
.menu__cta a:hover,.menu__cta a[aria-current="page"]{color:var(--lino)}
.menu__subbtn::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.45em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.2em) rotate(45deg)}
.menu__sub{position:relative}
.menu__sub > ul{
  position:absolute;top:calc(100% + .4rem);left:0;min-width:15rem;padding:.5rem;
  background:var(--lino);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra);
  display:none;
}
.menu__sub > ul a{border-radius:8px}
.menu__sub > ul a:hover{background:var(--arena)}
.menu__sub[data-abierto] > ul{display:block}
@media (hover:hover) and (min-width:62.01rem){.menu__sub:hover > ul,.menu__sub:focus-within > ul{display:block}}

.menu-btn{display:none;align-items:center;gap:.55rem;background:none;border:1.5px solid var(--cacao);border-radius:999px;padding:.55rem .9rem;font:500 .95rem var(--sans);color:var(--cacao);cursor:pointer}
.menu-btn__barras,.menu-btn__barras::before,.menu-btn__barras::after{display:block;width:16px;height:1.5px;background:currentColor;position:relative;transition:transform .2s}
.menu-btn__barras::before,.menu-btn__barras::after{content:"";position:absolute;left:0}
.menu-btn__barras::before{top:-5px}.menu-btn__barras::after{top:5px}
.menu-btn[aria-expanded="true"] .menu-btn__barras{background:transparent}
.menu-btn[aria-expanded="true"] .menu-btn__barras::before{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__barras::after{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:62rem){
  .menu-btn{display:inline-flex}
  .menu{position:fixed;inset:72px 0 0;background:var(--arena);padding:1rem 1rem 2rem;overflow:auto;display:none}
  .menu[data-abierto]{display:block}
  .menu > ul{flex-direction:column;align-items:stretch;gap:0}
  .menu > ul > li{border-bottom:1px solid var(--linea)}
  .menu a,.menu__subbtn{padding:1rem .25rem;font-size:1.15rem;width:100%;text-align:left;border-radius:0}
  .menu__sub > ul{position:static;box-shadow:none;border:0;background:transparent;padding:0 0 .75rem 1rem;min-width:0}
  .menu__sub > ul a{padding:.6rem .25rem;font-size:1.02rem}
  .menu__cta{border-bottom:0!important;padding-top:1.25rem}
  .menu__cta a{margin:0;text-align:center;padding:1rem;border-radius:999px}
  body.menu-abierto{overflow:hidden}
}
@media (max-width:26rem){.marca__nombre{font-size:1.3rem}.marca img{width:38px}}

/* ── Naipe (carta Lenormand dibujada) ─────────────────── */
.naipe{
  --tono:var(--salvia);
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  aspect-ratio:5/7.4;padding:.75rem .6rem .7rem;
  background:
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.65),rgba(255,255,255,0) 58%),
    var(--lino);
  border-radius:12px;border:1px solid var(--linea);
  box-shadow:var(--sombra);
  color:var(--cacao);text-decoration:none;
}
.naipe::before{content:"";position:absolute;inset:6px;border:1px solid var(--tono);border-radius:8px;opacity:.55;pointer-events:none}
.naipe::after{content:"";position:absolute;left:6px;right:6px;top:6px;height:22%;border-radius:8px 8px 50% 50%/8px 8px 26% 26%;background:var(--tono);opacity:.16;pointer-events:none}
.naipe--positiva{--tono:var(--mostaza)}
.naipe--negativa{--tono:var(--barro)}
.naipe--neutra{--tono:var(--salvia)}
.naipe__n{position:relative;font-variant-numeric:lining-nums;font:600 1.1rem/1 var(--serif);color:var(--cacao-2)}
.naipe .icono{position:relative;width:58%;aspect-ratio:1;color:var(--barro)}
.naipe__nombre{position:relative;font:600 1.15rem/1.1 var(--serif);text-align:center}
a.naipe{transition:transform .25s ease,box-shadow .25s ease}
a.naipe:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 18px 30px -16px rgba(51,36,27,.45);color:var(--cacao)}
.naipe--grande{max-width:19rem;width:100%;padding:1.25rem 1rem 1.2rem}
.naipe--grande .naipe__n{font-size:1.7rem}
.naipe--grande .naipe__nombre{font-size:2rem}

/* ── Hero de inicio ──────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-block:clamp(2.5rem,1rem + 5vw,5.5rem) clamp(3rem,2rem + 4vw,6rem)}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero__titulo{font-size:clamp(2.6rem,1.4rem + 4.6vw,5.2rem);line-height:1.02;margin-bottom:.35em}
.hero__entrada{font-size:1.2rem;color:var(--cacao-2);max-width:34rem}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.hero__nota{margin-top:1.1rem;font-size:.95rem;color:var(--cacao-2)}

.ventana{position:relative;aspect-ratio:4/4.6;max-width:30rem;margin-inline:auto;width:100%}
.ventana__arco{position:absolute;inset:0;border-radius:999px 999px 18px 18px;overflow:hidden;background:var(--rosa-claro)}
.ventana__arco svg{position:absolute;inset:0;width:100%;height:100%}
.ventana__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.abanico{position:absolute;left:50%;bottom:9%;width:78%;height:56%;transform:translateX(-50%)}
.abanico .naipe{position:absolute;bottom:0;width:38%;left:31%;transform-origin:50% 120%}
.abanico .naipe:nth-child(1){transform:rotate(-16deg) translateX(-62%)}
.abanico .naipe:nth-child(2){transform:translateY(-6%);z-index:2}
.abanico .naipe:nth-child(3){transform:rotate(16deg) translateX(62%)}
.hero .abanico .naipe{animation:repartir .9s cubic-bezier(.2,.7,.2,1) both}
.hero .abanico .naipe:nth-child(1){animation-delay:.15s}
.hero .abanico .naipe:nth-child(3){animation-delay:.3s}
@keyframes repartir{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}

@media (max-width:52rem){
  .hero__in{grid-template-columns:1fr}
  .ventana{max-width:22rem}
}

/* ── Bloques de inicio ───────────────────────────────── */
.intro-fran{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.intro-fran__foto{border-radius:999px 999px var(--r) var(--r);overflow:hidden;background:var(--rosa-claro);aspect-ratio:3/4;position:relative}
.intro-fran__foto img{width:100%;height:100%;object-fit:cover}
.intro-fran__foto svg{position:absolute;inset:0;width:100%;height:100%}
.firma{width:200px;margin-top:1rem;opacity:.85}
@media (max-width:52rem){.intro-fran{grid-template-columns:1fr}.intro-fran__foto{max-width:18rem}}


.cita-grande{font:500 italic clamp(1.6rem,1.2rem + 1.6vw,2.4rem)/1.3 var(--serif);text-align:center;max-width:46rem;margin:0 auto;color:var(--cacao)}
.cita-grande footer{font:400 1rem var(--sans);font-style:normal;color:var(--barro);margin-top:1rem}

.cabecera-seccion{max-width:44rem;margin-bottom:2.25rem}
.cabecera-seccion p{color:var(--cacao-2);font-size:1.1rem}

/* ── Rejilla de cartas ───────────────────────────────── */
.rejilla-cartas{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.4rem,1fr));gap:1.4rem 1.1rem;list-style:none;margin:0;padding:0}
.rejilla-cartas li{display:flex;flex-direction:column;gap:.55rem}
.rejilla-cartas__claves{font-size:.86rem;line-height:1.4;color:var(--cacao-2);text-align:center;margin:0}
@media (max-width:30rem){.rejilla-cartas{grid-template-columns:repeat(3,1fr);gap:1rem .6rem}.naipe__nombre{font-size:1rem}.rejilla-cartas__claves{display:none}}

.leyenda{display:flex;flex-wrap:wrap;gap:1.25rem;margin:0 0 2rem;padding:0;list-style:none;font-size:.95rem;color:var(--cacao-2)}
.leyenda li{display:flex;align-items:center;gap:.5rem}
.leyenda i{width:14px;height:14px;border-radius:4px;display:inline-block}

.filtro{display:flex;gap:.75rem;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap}
.filtro input{flex:1;min-width:14rem;max-width:24rem}

/* ── Cabeceras de página ─────────────────────────────── */
.cab-pagina{padding-block:clamp(2.5rem,1.5rem + 4vw,5rem) clamp(1.5rem,1rem + 2vw,2.5rem)}
.cab-pagina h1{max-width:20ch}
.cab-pagina__entrada{font-size:1.18rem;color:var(--cacao-2);max-width:42rem}
.migas{font-size:.92rem;color:var(--cacao-2);margin-bottom:1.25rem}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.migas li:not(:last-child)::after{content:"/";margin-left:.35rem;color:var(--linea)}
.migas a{color:var(--cacao-2)}

/* ── Prosa (artículos importados y propios) ──────────── */
.prosa{max-width:var(--texto)}
.prosa > * + h2{margin-top:2.2em}
.prosa > * + h3{margin-top:1.8em}
.prosa ul,.prosa ol{padding-left:1.25em;margin:0 0 1.2em}
.prosa li{margin-bottom:.45em}
.prosa li::marker{color:var(--barro)}
.prosa blockquote{margin:1.8em 0;padding:.2em 0 .2em 1.3em;border-left:3px solid var(--rosa);font:500 italic 1.45rem/1.4 var(--serif)}
.prosa img{border-radius:var(--r);margin:1.5em 0}
.prosa img.icono-mini,.prosa li img{display:inline-block;width:22px;height:22px;margin:0 .25em -.3em 0;border-radius:4px}
.prosa table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.97rem}
.prosa th,.prosa td{border-bottom:1px solid var(--linea);padding:.6em .5em;text-align:left;vertical-align:top}
.prosa figure{margin:1.5em 0}
.prosa figcaption{font-size:.9rem;color:var(--cacao-2)}
.claves{background:var(--lino);border-radius:var(--r);padding:1.2rem 1.4rem;border-left:4px solid var(--mostaza);margin:1.5em 0}
.claves strong{display:block;font:600 1.25rem var(--serif);margin-bottom:.2em}

/* ── Ficha de carta ──────────────────────────────────── */
.ficha{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start;padding-bottom:4rem}
.ficha__lateral{position:sticky;top:96px;display:flex;flex-direction:column;gap:1rem}
.ficha__foto{border-radius:28px;overflow:hidden;box-shadow:var(--sombra)}
.ficha__foto img{width:100%;height:auto}
.ficha__datos{list-style:none;margin:0;padding:1.1rem 1.25rem;background:var(--lino);border-radius:var(--r);font-size:.96rem}
.ficha__datos li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dashed var(--linea)}
.ficha__datos li:last-child{border:0}
.ficha__datos span:first-child{color:var(--cacao-2)}
.ficha__cta{background:var(--cacao);color:var(--lino);border-radius:var(--r);padding:1.4rem 1.3rem}
.ficha__cta p{margin:.2em 0 1em;color:#E8DCCB;font-size:.98rem}
.ficha__cta strong{color:var(--lino);font:600 1.35rem/1.2 var(--serif)}
@media (max-width:56rem){
  .ficha{grid-template-columns:1fr}
  .ficha__lateral{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .ficha__foto,.ficha__lateral .naipe--grande{width:min(12rem,42%)}
  .ficha__datos{flex:1;min-width:13rem}
  .ficha__cta{display:none}
}

.combinaciones{list-style:none;padding:0!important;display:grid;grid-template-columns:1fr;gap:.2rem}
.combinaciones li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;padding:.85rem 0;border-bottom:1px solid var(--linea);margin:0!important}
.combinaciones__par{display:flex;align-items:center;gap:.2rem;padding-top:.1rem}
.combinaciones__par .icono{width:30px;height:30px;color:var(--barro);background:var(--lino);border-radius:8px;padding:4px}
.combinaciones__par .icono + .icono{color:var(--salvia)}
.combinaciones strong a{color:var(--cacao)}
.combinaciones p{margin:0}

.paginacion-cartas{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--linea)}
.paginacion-cartas a{display:flex;align-items:center;gap:.8rem;padding:1rem;background:var(--lino);border-radius:var(--r);text-decoration:none;color:var(--cacao)}
.paginacion-cartas a:hover{background:#fff8ee}
.paginacion-cartas .icono{width:44px;height:44px;color:var(--barro);flex:none}
.paginacion-cartas small{display:block;color:var(--cacao-2);font-size:.85rem}
.paginacion-cartas span{font:600 1.2rem/1.2 var(--serif)}
.paginacion-cartas a:last-child{justify-content:flex-end;text-align:right}

/* ── Consulta / formularios ──────────────────────────── */
.consulta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:58rem){.consulta{grid-template-columns:1fr}}
.tarjeta-form{background:var(--lino);border-radius:20px;padding:clamp(1.4rem,1rem + 2vw,2.4rem);box-shadow:var(--sombra);border:1px solid var(--linea)}

.campo{margin-bottom:1.15rem}
.campo label,.campo legend{display:block;font-weight:500;margin-bottom:.35rem;font-size:.98rem}
.campo small{display:block;color:var(--cacao-2);font-size:.86rem;margin-top:.3rem}
input[type=text],input[type=email],input[type=search],input[type=password],select,textarea{
  width:100%;font:inherit;color:var(--cacao);background:#FFFCF7;
  border:1.5px solid var(--linea);border-radius:10px;padding:.8rem .95rem;
  transition:border-color .2s,box-shadow .2s;
}
textarea{min-height:9rem;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--barro);box-shadow:0 0 0 3px rgba(164,83,47,.15)}
.campo--error input,.campo--error textarea,.campo--error select{border-color:#B3261E}
.campo__error{color:#9B1C14;font-size:.9rem;margin-top:.3rem;display:block}
.casilla{display:flex;gap:.65rem;align-items:flex-start;font-size:.94rem;line-height:1.5;margin-bottom:.9rem}
.casilla input{margin-top:.25rem;width:1.1rem;height:1.1rem;accent-color:var(--barro);flex:none}
.contador{float:right;font-weight:400;color:var(--cacao-2);font-size:.85rem}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


.aviso{padding:1rem 1.2rem;border-radius:12px;margin-bottom:1.25rem;font-size:.97rem}
.aviso--error{background:#F6DCD6;color:#6E1A10;border:1px solid #E6B3A8}
.aviso--ok{background:var(--salvia-claro);color:#2F3A25;border:1px solid #B8C1A9}




/* ── Pie ─────────────────────────────────────────────── */
.pie{background:var(--lino);border-top:1px solid var(--linea);margin-top:4rem}
.pie__in{width:min(100% - 2rem,var(--ancho));margin-inline:auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem;padding-block:3.5rem 2rem}
.pie__marca img{width:190px;margin-bottom:1rem}
.pie__cita{font:500 italic 1.1rem/1.45 var(--serif);color:var(--cacao-2);max-width:20rem}
.pie__cita span{display:block;font:400 .85rem var(--sans);font-style:normal;margin-top:.3rem}
.pie__tit{font-size:1.3rem;margin-bottom:.7rem}
.pie__lista{list-style:none;margin:0;padding:0;font-size:.96rem}
.pie__lista li{margin-bottom:.45rem}
.pie__lista a{color:var(--cacao)}
.pie__lista a:hover{color:var(--barro)}
.pie__copy{text-align:center;font-size:.86rem;color:var(--cacao-2);padding:1.25rem 1rem 2rem;margin:0;border-top:1px solid var(--linea)}
@media (max-width:56rem){.pie__in{grid-template-columns:1fr 1fr}.pie__marca{grid-column:1/-1}}
@media (max-width:30rem){.pie__in{grid-template-columns:1fr}}

/* ── 404 y páginas de estado ─────────────────────────── */
.estado{text-align:center;max-width:38rem;margin:0 auto;padding-block:4rem}
.estado .naipe{width:9rem;margin:0 auto 2rem;transform:rotate(-5deg)}

.prosa .migas ol{padding-left:0;margin:0}.prosa .migas li{margin:0}