/* Farmacia Peirón Torres · la web como la señalización de la propia tienda */

@font-face { font-family: "Lexend"; src: url("fonts/lexend-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lexend"; src: url("fonts/lexend-latin-ext.woff2") format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --blanco: #ffffff;
  --sala: #f3f5f1;
  --antracita: #1d2326;
  --petroleo: #2d5565;
  --turquesa: #28808e;
  --turquesa-tinta: #1f6872;
  --azul: #1e4f9c;
  --lima: #a6c83c;
  --lima-tinta: #4e6410;
  --tinta: #16201f;
  --tinta-suave: #3f4d4b;
  --linea: #d6dbd7;
  --aviso: #f3c94b;
  --sombra: 0 6px 18px -8px rgba(22, 32, 31, .35);
  --sombra-alta: 0 14px 30px -12px rgba(22, 32, 31, .45);
  --radio: 4px;
  --ancho: 1240px;
  --fuente: "Lexend", "Segoe UI", system-ui, sans-serif;
  --suave: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: 18px; line-height: 1.55; color: var(--tinta); background: var(--blanco); font-variant-numeric: tabular-nums; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--turquesa-tinta); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--petroleo); }
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); text-transform: uppercase; }
p { margin: 0 0 1em; max-width: 68ch; }
::selection { background: var(--lima); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; box-shadow: 0 0 0 2px var(--antracita); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--petroleo); border: 3px solid var(--blanco); border-radius: 8px; }
::-webkit-scrollbar-track { background: var(--sala); }
html { scrollbar-color: var(--petroleo) var(--sala); }

.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.revisar { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--aviso); color: var(--tinta); padding: .1em .45em; border-radius: 3px; vertical-align: middle; }

/* Plan de la demo */
body[data-plan="basico"] .solo-premium { display: none !important; }
body[data-plan="premium"] .solo-basico { display: none !important; }

/* ---------- Barra de demo ---------- */
.demo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; padding: .55rem 1.25rem; background: #2a2f33; color: #e9ecea; font-size: .9rem; }
.demo__tag { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; color: #b9c2bd; }
.demo__plan { display: inline-flex; border: 1px solid #5b646a; border-radius: var(--radio); overflow: hidden; }
.demo__plan button { font: inherit; font-weight: 600; color: #e9ecea; background: transparent; border: 0; padding: .35rem .8rem; cursor: pointer; }
.demo__plan button + button { border-left: 1px solid #5b646a; }
.demo__plan button[aria-pressed="true"] { background: var(--lima); color: var(--tinta); }
.demo__link { color: #e9ecea; margin-left: auto; }
.demo__link + .demo__link { margin-left: 0; }

/* ---------- Banda del rótulo ---------- */
.banda { background: var(--antracita); color: var(--blanco); padding: clamp(1.25rem, 2vw, 2rem) clamp(1rem, 3vw, 3rem) 0; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "placa nombre estado" "placa nombre acciones" "menu menu menu"; column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: 1rem; align-items: center; }
.banda__placa { grid-area: placa; background: var(--blanco); padding: .75rem 1rem; border-radius: var(--radio); box-shadow: var(--sombra-alta); align-self: start; }
.banda__placa img { width: clamp(150px, 16vw, 230px); height: auto; }
.banda__nombre { grid-area: nombre; }
.banda__farmacia { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .28em; color: var(--lima); font-size: clamp(.8rem, .9vw, 1rem); }
.banda__titulo { font-size: clamp(2.2rem, 1rem + 4.5vw, 4.6rem); text-transform: uppercase; letter-spacing: -.03em; color: var(--blanco); }
.banda__donde { color: #c6cfca; margin: .4rem 0 0; font-size: 1rem; }
.banda__estado { grid-area: estado; justify-self: end; display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .9rem .55rem .8rem; border-radius: var(--radio); font-weight: 700; font-size: 1.05rem; background: #39434a; color: var(--blanco); box-shadow: var(--sombra); }
.banda__estado.es-abierta, .banda__estado.es-guardia { background: var(--lima); color: var(--tinta); box-shadow: 0 0 0 4px rgba(166, 200, 60, .25), var(--sombra); }
.estado__punto { width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.es-guardia .estado__punto { animation: late 1.6s ease-in-out infinite; }
.es-cerrada .estado__punto { background: transparent; border: 2px solid currentColor; }
.estado__hora { font-weight: 500; opacity: .85; padding-left: .6rem; border-left: 1px solid currentColor; }
@keyframes late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.banda__acciones { grid-area: acciones; justify-self: end; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.banda__menu { grid-area: menu; display: flex; gap: clamp(1rem, 2.5vw, 2.2rem); overflow-x: auto; padding: 1.1rem 0 1rem; border-top: 1px solid #39434a; margin-top: .5rem; scrollbar-width: none; }
.banda__menu::-webkit-scrollbar { display: none; }
.banda__menu a { color: var(--blanco); text-decoration: none; font-weight: 600; white-space: nowrap; padding-bottom: .25rem; border-bottom: 3px solid transparent; }
.banda__menu a:hover, .banda__menu a:focus-visible { border-color: var(--lima); color: var(--blanco); }

/* Pestañas (botones) */
.pestana { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; color: var(--tinta); background: var(--blanco); border: 2px solid var(--antracita); border-radius: var(--radio); padding: .65rem 1.05rem; cursor: pointer; transition: transform .35s var(--suave), box-shadow .35s var(--suave), background .2s; }
.pestana svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pestana:hover, .pestana:focus-visible { transform: translateY(-2px); box-shadow: var(--sombra); color: var(--tinta); }
.pestana--primaria { background: var(--lima); border-color: var(--lima); }
.pestana--primaria:hover { background: #b4d44c; }
.banda .pestana { background: transparent; color: var(--blanco); border-color: #8a949a; }
.banda .pestana:hover { color: var(--blanco); border-color: var(--blanco); }
.banda .pestana--primaria { background: var(--lima); color: var(--tinta); border-color: var(--lima); }
.banda .pestana--primaria:hover { color: var(--tinta); }

/* ---------- Pared de paneles ---------- */
.pared { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "hoy infantil cosmetica" "hoy nutricion cosmetica" "ortopedia ortopedia consejo"; gap: 14px; padding: 14px; background: var(--sala); }
.panel { position: relative; display: flex; flex-direction: column; background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); min-height: 300px; --panel: var(--antracita); --panel-texto: var(--blanco); --panel-sub: #e3e8e5; }
.panel[data-color="azul"] { --panel: var(--azul); --panel-sub: #e4ecf8; }
.panel[data-color="turquesa"] { --panel: var(--turquesa); --panel-sub: var(--blanco); }
.panel[data-color="lima"] { --panel: var(--lima); --panel-texto: var(--tinta); --panel-sub: #2e3d0c; }
.panel[data-color="petroleo"] { --panel: var(--petroleo); --panel-sub: #c8d9df; }
.panel[data-color="blanco"] { --panel: var(--blanco); --panel-texto: var(--tinta); --panel-sub: var(--tinta-suave); box-shadow: inset 0 0 0 2px var(--antracita), var(--sombra); }
.panel--hoy { grid-area: hoy; background: var(--lima); color: var(--tinta); }
.panel--infantil { grid-area: infantil; }
.panel--cosmetica { grid-area: cosmetica; }
.panel--nutricion { grid-area: nutricion; }
.panel--ortopedia { grid-area: ortopedia; }
.panel--consejo { grid-area: consejo; }
.panel__cab { position: relative; background: var(--panel); color: var(--panel-texto); padding: 1.1rem 3.2rem 1rem 1.25rem; }
.panel__cab:has(.panel__abrir)::after { content: ""; position: absolute; right: 1.5rem; top: 1.55rem; width: 13px; height: 13px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); transition: transform .45s var(--suave); pointer-events: none; }
.panel.es-abierto .panel__cab::after { transform: rotate(-135deg) translateY(6px); }
.panel__abrir { all: unset; cursor: pointer; color: inherit; }
.panel__abrir::after { content: ""; position: absolute; inset: 0; }
.panel__abrir:focus-visible { outline: none; }
.panel__cab:has(.panel__abrir:focus-visible) { outline: 3px solid var(--lima); outline-offset: -5px; }
.panel[data-color="lima"] .panel__cab:has(.panel__abrir:focus-visible), .panel--hoy .panel__cab:has(.panel__abrir:focus-visible) { outline-color: var(--antracita); }
.panel__letrero { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem); text-transform: uppercase; letter-spacing: -.02em; font-weight: 800; }
.panel__sub { display: block; font-size: .95rem; color: var(--panel-sub); margin: .25rem 0 0; font-weight: 500; max-width: none; }
.panel__cristal { position: relative; margin: 0; flex: 1; min-height: 220px; overflow: hidden; }
.panel__cristal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__cristal::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, color-mix(in srgb, var(--panel) 78%, transparent), transparent); transition: transform .7s var(--suave), opacity .7s var(--suave); }
.panel.es-abierto .panel__cristal::after { transform: translateY(-110%); opacity: 0; }
.panel--cosmetica .panel__cristal { min-height: 460px; }
.panel--ortopedia .panel__cristal { min-height: 260px; }
.panel__seccion { padding: 1.1rem 1.25rem 1.35rem; background: var(--blanco); border-top: 4px solid var(--panel); }
.panel__seccion p:last-child { margin-bottom: 0; }

/* Panel HOY */
.panel--hoy { --panel: var(--lima); --panel-texto: var(--tinta); --panel-sub: #2e3d0c; }
.hoy { padding: .25rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.hoy__fecha { font-weight: 700; font-size: 1.05rem; }
.hoy__fecha::first-letter { text-transform: uppercase; }
.horario { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.horario th, .horario td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid rgba(22, 32, 31, .18); }
.horario th { font-weight: 600; }
.horario td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.horario tr.es-hoy { background: var(--antracita); color: var(--lima); }
.horario tr.es-hoy th, .horario tr.es-hoy td { border-color: transparent; }
.horario tr.es-hoy th::after { content: " · hoy"; font-weight: 400; font-size: .85em; }
.guardia { margin: auto -1.25rem -1.25rem; background: var(--antracita); color: var(--blanco); padding: 1.1rem 1.25rem 1.3rem; }
.guardia p { margin: 0; max-width: none; }
.guardia__rotulo { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--lima); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.guardia__fechas { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: .2rem 0 .5rem !important; }
.guardia__nota { font-size: .9rem; color: #c6cfca; }
.guardia__nota a { color: var(--lima); }

/* Encendido de la pared */
.panel.se-enciende { animation: encender .7s var(--suave) both; animation-delay: calc(var(--orden, 0) * 90ms); }
@keyframes encender { from { filter: brightness(.62) saturate(.5); } to { filter: none; } }

/* ---------- Secciones ---------- */
.servicios, .citas, .opiniones { max-width: var(--ancho); margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 3vw, 3rem); }
.servicios__intro { color: var(--tinta-suave); margin-top: .6rem; }
.servicios__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 3rem; margin: 2.2rem 0 0; }
.servicios__lista div { display: grid; grid-template-columns: 18px 1fr; gap: .25rem .9rem; }
.servicios__lista dt { font-weight: 800; font-size: 1.15rem; grid-column: 2; }
.servicios__lista dd { margin: 0; grid-column: 2; color: var(--tinta-suave); }
.servicios__lista div::before { content: ""; grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: .3rem; border-radius: 3px; background: var(--lima); box-shadow: var(--sombra); }
.servicios__lista div[data-color="turquesa"]::before { background: var(--turquesa); }
.servicios__lista div[data-color="azul"]::before { background: var(--azul); }
.servicios__lista div[data-color="petroleo"]::before { background: var(--petroleo); }
.servicios__lista div[data-color="antracita"]::before { background: var(--antracita); }

/* Encargos */
.encargos { background: var(--petroleo); color: var(--blanco); padding: 3rem 1rem; }
.encargos__panel { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; }
.encargos h2 { grid-column: 1; color: var(--blanco); }
.encargos > .encargos__panel > p { grid-column: 1; color: #d9e4e8; }
.encargos a { color: var(--blanco); }
.encargos__aviso { font-weight: 600; color: var(--blanco) !important; border-top: 1px solid #5f8291; padding-top: 1rem; }
.encargos .formulario, .encargos .confirmacion { grid-column: 2; grid-row: 1 / span 4; }

/* Formularios */
.formulario { display: flex; flex-direction: column; gap: 1.1rem; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; }
.campo span { font-size: .95rem; }
.campo input, .campo textarea, .campo select { font: inherit; font-weight: 400; padding: .7rem .8rem; border: 2px solid var(--linea); border-radius: var(--radio); background: var(--blanco); color: var(--tinta); width: 100%; caret-color: var(--turquesa-tinta); }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 3px solid var(--lima); outline-offset: 1px; border-color: var(--petroleo); }
.campo ::placeholder { color: #6b7876; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; font-size: .95rem; margin-bottom: .5rem; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips legend { width: 100%; }
.chips label { position: relative; padding: .45rem .85rem; border-radius: 999px; background: var(--blanco); color: var(--tinta); font-weight: 600; font-size: .95rem; cursor: pointer; border: 2px solid transparent; }
.chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.chips label:has(input:checked) { background: var(--lima); border-color: var(--tinta); }
.chips label:has(input:focus-visible) { outline: 3px solid var(--lima); outline-offset: 2px; }
.opciones { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.opciones legend { width: 100%; }
.opciones label, .consentimiento { display: flex; gap: .6rem; align-items: flex-start; font-size: 1rem; cursor: pointer; }
.opciones input, .consentimiento input { width: 1.25rem; height: 1.25rem; accent-color: var(--lima); margin-top: .2rem; flex: none; }
.consentimiento { font-weight: 400; }
.formulario .pestana { align-self: flex-start; }
.formulario__error { background: var(--aviso); color: var(--tinta); padding: .6rem .9rem; border-radius: var(--radio); font-weight: 600; margin: 0; }
.confirmacion { background: var(--lima); color: var(--tinta); padding: 1.5rem; border-radius: var(--radio); box-shadow: var(--sombra-alta); }
.confirmacion h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.confirmacion p { margin: 0; }
.confirmacion:focus { outline: 3px solid var(--antracita); }
.confirmacion a { color: var(--tinta); text-decoration-color: var(--antracita); }
.confirmacion a:hover { color: var(--antracita); }

/* Citas */
.citas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; }
.citas h2 { grid-column: 1; }
.citas > p { grid-column: 1; }
.citas .formulario, .citas .confirmacion { grid-column: 2; grid-row: 1 / span 3; }

/* Opiniones */
.opiniones { background: var(--sala); max-width: none; }
.opiniones > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.opiniones__nota { color: var(--tinta-suave); margin-top: .6rem; }
.opiniones__nota strong { color: var(--tinta); font-size: 1.6rem; }
.opiniones__lista { list-style: none; padding: 0; margin: 2rem auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.opiniones blockquote { margin: 0; padding: 1.5rem 1.6rem 1.3rem; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); height: 100%; display: flex; flex-direction: column; }
.opiniones blockquote p { font-size: 1.1rem; font-weight: 500; margin-bottom: .9rem; }
.opiniones blockquote footer { margin-top: auto; color: var(--turquesa-tinta); font-weight: 700; font-size: .95rem; }

/* Dónde */
.donde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); max-width: var(--ancho); margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 3vw, 3rem); gap: 2.5rem 4rem; align-items: center; }
.donde address { font-style: normal; font-size: 1.15rem; line-height: 1.6; margin: 1.2rem 0; }
.donde__eco { color: var(--tinta-suave); }
.donde__foto { margin: 0; border: 2px solid var(--antracita); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-alta); }
.donde__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; }

/* Propuesta (para la reunión) */
.propuesta { background: #2a2f33; color: #e9ecea; padding: 3rem 1rem; }
.propuesta > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.propuesta h2 { color: var(--blanco); }
.propuesta__intro { color: #b9c2bd; margin-top: .6rem; }
.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem auto; }
.plan { background: #353b40; border-radius: var(--radio); padding: 1.6rem 1.7rem; box-shadow: var(--sombra-alta); }
.plan--premium { background: var(--petroleo); }
.plan--premium a { color: var(--blanco); }
.plan--premium .plan__precio strong { color: #c5de70; }
.plan h3 { font-size: 1.6rem; text-transform: uppercase; }
.plan__precio { font-size: 1.1rem; margin: .6rem 0 1rem; color: #d9e4e8; }
.plan__precio strong { font-size: 2.4rem; color: var(--lima); letter-spacing: -.03em; }
.plan__precio span { display: block; font-weight: 700; color: var(--blanco); }
.plan ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; }
.plan a { color: var(--lima); }
.propuesta__legal { font-size: .95rem; color: #b9c2bd; max-width: 80ch; }

/* Pie */
.pie { background: var(--antracita); color: #d3dad6; padding: 2.5rem clamp(1rem, 3vw, 3rem) 3rem; font-size: .95rem; }
.pie > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.pie p { max-width: none; margin: 0 0 .4rem; }
.pie__col { margin-bottom: 1.4rem; }
.pie__legal { border-top: 1px solid #39434a; padding: .8rem 0; }
.pie__legal summary { cursor: pointer; font-weight: 700; color: var(--blanco); }
.pie__legal p { margin-top: .6rem; max-width: 80ch; }
.pie__agencia { margin-top: 1.6rem !important; color: #8a949a; }
.pie a { color: var(--lima); }

/* ---------- Parafarmacia online (premium) ---------- */
.productos { max-width: var(--ancho); margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 3vw, 3rem) clamp(2.5rem, 5vw, 4.5rem); }
.productos__cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 4rem; align-items: end; }
.productos__intro { color: var(--tinta-suave); margin: 0; }
.productos__nota { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .95rem; color: var(--tinta-suave); max-width: none; }
.productos__filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; margin: 2rem 0 .75rem; }
.lineal { display: flex; flex-wrap: wrap; gap: .5rem; }
.lineal__tab { font: inherit; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em; padding: .5rem .9rem; border-radius: var(--radio); border: 2px solid var(--antracita); background: var(--blanco); color: var(--tinta); cursor: pointer; --p: var(--antracita); --p-texto: var(--blanco); transition: background .25s, color .25s, transform .35s var(--suave), box-shadow .35s var(--suave); }
.lineal__tab:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.lineal__tab[aria-pressed="true"] { background: var(--p); color: var(--p-texto); border-color: var(--p); }
.lineal__tab[data-seccion-tab="infantil"] { --p: var(--azul); }
.lineal__tab[data-seccion-tab="cosmetica"] { --p: var(--turquesa); }
.lineal__tab[data-seccion-tab="nutricion"] { --p: var(--lima); --p-texto: var(--tinta); }
.lineal__tab[data-seccion-tab="ortopedia"] { --p: var(--petroleo); }
.lineal__tab[data-seccion-tab="higiene"] { --p: var(--antracita); --p-texto: var(--lima); }
.buscador { position: relative; display: flex; align-items: center; margin-left: auto; flex: 1 1 260px; max-width: 360px; }
.buscador svg { position: absolute; left: .8rem; width: 18px; height: 18px; fill: none; stroke: var(--tinta-suave); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.buscador input { font: inherit; width: 100%; padding: .6rem .9rem .6rem 2.5rem; border: 2px solid var(--linea); border-radius: var(--radio); background: var(--blanco); color: var(--tinta); caret-color: var(--turquesa-tinta); }
.buscador input:focus { outline: 3px solid var(--lima); outline-offset: 1px; border-color: var(--petroleo); }
.buscador input::placeholder { color: #6b7876; }
.productos__resultado { font-size: .95rem; color: var(--tinta-suave); margin: 0 0 1rem; min-height: 1.5em; max-width: none; }
.productos__vacio { padding: 1.5rem; background: var(--sala); border-radius: var(--radio); max-width: none; }
.estanteria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.ficha, .linea { --p: var(--antracita); --p-suave: var(--antracita); }
.ficha[data-seccion="infantil"], .linea[data-seccion="infantil"] { --p: var(--azul); --p-suave: var(--azul); }
.ficha[data-seccion="cosmetica"], .linea[data-seccion="cosmetica"] { --p: var(--turquesa); --p-suave: var(--turquesa); }
.ficha[data-seccion="nutricion"], .linea[data-seccion="nutricion"] { --p: var(--lima-tinta); --p-suave: var(--lima); }
.ficha[data-seccion="ortopedia"], .linea[data-seccion="ortopedia"] { --p: var(--petroleo); --p-suave: var(--petroleo); }
.ficha[data-seccion="higiene"], .linea[data-seccion="higiene"] { --p: var(--antracita); --p-suave: #8a949a; }
.envase { --f: color-mix(in srgb, var(--p) 16%, #fff); --f2: color-mix(in srgb, var(--p) 34%, #fff); }
.ficha { display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.ficha__foto { position: relative; margin: 0; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--p-suave) 14%, var(--blanco)); display: grid; place-items: center; border-bottom: 3px solid var(--p); }
.ficha__foto svg { width: 60%; height: auto; }
.ficha__etiqueta { position: absolute; top: .7rem; right: .7rem; background: var(--p); color: var(--blanco); font-size: .8rem; font-weight: 700; letter-spacing: .04em; padding: .2rem .55rem; border-radius: 3px; }
.ficha__texto { padding: .9rem 1rem .7rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.ficha__nombre { font-size: 1.1rem; line-height: 1.2; letter-spacing: -.01em; text-wrap: pretty; }
.ficha__meta { font-size: .9rem; color: var(--tinta-suave); margin: 0; font-weight: 600; }
.ficha__desc { font-size: .95rem; color: var(--tinta-suave); margin: .15rem 0 0; line-height: 1.45; }
.ficha__regleta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; padding: .7rem .8rem .8rem 1rem; border-top: 1px solid var(--linea); background: var(--sala); margin-top: auto; }
.ficha__precio { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin-right: auto; }
.ficha__anadir { padding: .5rem .85rem; font-size: .95rem; }
.ficha__encesta { width: 100%; font-size: .9rem; font-weight: 700; color: var(--lima-tinta); }

/* Botón de la cesta en la banda */
.pestana--cesta { position: relative; }
.cesta__cuenta[hidden] { display: none; }
.cesta__cuenta { min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--lima); color: var(--tinta); font-size: .85rem; font-weight: 800; display: inline-grid; place-items: center; }
.pestana--cesta.se-mueve { animation: cesta-pulso .5s var(--suave); }
@keyframes cesta-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Barra inferior de la cesta (solo móvil y tablet) */
.cesta-barra { display: none; position: fixed; inset: auto 0 0 0; z-index: 5; align-items: center; gap: .6rem; font: inherit; font-weight: 700; border: 0; cursor: pointer; background: var(--antracita); color: var(--blanco); padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px -16px rgba(22, 32, 31, .7); }
.cesta-barra svg { width: 20px; height: 20px; fill: none; stroke: var(--lima); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cesta-barra strong { margin-left: auto; color: var(--lima); font-size: 1.1rem; }
.cesta-barra:focus-visible { outline-offset: -5px; box-shadow: none; }
@media (max-width: 900px) { .cesta-barra.es-visible { display: flex; } body:has(.cesta-barra.es-visible) { padding-bottom: 4rem; } }

/* Cajón de la cesta */
.cesta { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(100%, 520px); max-width: 100%; height: 100%; max-height: 100%; border: 0; padding: 0; background: var(--blanco); color: var(--tinta); box-shadow: -20px 0 50px -30px rgba(22, 32, 31, .6); transform: translateX(100%); transition: transform .5s var(--suave), display .5s allow-discrete, overlay .5s allow-discrete; }
.cesta[open] { transform: translateX(0); }
@starting-style { .cesta[open] { transform: translateX(100%); } }
.cesta::backdrop { background: rgba(22, 32, 31, .55); }
.cesta__caja { display: flex; flex-direction: column; height: 100%; overflow: auto; padding: 1.25rem 1.5rem 2rem; }
.cesta__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cesta h2 { font-size: 1.6rem; text-transform: uppercase; }
.cesta h2:focus { outline: none; }
.cesta__cerrar { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radio); border: 2px solid var(--antracita); flex: none; }
.cesta__cerrar svg, .linea__cantidad svg, .linea__quitar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.cesta__cerrar:hover { background: var(--sala); }
.cesta__cerrar:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
.cesta__lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.linea { display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: "foto texto quitar" "foto cantidad importe"; gap: .35rem .8rem; align-items: center; padding: .75rem; border: 1px solid var(--linea); border-radius: var(--radio); }
.linea__foto { grid-area: foto; margin: 0; width: 56px; height: 56px; border-radius: 3px; background: color-mix(in srgb, var(--p-suave) 14%, var(--blanco)); display: grid; place-items: center; align-self: start; }
.linea__foto svg { width: 72%; }
.linea__texto { grid-area: texto; display: flex; flex-direction: column; line-height: 1.3; }
.linea__texto span { font-size: .95rem; color: var(--tinta-suave); }
.linea__cantidad { grid-area: cantidad; display: inline-flex; align-items: center; border: 2px solid var(--antracita); border-radius: var(--radio); justify-self: start; }
.linea__cantidad button { all: unset; cursor: pointer; width: 34px; height: 32px; display: grid; place-items: center; }
.linea__cantidad button:hover { background: var(--sala); }
.linea__cantidad button:focus-visible { outline: 3px solid var(--lima); outline-offset: -3px; }
.linea__cantidad output { min-width: 2.2ch; text-align: center; font-weight: 700; }
.linea__importe { grid-area: importe; justify-self: end; }
.linea__quitar { all: unset; grid-area: quitar; cursor: pointer; justify-self: end; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radio); color: var(--tinta-suave); }
.linea__quitar:hover { background: var(--sala); color: var(--tinta); }
.linea__quitar:focus-visible { outline: 3px solid var(--lima); }
.cesta__vacia { color: var(--tinta-suave); max-width: none; }
.cesta__total { display: flex; align-items: baseline; gap: .6rem; margin: 1.25rem 0 1rem; padding-top: 1rem; border-top: 2px solid var(--antracita); font-weight: 600; }
.cesta__total strong { font-size: 1.6rem; margin-left: auto; letter-spacing: -.02em; }
.cesta__total small { font-size: .95rem; color: var(--tinta-suave); font-weight: 400; }
.cesta .pestana--primaria:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.cesta__pie { margin-top: auto; padding-top: 1.25rem; font-size: .95rem; color: var(--tinta-suave); max-width: none; }
.cesta .formulario { gap: .9rem; }
.opciones--bloques { display: grid; gap: .5rem; }
.opciones--bloques label { border: 2px solid var(--linea); border-radius: var(--radio); padding: .7rem .9rem; align-items: center; }
.opciones--bloques label:has(input:checked) { border-color: var(--antracita); background: var(--sala); }
.opciones--bloques label:has(input:disabled) { color: var(--tinta-suave); border-style: dashed; cursor: not-allowed; }
.opciones--bloques label > span { display: flex; flex-direction: column; font-weight: 600; }
.opciones--bloques small { color: var(--tinta-suave); font-size: .95rem; font-weight: 400; }
.cesta__resumen { display: flex; justify-content: space-between; font-weight: 600; margin: .4rem 0 0; max-width: none; }
.cesta__resumen strong { font-size: 1.3rem; }
.enlace { all: unset; cursor: pointer; color: var(--turquesa-tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; font-weight: 600; align-self: flex-start; }
.enlace:hover { color: var(--petroleo); }
.enlace:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }
.cesta .confirmacion { box-shadow: none; }
.pedido__lineas { list-style: none; padding: 0; margin: .8rem 0; display: grid; gap: .3rem; }
.pedido__lineas li { display: flex; justify-content: space-between; gap: 1rem; }
.pedido__total { display: flex; justify-content: space-between; border-top: 2px solid var(--antracita); padding-top: .6rem; font-weight: 700; margin: 0 0 1rem; }

/* ---------- Responsive ---------- */
@media (min-width: 601px) { .encargos, .propuesta { padding-inline: 2rem; } }
@media (min-width: 901px) { .encargos { padding: 5.5rem 3rem; } .propuesta { padding: 5rem 3rem; } }
@media (max-width: 1100px) {
  .banda { grid-template-columns: auto 1fr; grid-template-areas: "placa nombre" "estado estado" "acciones acciones" "menu menu"; }
  .banda__estado, .banda__acciones { justify-self: start; justify-content: flex-start; }
}
@media (max-width: 900px) {
  body { font-size: 17px; }
  .pared { grid-template-columns: 1fr 1fr; grid-template-areas: "hoy hoy" "infantil cosmetica" "nutricion cosmetica" "ortopedia ortopedia" "consejo consejo"; }
  .panel--cosmetica .panel__cristal { min-height: 380px; }
  .encargos__panel, .citas, .donde { grid-template-columns: 1fr; }
  .encargos .formulario, .encargos .confirmacion, .citas .formulario, .citas .confirmacion { grid-column: 1; grid-row: auto; }
  .servicios__lista, .opiniones__lista, .planes { grid-template-columns: 1fr; }
  .productos__cab { grid-template-columns: 1fr; }
  .buscador { margin-left: 0; max-width: none; }
}
@media (max-width: 600px) {
  .banda__menu { flex-wrap: wrap; overflow: visible; gap: .55rem 1.2rem; }
  .banda { grid-template-columns: 1fr; grid-template-areas: "placa" "nombre" "estado" "acciones" "menu"; padding-top: 1rem; }
  .banda__placa { justify-self: start; }
  .pared { grid-template-columns: 1fr; grid-template-areas: "hoy" "infantil" "cosmetica" "nutricion" "ortopedia" "consejo"; padding: 10px; gap: 10px; }
  .panel--cosmetica .panel__cristal, .panel__cristal { min-height: 240px; }
  .formulario__fila { grid-template-columns: 1fr; }
  .demo__link { margin-left: 0; }
  .banda__estado { font-size: .95rem; }
  .productos__filtros { flex-direction: column; align-items: stretch; gap: .75rem; margin-top: 1.25rem; }
  .buscador { order: -1; flex: none; max-width: none; }
  .lineal { flex-wrap: nowrap; overflow-x: auto; gap: .4rem; padding-bottom: .3rem; scrollbar-width: none; }
  .lineal::-webkit-scrollbar { display: none; }
  .lineal__tab { white-space: nowrap; flex: none; }
  .estanteria { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ficha__texto { padding: .7rem .75rem .5rem; }
  .ficha__nombre { font-size: 1rem; }
  .ficha__desc { display: none; }
  .ficha__regleta { padding: .6rem .6rem .7rem .75rem; }
  .ficha__precio { font-size: 1.15rem; }
  .ficha__anadir { padding: .45rem .7rem; font-size: .9rem; }
  .cesta__caja { padding: 1rem 1rem 1.5rem; }
  .linea { grid-template-columns: 48px 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}