/* San Fries · capa visual del piloto local. */

body.pagina-san-fries {
	background: #14110d;
	background-image: radial-gradient(circle at 80% 0%, rgba(245, 197, 66, .12), transparent 30rem);
}

.pagina-san-fries .cabecera-sitio,
.pagina-san-fries .pie-sitio { border-color: rgba(255, 244, 214, .15); }
.pagina-san-fries .logo { color: #f5c542; letter-spacing: .04em; }
.pagina-san-fries .logo--imagen { filter: none; }
.pagina-san-fries .cabecera-sitio__marca,
.pagina-san-fries .menu-principal__enlace,
.pagina-san-fries .selector-idioma__opcion,
.pagina-san-fries .pie-sitio,
.pagina-san-fries .pie-sitio a { color: #fff4d6; }
.pagina-san-fries .menu-principal__enlace[aria-current],
.pagina-san-fries .boton-cesta { background: #f5c542; color: #211d16; }
.pagina-san-fries .boton-cesta { border-color: rgba(255, 244, 214, .35); }
.pagina-san-fries .menu-principal__enlace[aria-current]:hover,
.pagina-san-fries .boton-cesta:hover { background: #ffd966; color: #211d16; }
.pagina-san-fries .boton-cesta__contador { background: #fff4d6; color: #211d16; border: 1px solid #211d16; }
.pagina-san-fries .sf-theme-toggle { border-color: rgba(255, 244, 214, .35); background: transparent; color: #fff4d6; cursor: pointer; }
.pagina-san-fries .sf-theme-toggle:hover { background: rgba(255, 244, 214, .12); color: #fff4d6; }
.sf-theme-toggle { appearance: none; font: inherit; }
.sf-theme-toggle--pie { padding: .35rem .65rem; border: 1px solid currentColor; border-radius: 999px; font-size: .75rem; font-weight: 700; }

.sf-page { min-height: 72vh; padding: clamp(1.5rem, 4vw, 4.5rem) 1rem 5rem; }
.sf-wrap { width: min(1180px, 100%); margin: 0 auto; }
.sf-configurador { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.sf-configurador__intro { position: sticky; top: 2rem; padding-top: 1rem; }
.sf-kicker { color: #f5c542; font-family: "Geist Mono", monospace; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sf-notice { display: inline-flex; align-items: center; gap: .35rem; margin-top: .75rem; padding: .55rem .8rem; border: 1px solid #f5c542; border-radius: 999px; background: #fff4d6; color: #211d16; font-size: .82rem; font-weight: 700; }
.sf-notice::before { content: "✓"; color: #f5c542; }
.sf-aviso-demo { position: fixed; right: 0; bottom: 0; left: 0; z-index: 80; display: flex; justify-content: center; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); border-top: 2px solid #211d16; background: #f5c542; color: #211d16; box-shadow: 0 -.5rem 1.5rem rgba(0, 0, 0, .22); font-size: .88rem; font-weight: 800; line-height: 1.35; text-align: center; }
.sf-aviso-demo__texto { max-width: 72rem; }
.sf-configurador h1 { max-width: 9ch; margin-top: .8rem; color: #fff4d6; font-size: clamp(3.2rem, 8vw, 6.8rem); line-height: .88; letter-spacing: -.07em; }
.sf-configurador h1 em { color: #f5c542; font-style: normal; }
.sf-lead { max-width: 33rem; margin-top: 1.8rem; color: rgba(255, 244, 214, .72); font-size: 1.08rem; line-height: 1.55; }
.sf-intro-points { display: grid; gap: .55rem; margin-top: 2rem; color: rgba(255, 244, 214, .82); font-size: .88rem; }
.sf-intro-points span::first-letter { color: #f5c542; }
.sf-visual { position: relative; width: min(280px, 80%); aspect-ratio: 1; margin: 3rem auto 0; border: 1px solid rgba(245, 197, 66, .3); border-radius: 50%; background: radial-gradient(circle, #3a2b14 0%, #211a10 52%, transparent 53%); display: grid; place-items: center; transform: rotate(-7deg); }
.sf-visual::before { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(245, 197, 66, .35); border-radius: 50%; }
.sf-visual__glow { position: absolute; width: 45%; height: 45%; border-radius: 50%; background: rgba(245, 197, 66, .18); filter: blur(22px); }
.sf-visual__image { position: relative; z-index: 1; width: 72%; height: 82%; object-fit: contain; filter: drop-shadow(0 1.2rem 1rem rgba(0, 0, 0, .38)); transform: rotate(7deg); }
.sf-visual__label { position: absolute; right: 5%; bottom: 13%; color: #f5c542; font-family: "Geist Mono", monospace; font-size: .62rem; font-weight: 600; line-height: 1.1; letter-spacing: .16em; transform: rotate(7deg); }
.sf-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, .42fr); gap: 1rem; align-items: start; }
.sf-step, .sf-summary { min-width: 0; border: 1px solid rgba(255, 244, 214, .17); border-radius: 1.1rem; background: rgba(33, 29, 22, .9); }
.sf-step { padding: clamp(1rem, 2.5vw, 1.6rem); }
.sf-steps { display: grid; grid-column: 1; gap: 1rem; min-width: 0; }
.sf-step { scroll-margin-top: calc(var(--alto-cabecera, 4.5rem) + 5rem); }
.sf-steps-nav { position: sticky; top: calc(var(--alto-cabecera, 4.5rem) + .75rem); z-index: 20; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: .35rem; border: 1px solid rgba(255, 244, 214, .17); border-radius: 1rem; background: rgba(33, 29, 22, .96); box-shadow: 0 .7rem 1.4rem rgba(0, 0, 0, .22); }
.sf-steps-nav__link { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .65rem .7rem; border-radius: .7rem; color: rgba(255, 244, 214, .58); font-size: .78rem; text-decoration: none; }
.sf-steps-nav__link span { color: #f5c542; font-family: "Geist Mono", monospace; font-size: .68rem; }
.sf-steps-nav__link strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-steps-nav__link:hover, .sf-steps-nav__link--activo { background: rgba(245, 197, 66, .14); color: #fff4d6; }
.sf-step legend { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .6rem; width: 100%; padding: 0 0 1rem; color: #fff4d6; }
.sf-step legend > span { grid-row: span 2; color: #f5c542; font-family: "Geist Mono", monospace; font-size: .75rem; padding-top: .2rem; }
.sf-step legend strong { font-size: 1.15rem; }
.sf-step legend small { color: rgba(255, 244, 214, .5); font-size: .8rem; font-weight: 400; }
.sf-options { display: grid; gap: .55rem; }
.sf-options--sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-options--salsas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-option { position: relative; display: flex; align-items: center; gap: .8rem; min-width: 0; min-height: 3.4rem; padding: .7rem .8rem; border: 1px solid rgba(255, 244, 214, .13); border-radius: .8rem; color: #fff4d6; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.sf-option--size { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .6rem; row-gap: .12rem; align-content: center; }
.sf-option--size .sf-option__size-number { grid-row: 1 / span 2; }
.sf-option--size .sf-option__copy { grid-column: 2; grid-row: 1; }
.sf-option--size .sf-option__price { grid-column: 2; grid-row: 2; justify-self: start; }
.sf-option:hover { border-color: rgba(245, 197, 66, .65); transform: translateY(-1px); }
.sf-option:has(input:checked) { border-color: #f5c542; background: rgba(245, 197, 66, .12); box-shadow: inset 0 0 0 1px rgba(245, 197, 66, .2); }
.sf-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sf-option__copy { display: grid; gap: .16rem; min-width: 0; flex: 1; }
.sf-option__copy strong { font-size: .92rem; }
.sf-option__copy small { color: rgba(255, 244, 214, .54); font-size: .72rem; line-height: 1.25; }
.sf-option__price { color: #f5c542; font-family: "Geist Mono", monospace; font-size: .75rem; white-space: nowrap; }
.sf-option__size-number { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: 50%; background: #f5c542; color: #211d16; font-family: "Geist Mono", monospace; font-weight: 600; }
.sf-summary { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--alto-cabecera, 4.5rem) + 1rem); z-index: 2; padding: 1.2rem; background: rgba(31, 26, 18, .96); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25); }
.sf-summary__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(255, 244, 214, .13); }
.sf-summary h2 { color: #fff4d6; font-size: 1.15rem; }
.sf-summary__lines { display: grid; gap: .5rem; padding: 1rem 0; color: rgba(255, 244, 214, .72); font-size: .86rem; }
.sf-summary__lines div { display: flex; justify-content: space-between; gap: 1rem; }
.sf-summary__lines dt { color: rgba(255, 244, 214, .48); }
.sf-summary__lines dd { margin: 0; color: #fff4d6; text-align: right; }
.sf-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; border-top: 1px solid rgba(255, 244, 214, .13); color: rgba(255, 244, 214, .62); }
.sf-summary__total strong { color: #f5c542; font-family: "Geist Mono", monospace; font-size: 1.65rem; }
.sf-button { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 1rem; padding: .95rem 1.1rem; border: 0; border-radius: .7rem; background: #f5c542; color: #211d16; font-weight: 800; }
.sf-button:hover { background: #ffd966; }
.sf-summary__note { margin-top: .8rem; color: rgba(255, 244, 214, .45); font-size: .72rem; line-height: 1.4; }
.sf-error { grid-column: 1 / -1; padding: .9rem 1rem; border: 1px solid #ef7d32; border-radius: .7rem; background: rgba(239, 125, 50, .13); color: #ffd3ae; }

.pagina-san-fries .cesta-lateral,
.pagina-san-fries .tarjeta,
.pagina-san-fries .cesta__seccion { background: #211d16; color: #fff4d6; }
.pagina-san-fries .cesta-lateral {
	--color-fondo: #fff;
	--color-superficie: #fff;
	--color-columna: #fbfaf7;
	--color-suave: #f7f1e3;
	--color-texto: #211d16;
	--color-texto-2: #211d16;
	--color-texto-suave: #594f3c;
	--color-texto-tenue: #756a55;
	--color-linea: #211d16;
	--color-regla: #ddd5c5;
	--color-regla-2: #cfc5b2;
	--color-acento-texto: #211d16;
	--color-acento-hover: #ffd966;
	background: #fff;
	color: #211d16;
}
.pagina-san-fries .cesta-lateral .cesta__seccion { background: #fff; color: #211d16; }
.pagina-san-fries .cesta-lateral::backdrop { background: rgba(0, 0, 0, .72); }
.pagina-san-fries .boton--acento { background: #f5c542; color: #211d16; }

/* Configurador claro: conserva el amarillo de marca con superficies blancas. */
body.pagina-san-fries--claro {
	--color-fondo: #fbfaf7;
	--color-superficie: #fff;
	--color-columna: #f5f1e7;
	--color-suave: #f7f1e3;
	--color-texto: #211d16;
	--color-texto-2: #342c20;
	--color-texto-suave: #655944;
	--color-texto-tenue: #85745b;
	--color-linea: #211d16;
	--color-regla: #ded5c4;
	--color-regla-2: #c8bda8;
	--color-acento: #f5c542;
	--color-acento-texto: #211d16;
	--color-acento-hover: #ffd966;
	--velo: rgba(33, 29, 22, .55);
	color-scheme: light;
	background: #fbfaf7;
	background-image: radial-gradient(circle at 80% 0%, rgba(245, 197, 66, .14), transparent 30rem);
}
.pagina-san-fries--claro .cabecera-sitio,
.pagina-san-fries--claro .pie-sitio { border-color: rgba(33, 29, 22, .18); }
.pagina-san-fries--claro .cabecera-sitio__marca,
.pagina-san-fries--claro .menu-principal__enlace,
.pagina-san-fries--claro .selector-idioma__opcion,
.pagina-san-fries--claro .pie-sitio,
.pagina-san-fries--claro .pie-sitio a { color: #211d16; }
.pagina-san-fries--claro .sf-theme-toggle { border-color: rgba(33, 29, 22, .24); background: transparent; color: #211d16; }
.pagina-san-fries--claro .sf-theme-toggle:hover { background: rgba(33, 29, 22, .08); color: #211d16; }
.pagina-san-fries--claro .sf-configurador h1 { color: #211d16; }
.pagina-san-fries--claro .sf-lead { color: rgba(33, 29, 22, .72); }
.pagina-san-fries--claro .sf-intro-points { color: rgba(33, 29, 22, .82); }
.pagina-san-fries--claro .sf-step,
.pagina-san-fries--claro .sf-summary { border-color: rgba(33, 29, 22, .18); background: rgba(255, 255, 255, .96); color: #211d16; }
.pagina-san-fries--claro .sf-steps-nav { border-color: rgba(33, 29, 22, .18); background: rgba(255, 255, 255, .96); box-shadow: 0 .7rem 1.4rem rgba(33, 29, 22, .1); }
.pagina-san-fries--claro .sf-steps-nav__link { color: rgba(33, 29, 22, .62); }
.pagina-san-fries--claro .sf-steps-nav__link:hover,
.pagina-san-fries--claro .sf-steps-nav__link--activo { background: rgba(245, 197, 66, .2); color: #211d16; }
.pagina-san-fries--claro .sf-step legend { color: #211d16; }
.pagina-san-fries--claro .sf-step legend small { color: rgba(33, 29, 22, .58); }
.pagina-san-fries--claro .sf-option { border-color: rgba(33, 29, 22, .18); color: #211d16; }
.pagina-san-fries--claro .sf-option:hover { border-color: rgba(33, 29, 22, .62); }
.pagina-san-fries--claro .sf-option:has(input:checked) { border-color: #f5c542; background: rgba(245, 197, 66, .18); box-shadow: inset 0 0 0 1px rgba(245, 197, 66, .28); }
.pagina-san-fries--claro .sf-option__copy small { color: rgba(33, 29, 22, .62); }
.pagina-san-fries--claro .sf-summary__heading { border-bottom-color: rgba(33, 29, 22, .16); }
.pagina-san-fries--claro .sf-summary h2,
.pagina-san-fries--claro .sf-summary__lines dd { color: #211d16; }
.pagina-san-fries--claro .sf-summary__lines { color: rgba(33, 29, 22, .72); }
.pagina-san-fries--claro .sf-summary__lines dt { color: rgba(33, 29, 22, .58); }
.pagina-san-fries--claro .sf-summary__total { border-top-color: rgba(33, 29, 22, .16); color: rgba(33, 29, 22, .68); }
.pagina-san-fries--claro .sf-summary__note { color: rgba(33, 29, 22, .58); }

@media (max-width: 800px) {
	.sf-configurador { grid-template-columns: 1fr; gap: 2rem; }
	.sf-configurador__intro { position: static; }
	.sf-configurador h1 { font-size: clamp(3.2rem, 16vw, 5.5rem); }
	.sf-visual { width: 210px; margin: 2rem 0 0 auto; }
	.sf-cones { width: min(230px, 82%); margin-right: 0; }
	.sf-form { grid-template-columns: 1fr; }
	.sf-steps, .sf-summary { grid-column: 1; }
	.sf-summary { grid-row: auto; position: static; }
	.sf-steps-nav { position: sticky; top: calc(var(--alto-cabecera, 4.5rem) + .5rem); }
}

@media (max-width: 640px) {
	.pagina-san-fries .cabecera-sitio__interior { gap: .5rem .75rem; }
	.pagina-san-fries .cabecera-sitio__marca { flex: 1 1 auto; width: auto; max-width: 10rem; min-width: 0; }
	.pagina-san-fries .cabecera-sitio__acciones { flex: 0 0 auto; gap: .5rem; }
	.pagina-san-fries .menu-principal__enlace[aria-current] { display: none; }
	.sf-steps-nav__link { justify-content: center; padding-inline: .45rem; }
	.sf-steps-nav__link strong { font-size: .7rem; }
	.sf-options--sizes { grid-template-columns: 1fr; }
	.sf-options--salsas { grid-template-columns: 1fr; }
	.sf-option--size { min-height: 3rem; }
	.sf-visual { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sf-option { transition: none; }
}