:root {
    --rojo: #d8141f;
    --rojo-2: #ad0d17;
    --rojo-suave: #fde3e1;
    --crema: #fff8f1;
    --crema-2: #fbecdf;
    --blanco: #ffffff;
    --tinta: #3a1c1a;
    --gris: #7a6461;
    --linea: rgba(58, 28, 26, .12);
    --oro: linear-gradient(135deg, #a8792b 0%, #f3d78a 32%, #c69a3e 52%, #f6e3a6 70%, #a8792b 100%);
    --oro-plano: #c69a3e;

    --f-titulo: "Caprasimo", Georgia, serif;
    --f-texto: "Bricolage Grotesque", system-ui, sans-serif;
    --f-mano: "Sacramento", cursive;

    --r-sm: 12px;
    --r-md: 22px;
    --sombra: 0 22px 44px -26px rgba(120, 20, 20, .45);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --barra: 30px;
    --mono: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2030%22%3E%3Cpath%20d%3D%22M18%2013C12%204%203%203%202.500%208.500S8%2019%2018%2016Z%22%20fill%3D%22%23d8141f%22%2F%3E%3Cpath%20d%3D%22M22%2013C28%204%2037%203%2037.500%208.500S32%2019%2022%2016Z%22%20fill%3D%22%23d8141f%22%2F%3E%3Cpath%20d%3D%22M17%2016%2011%2028%2015%2026.500%2017.500%2029.500%2020%2017Z%22%20fill%3D%22%23ad0d17%22%2F%3E%3Cpath%20d%3D%22M23%2016%2029%2028%2025%2026.500%2022.500%2029.500%2020%2017Z%22%20fill%3D%22%23ad0d17%22%2F%3E%3Cpath%20d%3D%22M6%208.500C9%207%2013%209%2016%2012.500M34%208.500C31%207%2027%209%2024%2012.500%22%20fill%3D%22none%22%20stroke%3D%22%23ff6b6b%22%20stroke-width%3D%221.200%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%2F%3E%3Crect%20x%3D%2216.500%22%20y%3D%2211%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222.500%22%20fill%3D%22%23b50f19%22%2F%3E%3C%2Fsvg%3E");
    --mono-negro: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2030%22%3E%3Cpath%20d%3D%22M18%2013C12%204%203%203%202.500%208.500S8%2019%2018%2016Z%22%20fill%3D%22%232b2124%22%2F%3E%3Cpath%20d%3D%22M22%2013C28%204%2037%203%2037.500%208.500S32%2019%2022%2016Z%22%20fill%3D%22%232b2124%22%2F%3E%3Cpath%20d%3D%22M17%2016%2011%2028%2015%2026.500%2017.500%2029.500%2020%2017Z%22%20fill%3D%22%23151012%22%2F%3E%3Cpath%20d%3D%22M23%2016%2029%2028%2025%2026.500%2022.500%2029.500%2020%2017Z%22%20fill%3D%22%23151012%22%2F%3E%3Cpath%20d%3D%22M6%208.500C9%207%2013%209%2016%2012.500M34%208.500C31%207%2027%209%2024%2012.500%22%20fill%3D%22none%22%20stroke%3D%22%238a7a7e%22%20stroke-width%3D%221.200%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%2F%3E%3Crect%20x%3D%2216.500%22%20y%3D%2211%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222.500%22%20fill%3D%22%230e0a0b%22%2F%3E%3C%2Fsvg%3E");
    --subrayado: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%208%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%205.6C30%203.1%2062%202.5%2098%203.5%22%20fill%3D%22none%22%20stroke%3D%22%23d8141f%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E");
    --lunares: radial-gradient(rgba(216, 20, 31, .07) 2px, transparent 2.5px) 0 0 / 26px 26px;
    --ondas: radial-gradient(circle 13px at 13px 0, #000 97%, transparent) 0 100% / 26px 13px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 12.5px) no-repeat;
    --ondas-arriba: radial-gradient(circle 13px at 13px 100%, #000 97%, transparent) 0 0 / 26px 13px repeat-x, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - 12.5px) no-repeat;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(84px + var(--barra)); -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--crema); color: var(--tinta);
    font: 400 1.0625rem/1.65 var(--f-texto);
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.06; margin: 0 0 .6rem; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -.015em; }
h3 { font-size: 1.4rem; letter-spacing: -.005em; }
p { margin: 0 0 1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }

.container { width: min(1160px, 100% - 32px); margin-inline: auto; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--rojo); color: var(--blanco); padding: .6rem 1rem; border-radius: var(--r-sm); }
.skip-link:focus { top: 40px; }
:focus-visible { outline: 2.5px solid var(--rojo); outline-offset: 3px; }

.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo); margin-bottom: .9rem; }
.eyebrow::before, .eyebrow::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .8rem 1.4rem; border-radius: 999px; border: 0; cursor: pointer;
    font-weight: 600; font-size: .98rem; text-decoration: none; line-height: 1.2;
    transition: transform .12s ease-out, background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s;
    touch-action: manipulation;
}
.btn { position: relative; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; border: 1.5px dashed currentColor; opacity: .5; pointer-events: none; transition: inset .2s var(--ease), opacity .2s; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--rojo); color: var(--blanco); }
.btn--primary:hover { background: var(--rojo-2); }
.btn--ghost, .btn--blanco { background: var(--blanco); color: var(--tinta); }
.btn--ghost::before, .btn--blanco::before { border-color: var(--rojo); opacity: .55; }
.btn--ghost { box-shadow: inset 0 0 0 1px rgba(216, 20, 31, .14); }
.btn--blanco { color: var(--rojo-2); }
@media (hover: hover) {
    .btn:hover::before { inset: 3px; opacity: .8; }
    .btn--ghost:hover, .btn--blanco:hover { background: var(--crema); }
}
.btn--small { padding: .6rem 1.1rem; font-size: .9rem; }
.btn--small::before { inset: 3px; }
.btn--large { padding: 1rem 1.7rem; font-size: 1.02rem; }
.btn--bloque { width: 100%; }

/* ---------- Toldo ---------- */
.toldo {
    position: fixed; inset: 0 0 auto; z-index: 101; height: calc(var(--barra) + 13px); pointer-events: none;
    background: repeating-linear-gradient(90deg, var(--rojo) 0 26px, var(--blanco) 26px 52px);
    -webkit-mask: var(--ondas); mask: var(--ondas);
    filter: drop-shadow(0 3px 2px rgba(120, 20, 20, .18));
}

/* ---------- Navegación ---------- */
.nav { position: fixed; top: var(--barra); left: 0; right: 0; z-index: 100; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.nav.is-scrolled { background: rgba(255, 248, 241, .84); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 14px 24px -22px rgba(58, 28, 26, .5); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; padding-top: 8px; }
.marca { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; }
.marca__script { font-family: var(--f-mano); font-weight: 400; font-size: 1.45rem; color: var(--rojo); margin-bottom: -.15rem; }
.marca__nombre { font-family: var(--f-titulo); font-size: 1.45rem; letter-spacing: .12em; color: var(--tinta); padding-left: .14em; }
.nav__menu { display: flex; align-items: center; gap: 1.8rem; }
.nav__menu a:not(.btn) { text-decoration: none; font-size: .97rem; font-weight: 500; color: var(--gris); position: relative; transition: color .2s; }
.nav__menu a:not(.btn):hover, .nav__menu a.is-active { color: var(--tinta); }
.nav__menu a:not(.btn)::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -9px; height: 7px; background: var(--subrayado) center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease); }
.nav__menu a.is-active::after { transform: none; }
.nav__toggle { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.nav__toggle span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--tinta); transition: transform .3s var(--ease); }
.nav__toggle span:first-child { top: 17px; }
.nav__toggle span:last-child { top: 25px; }
.nav.is-open .nav__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: calc(140px + var(--barra)) 0 96px; background: var(--lunares), var(--crema); }
.lluvia { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mono { position: absolute; top: 0; left: var(--x); width: var(--t); aspect-ratio: 4 / 3; opacity: 0; animation: caer var(--d) linear var(--r) infinite; will-change: transform; }
.mono::before { content: ""; position: absolute; inset: 0; background: var(--mono) center / contain no-repeat; animation: mecer calc(var(--d) / 3) ease-in-out var(--r) infinite alternate; }
.mono--negro::before { background-image: var(--mono-negro); }
.lluvia.pausa .mono, .lluvia.pausa .mono::before { animation-play-state: paused; }
@keyframes caer { 0% { opacity: 0; transform: translateY(-40px); } 8% { opacity: var(--o); } 88% { opacity: var(--o); } 100% { opacity: 0; transform: translateY(var(--alto, 800px)); } }
@keyframes mecer { from { transform: translateX(calc(var(--m) * -1)) rotate(calc(var(--g) * -1)); } to { transform: translateX(var(--m)) rotate(var(--g)); } }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 3.5rem; align-items: center; }
.hero__titulo { font-size: clamp(2.6rem, 5.2vw, 4.1rem); letter-spacing: -.015em; line-height: 1.04; margin-bottom: 1.2rem; }
.hero__script { display: block; font-family: var(--f-mano); font-weight: 400; color: var(--rojo); font-size: 1.15em; letter-spacing: 0; line-height: 1.05; margin: .05em 0 .02em .1em; }
.hero__bajada { font-size: 1.12rem; color: var(--gris); max-width: 32rem; margin-bottom: 1.8rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }
.hero__datos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .95rem; font-weight: 500; }
.hero__datos li { display: flex; align-items: center; gap: .5rem; }
.hero__datos .icon { color: var(--rojo); }
.hero__visual { position: relative; justify-self: center; width: min(100%, 500px); }
.blonda { position: relative; aspect-ratio: 1; padding: 9%; background: url("fotos/blonda.svg") center / contain no-repeat; filter: drop-shadow(0 26px 30px rgba(120, 30, 20, .2)); }
.blonda__foto { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--crema-2); }
.blonda__foto img { width: 100%; height: 100%; object-fit: cover; }
.sello { position: absolute; right: -5%; bottom: -2%; width: 172px; height: auto; rotate: 9deg; filter: drop-shadow(0 12px 16px rgba(120, 30, 20, .2)); overflow: visible; animation: flotar 3.6s ease-in-out infinite; will-change: translate; }
@keyframes flotar { 50% { translate: 0 -7px; rotate: 6deg; } }
.sello__papel { fill: #fffaf3; }
.sello__tinta { fill: var(--rojo); stroke: var(--rojo); }
.sello__tinta .sello__hueco { fill: none; stroke: #fffaf3; }
.sello__tinta text.sello__hueco { fill: #fffaf3; stroke: none; }
.sello__mano { font: 400 15px var(--f-titulo); letter-spacing: .02em; }
.sello__mano--grande { font-size: 25px; letter-spacing: 0; }

/* ---------- Secciones ---------- */
.seccion { padding: 104px 0; position: relative; }
.seccion__cabeza { max-width: 640px; margin-bottom: 2.6rem; }
.seccion__cabeza--centro { margin-inline: auto; text-align: center; }
.seccion__bajada { color: var(--gris); font-size: 1.08rem; }
.seccion--crema { background: var(--crema-2); }
.seccion--crema::before, .seccion--rojo::before {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 13px; background: inherit;
    -webkit-mask: radial-gradient(circle 13px at 13px 100%, #000 97%, transparent) 0 0 / 26px 13px repeat-x; mask: radial-gradient(circle 13px at 13px 100%, #000 97%, transparent) 0 0 / 26px 13px repeat-x;
}
#tortas { background: var(--blanco); }

/* ---------- Galería ---------- */
.pestanas { display: flex; gap: .5rem; margin-bottom: 1.6rem; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas.hay-der { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
.pestanas.hay-izq { -webkit-mask: linear-gradient(90deg, transparent, #000 15%); mask: linear-gradient(90deg, transparent, #000 15%); }
.pestanas.hay-izq.hay-der { -webkit-mask: linear-gradient(90deg, transparent, #000 15% 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15% 85%, transparent); }
.pestana {
    flex: none; touch-action: manipulation; border: 0; cursor: pointer; padding: .7rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .96rem;
    background: var(--crema); color: var(--gris); box-shadow: inset 0 0 0 1.5px var(--linea);
    transition: background-color .2s var(--ease), color .2s, box-shadow .2s, transform .12s ease-out;
}
.pestana:active, .opcion:active span { transform: scale(.97); }
.pestana:hover { color: var(--tinta); }
.pestana { position: relative; }
.pestana[aria-selected="true"] { background: var(--rojo); color: var(--blanco); box-shadow: none; }
.pestana[aria-selected="true"]::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; border: 1.5px dashed rgba(255, 255, 255, .55); }
.galeria__bajada { font-family: var(--f-mano); font-size: 2.1rem; line-height: 1.3; color: var(--rojo-2); margin-bottom: 1.2rem; }
.galeria__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.torta { display: flex; flex-direction: column; background: var(--crema); border-radius: var(--r-md); overflow: hidden; border: 1.5px solid rgba(216, 20, 31, .45); animation: aparecer .45s var(--ease) both; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.torta:nth-child(2) { animation-delay: .05s; }
.torta:nth-child(3) { animation-delay: .1s; }
.torta:nth-child(4) { animation-delay: .15s; }
.torta:nth-child(5) { animation-delay: .2s; }
@keyframes aparecer { from { opacity: 0; transform: translate(var(--desde, 0), 12px); } }
.torta__foto { aspect-ratio: 1; overflow: hidden; -webkit-mask: var(--ondas); mask: var(--ondas); background: var(--crema-2); }
.torta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.torta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.25rem 1.3rem; }
.torta h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.torta p { color: var(--gris); font-size: .95rem; flex: 1; }
.torta .btn { align-self: flex-start; }
.idea {
    grid-column: span var(--en3); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .2rem;
    padding: 2rem; border-radius: var(--r-md); background: var(--lunares), var(--rojo-suave); box-shadow: inset 0 0 0 2px rgba(216, 20, 31, .25);
    animation: aparecer .45s var(--ease) .25s both;
}
.idea__mano { font-family: var(--f-mano); font-weight: 400; font-size: 2.5rem; line-height: 1.1; color: var(--rojo); margin: 0 0 .4rem; }
.idea p:not(.idea__mano) { color: #6b4b47; max-width: 24rem; }
@media (hover: hover) {
    .torta:hover { border-color: var(--rojo); box-shadow: 0 18px 30px -24px rgba(120, 20, 20, .55); }
    .torta:hover .torta__foto img { transform: scale(1.04); }
}

/* ---------- Pasos ---------- */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; counter-reset: paso; }
.pasos li { position: relative; padding: 2.2rem 1.8rem 1.8rem; background: var(--blanco); border-radius: var(--r-md); text-align: center; counter-increment: paso; transition: scale .4s var(--ease), box-shadow .4s var(--ease), opacity .7s var(--ease), transform .7s var(--ease); }
.js .pasos li[data-reveal] { scale: .94; }
.js .pasos li[data-reveal].is-in { scale: 1; }
.pasos li:nth-child(2) { transition-delay: 0s, 0s, .1s, .1s; }
.pasos li:nth-child(3) { transition-delay: 0s, 0s, .2s, .2s; }
.pasos__icono { transition: scale .4s var(--ease); }
@media (hover: hover) {
    .js .pasos li[data-reveal].is-in:hover, .pasos li:hover { scale: 1.04; box-shadow: 0 22px 36px -26px rgba(120, 20, 20, .45); }
    .pasos li:hover .pasos__icono { scale: 1.08; }
}
.pasos li::before { content: counter(paso); position: absolute; top: 1rem; left: 1.2rem; font-family: var(--f-titulo); font-size: 1.6rem; color: var(--rojo-suave); line-height: 1; }
.pasos__icono { width: 66px; height: 66px; margin: 0 auto 1.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--rojo-suave); color: var(--rojo); }
.pasos__icono .icon { width: 30px; height: 30px; }
.pasos p { color: var(--gris); margin: 0; }

/* ---------- Cotiza ---------- */
.cotiza { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: start; }
.cotiza__intro { position: sticky; top: calc(110px + var(--barra)); }
.cotiza__intro > p:not(.eyebrow) { color: var(--gris); font-size: 1.08rem; max-width: 26rem; }
.topper { position: relative; width: min(100%, 380px); aspect-ratio: 640 / 648; margin-top: 2rem; border-radius: var(--r-md); overflow: hidden; background: url("fotos/topper.jpg") center / cover; box-shadow: var(--sombra); }
.topper::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 20, 10, .5), rgba(40, 20, 10, .15) 30%, transparent 42%); }
.topper__placa { position: absolute; z-index: 2; left: 6%; right: 6%; top: 3%; height: 22%; display: grid; place-items: end center; text-align: center; font-family: var(--f-mano); font-weight: 400; font-size: clamp(2.4rem, 3.9vw, 3.1rem); line-height: 1; }
.topper__placa span { background: linear-gradient(135deg, #b8862f 0%, #fbe3a1 30%, #c99a45 50%, #fff0c2 68%, #b8862f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(70, 35, 5, .85)) drop-shadow(0 2px 8px rgba(30, 12, 0, .55)); overflow-wrap: anywhere; }
.topper__placa span.vacio { opacity: .75; }
.topper__palitos { position: absolute; z-index: 1; left: 50%; top: 24.5%; height: 9%; display: flex; gap: 64px; transform: translateX(-50%); }
.topper__palitos i { width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #a8792b, #f6e3a6, #a8792b); box-shadow: 0 2px 3px rgba(60, 30, 10, .3); }
.formulario__vista:empty { display: none; }
.formulario__vista .topper { margin: .4rem auto 1.4rem; width: min(100%, 320px); }

.formulario { background: var(--blanco); border-radius: var(--r-md); padding: 2.4rem; box-shadow: var(--sombra), inset 0 0 0 1px var(--linea); }
.formulario label, .opciones legend { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 1.1rem; }
.formulario input:not([type=radio]), .formulario select, .formulario textarea {
    display: block; width: 100%; margin-top: .45rem; padding: .78rem .9rem; border-radius: var(--r-sm);
    border: 1.5px solid var(--linea); background: var(--crema); font-weight: 400; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.formulario select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; background: var(--crema) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d8141f%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E") right .8rem center / 18px no-repeat; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--rojo); background-color: var(--blanco); box-shadow: 0 0 0 4px rgba(216, 20, 31, .12); }
.formulario :user-invalid { border-color: var(--rojo); }
.formulario select.marcado { animation: marcado 1.4s var(--ease) .5s both; }
@keyframes marcado { 0%, 100% { box-shadow: 0 0 0 0 rgba(216, 20, 31, 0); } 25% { box-shadow: 0 0 0 5px rgba(216, 20, 31, .2); border-color: var(--rojo); } }
.formulario textarea { resize: vertical; min-height: 92px; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.opciones { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.opciones legend { margin-bottom: .55rem; padding: 0; }
.opciones__lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcion { margin: 0 !important; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion { touch-action: manipulation; }
.opcion span { display: inline-block; padding: .62rem 1.05rem; border-radius: 999px; font-weight: 500; font-size: .94rem; background: var(--crema); box-shadow: inset 0 0 0 1.5px var(--linea); transition: background-color .2s, color .2s, box-shadow .2s, transform .12s ease-out; }
@media (hover: hover) { .opcion:hover span { box-shadow: inset 0 0 0 1.5px var(--rojo); } }
.opcion input:checked + span { background: var(--rojo); color: var(--blanco); box-shadow: none; }
.opcion input:focus-visible + span { outline: 2.5px solid var(--rojo); outline-offset: 2px; }
.formulario__error { color: var(--rojo-2); font-weight: 600; font-size: .92rem; min-height: 1.3em; margin: 0 0 .6rem; }
.formulario__nota { text-align: center; font-size: .88rem; color: var(--gris); margin: .9rem 0 0; }

/* ---------- Locales ---------- */
.seccion--rojo { background: var(--rojo); color: var(--blanco); }
.seccion--rojo .eyebrow { color: #ffd3cf; }
.locales { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items: stretch; }
.locales__lista { display: grid; gap: 1rem; align-content: start; }
.local { display: flex; gap: 1.1rem; padding: 1.4rem 1.5rem; border-radius: var(--r-md); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.local__num { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--blanco); color: var(--rojo); font-family: var(--f-titulo); font-size: 1.4rem; }
.local h3 { margin-bottom: .2rem; }
.local p { margin: 0 0 .6rem; color: #ffe1de; }
.local__ruta { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; color: var(--blanco); border-bottom: 1.5px solid rgba(255, 255, 255, .5); padding-bottom: 1px; }
.local__ruta:hover { border-color: var(--blanco); }
.locales__lista .btn { margin-top: .6rem; }
.mapa { min-height: 380px; border-radius: var(--r-md); overflow: hidden; background: #f3d9d2; box-shadow: 0 24px 40px -24px rgba(60, 0, 0, .6); }
.mapa iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--crema-2); padding: 80px 0 28px; font-size: .95rem; color: #6b4b47; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 13px; background: var(--rojo); -webkit-mask: var(--ondas); mask: var(--ondas); }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1fr; gap: 2rem; }
.marca--pie { align-items: flex-start; margin-bottom: .9rem; }
.marca--pie .marca__script { font-size: 1.35rem; }
.marca--pie .marca__nombre { font-size: 1.85rem; padding-left: 0; }
.footer__muted { max-width: 18rem; }
.footer__title { font-family: var(--f-texto); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-2); margin-bottom: 1rem; }
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.footer__list li { display: flex; gap: .55rem; align-items: flex-start; }
.footer__list .icon { margin-top: .25rem; color: var(--rojo); }
.footer__list a { text-decoration: none; }
.footer__list a:hover { color: var(--rojo); }
.footer__libro { display: inline-block; padding: .35rem .8rem; border-radius: 8px; background: var(--blanco); box-shadow: inset 0 0 0 1px rgba(216, 20, 31, .3); }
.footer__bottom { margin-top: 3rem; padding-top: 1.4rem; border-top: 1.5px dashed rgba(216, 20, 31, .25); font-size: .85rem; }
.footer__bottom p { margin: 0; }
.footer__firma { color: var(--rojo-2); }

/* ---------- WhatsApp flotante y cinta demo ---------- */
.wa-flotante {
    position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 90;
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    background: #25d366; color: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.wa-flotante .icon { width: 28px; height: 28px; }
.wa-flotante.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-flotante:active { transform: scale(.94); }
.demo-cinta {
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 95;
    background: rgba(173, 13, 23, .9); color: var(--blanco); font-size: .8rem; font-weight: 600;
    padding: .45rem 1rem; border-radius: 999px; white-space: nowrap;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.icon--wa { width: 1.2em; height: 1.2em; }
.btn--primary .icon--wa, .wa-flotante .icon--wa { color: #fff; }
.btn--ghost .icon--wa { color: #25d366; }
.btn--blanco .icon--wa { color: #25d366; }

/* ---------- Páginas legales ---------- */
.legal { padding: calc(130px + var(--barra)) 0 80px; background: var(--lunares), var(--crema); }
.legal__caja { max-width: 760px; margin-inline: auto; background: var(--blanco); border-radius: var(--r-md); padding: clamp(1.5rem, 4vw, 3rem); box-shadow: inset 0 0 0 1px var(--linea); }
.legal__caja h1 { font-size: clamp(2.2rem, 5vw, 3rem); }
.legal__caja h2 { font-size: 1.4rem; margin-top: 2rem; }
.legal__caja p, .legal__caja li { color: #5a423f; }
.legal__fecha { color: var(--gris); font-size: .92rem; }
.legal__volver { margin-top: 2.4rem; }
.pendiente { background: #fff3c4; color: #7a5a00; padding: 0 .3rem; border-radius: 4px; }
.lr-proveedor { padding: 1rem 1.2rem; border-radius: var(--r-sm); background: var(--rojo-suave); margin-bottom: 1.6rem; }
.lr-proveedor p { margin: .2rem 0; }
.lr-form label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 1rem; }
.lr-form input:not([type=radio]):not([type=checkbox]), .lr-form select, .lr-form textarea { display: block; width: 100%; margin-top: .4rem; padding: .7rem .85rem; border-radius: var(--r-sm); border: 1.5px solid var(--linea); background: var(--blanco); }
.lr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.lr-tipo { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.lr-radio { display: flex !important; gap: .7rem; align-items: flex-start; padding: 1rem; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1.5px var(--linea); cursor: pointer; }
.lr-radio span { display: grid; gap: .2rem; }
.lr-radio small { font-weight: 400; color: var(--gris); }
.lr-check { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; }
.lr-error { color: var(--rojo-2); min-height: 1.2em; }
.lr-nota { font-size: .88rem; color: var(--gris); margin-top: 1rem; }
.lr-copia dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; background: var(--rojo-suave); padding: 1.2rem; border-radius: var(--r-sm); margin: 1rem 0; }
.lr-copia dt { font-weight: 700; }
.lr-copia dd { margin: 0; overflow-wrap: anywhere; }
.lr-acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.error404 { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 7rem 0 3rem; background: var(--lunares), var(--crema); }
.error404 h1 { font-size: clamp(4.5rem, 14vw, 8rem); color: var(--rojo); margin: 0; }
.error404 .container { width: min(440px, 100% - 32px); }
.error404__mano { font-family: var(--f-mano); font-weight: 400; font-size: 2.3rem; color: var(--rojo-2); margin-bottom: .4rem; }

/* ---------- Revelado suave ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .cotiza { gap: 2.5rem; }
}
@media (max-width: 860px) {
    :root { --barra: 22px; }
    .toldo { background: repeating-linear-gradient(90deg, var(--rojo) 0 26px, var(--blanco) 26px 52px); }
    .nav__toggle { display: block; }
    .nav__menu {
        position: absolute; top: 80px; left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 0;
        padding: .6rem; border-radius: var(--r-md); background: var(--crema); box-shadow: 0 24px 48px -20px rgba(58, 28, 26, .45), 0 0 0 1px var(--linea);
        opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events: none;
        transition: opacity .22s var(--ease), transform .22s var(--ease);
    }
    .nav.is-open .nav__menu { opacity: 1; transform: none; pointer-events: auto; }
    .nav.is-open { background: var(--crema); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .nav__menu a:not(.btn) { padding: .85rem 1rem; border-radius: var(--r-sm); }
    .nav__menu a:not(.btn)::after { display: none; }
    .nav__cta { margin-top: .4rem; }
    .demo-cinta { left: 16px; transform: none; font-size: .72rem; padding: .4rem .8rem; }
    .hero { padding: calc(116px + var(--barra)) 0 72px; }
    .hero__grid, .cotiza, .locales { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero__visual { width: min(100%, 400px); }
    .sello { right: -2%; }
    .cotiza__intro { position: static; }
    .pasos { grid-template-columns: 1fr; }
    .galeria__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .idea { grid-column: span var(--en2); padding: 1.5rem; }
    .mapa, .mapa iframe { min-height: 320px; }
    .seccion { padding: 76px 0; }
}
@media (max-width: 520px) {
    .marca__nombre { font-size: 1.3rem; }
    .marca__script { font-size: 1.3rem; }
    .sello { width: 124px; right: 0; }
    .galeria__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; }
    .torta__cuerpo { padding: .8rem .85rem 1rem; }
    .idea { padding: 1.3rem 1.1rem; }
    .idea__mano { font-size: 2rem; }
    .torta h3 { font-size: 1.12rem; }
    .torta p { font-size: .85rem; line-height: 1.45; }
    .torta .btn { width: 100%; padding: .55rem .6rem; font-size: .85rem; }
    .formulario { padding: 1.6rem 1.2rem; }
    .formulario__fila { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .hero__acciones .btn { width: 100%; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
}
@media (prefers-contrast: more) {
    .btn::before { opacity: 1; }
    .btn--ghost { box-shadow: inset 0 0 0 2px var(--rojo); }
    .pestana, .opcion span { box-shadow: inset 0 0 0 2px var(--tinta); }
}
@media (prefers-reduced-transparency: reduce) {
    .nav.is-scrolled { background: var(--crema); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .demo-cinta { background: var(--rojo-2); }
}
@media print {
    .nav, .toldo, .footer, .wa-flotante, .demo-cinta, .legal__volver, .lr-acciones { display: none !important; }
    .legal { padding: 0; }
    .legal__caja { box-shadow: none; }
}