/* DECOART — dirección visual «Taller claro» (rediseño del 7-oct-2026, al nivel de la Óptica CAV)
   Base blanca y crema, tipografía editorial (DM Serif Display para títulos, DM Sans para texto), tarjetas
   blancas con borde fino y sombra suave, botones píldora. El acento es el ámbar de su logo.
   Paleta (medida con PIL del logo original logo.png de decoart.mx):
   --ambar        #f8b040  medido: ícono y «DECOART» del logo · tinta encima 10.2:1
   --ambar-hondo  #e8961a  derivado: hover del ámbar
   --ambar-texto  #8a5200  derivado: ámbar oscurecido para texto sobre blanco 6.1:1 y sobre crema 5.6:1
   --ambar-suave  #fff4df  derivado: fondo de insignias y avisos
   --tinta        #141210  derivado: el negro del logo, calentado · sobre blanco 18.4:1
   --crema        #faf7f1  derivado: fondo suave de la portada
   --tono         #f4eee3  derivado: bandas alternas (cartón de sus cajas, aclarado)
   --gris         #5f574d  derivado de la tinta · sobre blanco 6.3:1, sobre --tono 5.5:1
   --linea        #e6dfd3  derivado · bordes, no texto
   WhatsApp       #0f7a6e  blanco encima 5.2:1 */

:root {
  --f-titulo: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --f-texto: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-hero: clamp(2.5rem, 6vw, 4rem);
  --t-1: clamp(1.85rem, 3.8vw, 2.7rem);
  --t-2: clamp(1.25rem, 2.1vw, 1.5rem);
  --t-3: clamp(1.05rem, 1.3vw, 1.15rem);
  --t-base: 1.0625rem;
  --t-s: .9375rem;
  --t-ceja: .8125rem;

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --seccion: clamp(60px, 8vw, 104px);
  --gutter: clamp(16px, 5vw, 48px);
  --max: 1240px;
  --medida: 62ch;

  --r: 10px; --r-2: 14px; --r-3: 22px; --r-full: 999px;

  --blanco: #ffffff;
  --crema: #faf7f1;
  --tono: #f4eee3;
  --ambar: #f8b040;
  --ambar-hondo: #e8961a;
  --ambar-texto: #8a5200;
  --ambar-suave: #fff4df;
  --naranja: var(--ambar);            /* nombres viejos que siguen usando el panel y las páginas sueltas */
  --naranja-hondo: var(--ambar-hondo);
  --naranja-texto: var(--ambar-texto);
  --tinta: #141210;
  --tinta-2: #231f1a;
  --gris: #5f574d;
  --gris-claro: #cbc2b5;
  --linea: #e6dfd3;
  --linea-osc: #3a342d;
  --wa: #0f7a6e;
  --wa-hondo: #0b5f56;
  --rojo: #b3261e;
  --verde: #1b7f4b;

  --sombra-1: 0 1px 2px rgba(20, 18, 16, .05), 0 4px 14px -6px rgba(20, 18, 16, .14);
  --sombra-2: 0 16px 34px -18px rgba(20, 18, 16, .4);
  --sombra-3: 0 34px 70px -34px rgba(20, 18, 16, .5);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 400ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-texto); font-size: var(--t-base); line-height: 1.55; color: var(--tinta); background: var(--blanco); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: 0; }
h3 { font-family: var(--f-texto); font-weight: 700; font-size: var(--t-2); line-height: 1.2; margin: 0; }
h2 { font-size: var(--t-1); }
p { margin: 0; }
a { color: var(--ambar-texto); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ambar-hondo); outline-offset: 3px; border-radius: 4px; }
.oculto, .solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura, .contenedor { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.solo-ancho { display: none; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--tinta); color: #fff; padding: var(--e-3) var(--e-4); z-index: 50; }
.saltar:focus { left: var(--e-2); }

.ceja { font-size: var(--t-ceja); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ambar-texto); margin-bottom: var(--e-3); }
.ceja--clara { color: var(--ambar); }
.intro { color: var(--gris); max-width: var(--medida); margin-top: var(--e-3); }
.cabeza-seccion { margin-bottom: var(--e-6); }
.cabeza-seccion--fila { display: grid; gap: var(--e-3); }

/* ---------- tira y cabecera ---------- */
.tira { margin: 0; background: var(--tinta); color: #e9e2d6; font-size: var(--t-ceja); text-align: center; line-height: 28px; height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--e-3); }
.tira strong { color: var(--ambar); }

.cabeza { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.cabeza__in { max-width: var(--max); margin: 0 auto; padding: var(--e-2) var(--gutter); display: flex; align-items: center; gap: var(--e-4); min-height: 64px; }
.marca { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.marca img { width: 150px; height: auto; }
.menu { display: none; gap: var(--e-5); margin-left: auto; }
.menu a { text-decoration: none; font-weight: 500; font-size: var(--t-s); color: var(--gris); padding: var(--e-3) 0; transition: color .2s; }
.menu a:hover { color: var(--tinta); }

.btn-carrito { margin-left: auto; display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-4); border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta); border-radius: var(--r-full); font: 700 var(--t-s) var(--f-texto); text-decoration: none; box-shadow: var(--sombra-1); transition: border-color .2s, box-shadow .2s, transform .2s; }
.btn-carrito svg { width: 20px; height: 20px; }
.btn-carrito:hover { border-color: var(--ambar-hondo); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.btn-carrito:active { transform: translateY(0); }
.contador { min-width: 24px; height: 24px; border-radius: var(--r-full); background: var(--ambar); color: var(--tinta); font-size: var(--t-ceja); display: grid; place-items: center; padding: 0 6px; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 52px; padding: 0 var(--e-5); border-radius: var(--r-full); border: 0; font: 700 var(--t-base) var(--f-texto); text-decoration: none; color: var(--tinta); background: var(--tono); cursor: pointer; transition: background-color .2s, box-shadow .2s, transform .2s, border-color .2s; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn--principal { background: var(--ambar); color: var(--tinta); box-shadow: var(--sombra-2); }
.btn--principal:hover { background: var(--ambar-hondo); box-shadow: var(--sombra-3); }
.btn--principal-oscuro, .btn--agregar, .btn--chico { background: var(--tinta); color: #fff; box-shadow: var(--sombra-1); }
.btn--principal-oscuro:hover, .btn--agregar:hover, .btn--chico:hover { background: var(--ambar-hondo); color: var(--tinta); box-shadow: var(--sombra-2); }
.btn--wa { background: var(--wa); color: #fff; box-shadow: var(--sombra-2); }
.btn--wa:hover { background: var(--wa-hondo); }
.btn--quieto, .btn--claro { background: var(--blanco); color: var(--tinta); border: 1.5px solid var(--linea); box-shadow: var(--sombra-1); }
.btn--quieto:hover, .btn--claro:hover { border-color: var(--ambar-hondo); box-shadow: var(--sombra-2); }
.btn--chico, .btn--agregar { min-height: 44px; padding: 0 var(--e-4); font-size: var(--t-s); }
.btn--ancho { width: 100%; }
.btn--hecho, .btn--hecho:hover { background: var(--wa); color: #fff; }
.enlace { color: var(--ambar-texto); font-weight: 600; font-size: var(--t-s); min-height: 44px; display: inline-flex; align-items: center; gap: 6px; text-decoration-color: rgba(138, 82, 0, .35); text-underline-offset: 3px; }
.enlace:hover { color: var(--tinta); }
.enlace--chico { font-size: var(--t-ceja); min-height: 32px; }
.enlace--centro { justify-content: center; width: 100%; }

/* ---------- portada ---------- */
.portada { background: linear-gradient(180deg, var(--blanco) 0%, var(--blanco) 50%, var(--crema) 100%); padding: var(--e-6) 0 var(--e-7); }
.portada__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: var(--e-6); align-items: center; }
.portada h1 { font-size: var(--t-hero); max-width: 14ch; }
.bajada { margin-top: var(--e-4); font-size: var(--t-3); color: var(--gris); max-width: 48ch; }
.chips { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip { font-size: var(--t-s); font-weight: 500; color: var(--tinta); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-full); padding: 5px 12px; box-shadow: var(--sombra-1); }
.chip b { font-weight: 700; }
.chip--estrella { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.chip--estrella span { color: var(--ambar); }
.chip--estado { padding-left: 26px; position: relative; }
.chip--estado::before { content: ''; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--gris-claro); }
.chip--abierto::before { background: var(--verde); box-shadow: 0 0 0 4px rgba(27, 127, 75, .18); }
.acciones { margin-top: var(--e-5); display: flex; flex-wrap: wrap; gap: var(--e-3); }
.acciones--izq .btn { flex: 0 1 auto; }
.portada__foto { margin: 0; position: relative; }
.portada__foto img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; object-position: 50% 40%; border-radius: var(--r-3); box-shadow: var(--sombra-3); background: var(--tono); }
.portada__foto figcaption { margin-top: var(--e-3); font-size: var(--t-s); font-style: italic; color: var(--gris); }
.portada__foto::before { content: ''; position: absolute; inset: auto -14px -14px auto; width: 46%; height: 46%; border-radius: var(--r-3); background: var(--ambar); opacity: .28; z-index: -1; }

/* ---------- por qué DECOART (crema) ---------- */
.razones { background: var(--tono); padding: var(--seccion) 0; }
.razones h2 { max-width: 22ch; }
.razones__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.razon { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-2); padding: var(--e-5); box-shadow: var(--sombra-1); display: grid; gap: var(--e-2); align-content: start; }
.razon__icono { width: 44px; height: 44px; border-radius: var(--r); background: var(--ambar-suave); color: var(--ambar-texto); display: grid; place-items: center; }
.razon__icono svg { width: 24px; height: 24px; }
.razon h3 { font-size: var(--t-3); margin-top: var(--e-2); }
.razon p { color: var(--gris); font-size: var(--t-s); }

/* ---------- ¿qué quiere hacer? (blanca) ---------- */
.proyectos { background: var(--blanco); padding: var(--seccion) 0; }
.proyectos__rejilla { display: grid; gap: var(--e-5); }
.proyectos__lista { display: flex; flex-wrap: wrap; gap: var(--e-2); align-content: start; }
.proy { min-height: 46px; padding: 0 var(--e-4); border-radius: var(--r-full); border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta); font: 500 var(--t-s) var(--f-texto); white-space: nowrap; box-shadow: var(--sombra-1); transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.proy:hover { border-color: var(--ambar-hondo); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.proy--activo, .proy[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.receta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-3); padding: var(--e-5); box-shadow: var(--sombra-2); }
.receta h3 { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-2); }
.receta__porque { color: var(--gris); margin-top: var(--e-2); }
.receta__lista { list-style: none; padding: 0; margin: var(--e-4) 0 0; display: grid; gap: var(--e-2); }
.receta__lista li { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--e-3); align-items: center; padding: var(--e-2); border-radius: var(--r); background: var(--crema); border: 1px solid var(--linea); }
.receta__lista li.agotado { opacity: .55; }
.receta__lista img { width: 56px; height: 56px; border-radius: var(--r); background: #fff; object-fit: contain; }
.receta__nombre { font-weight: 500; font-size: var(--t-s); line-height: 1.3; }
.receta__lista b { font-variant-numeric: tabular-nums; }
.receta__total { margin-top: var(--e-4); text-align: right; color: var(--gris); }
.receta__total b { font-size: var(--t-2); color: var(--tinta); font-variant-numeric: tabular-nums; }
.receta__acciones { display: grid; gap: var(--e-3); margin-top: var(--e-4); }

/* ---------- calculadora (crema) ---------- */
.calculadora { background: var(--tono); padding: var(--seccion) 0; }
.calc { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-3); box-shadow: var(--sombra-2); padding: var(--e-5); display: grid; gap: var(--e-5); }
.calc__tipos { display: grid; gap: var(--e-2); }
.calc__tipo { text-align: left; padding: var(--e-3) var(--e-4); border-radius: var(--r-2); border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta); min-height: 64px; transition: background-color .2s, border-color .2s, box-shadow .2s; }
.calc__tipo:hover { border-color: var(--ambar-hondo); box-shadow: var(--sombra-1); }
.calc__tipo b { display: block; font-weight: 700; }
.calc__tipo small { display: block; font-size: var(--t-s); color: var(--gris); line-height: 1.35; }
.calc__tipo--activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.calc__tipo--activo small { color: var(--gris-claro); }
.calc__form { display: grid; gap: var(--e-3); }
.calc__medidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--e-3); }
.calc__medida { display: grid; gap: var(--e-1); font-size: var(--t-s); font-weight: 600; }
.calc__unidad { border: 0; padding: 0; margin: 0; display: flex; gap: var(--e-4); font-size: var(--t-s); }
.calc__unidad label { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; }
.calc__unidad input { width: 20px; height: 20px; accent-color: var(--ambar-hondo); }
.calc__resultado { background: var(--crema); border: 1px solid var(--linea); border-radius: var(--r-2); padding: var(--e-4); display: grid; gap: var(--e-2); }
.calc__vacio { color: var(--gris); }
.calc__kilos b { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2rem, 6vw, 2.6rem); }
.calc__reparto { font-size: var(--t-s); color: var(--gris); }
.calc__opciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.calc__lleve { font-size: var(--t-base); }
.calc__acciones { display: grid; gap: var(--e-2); margin-top: var(--e-2); }

/* ---------- tienda (blanca) ---------- */
.tienda { padding: var(--seccion) 0; background: var(--blanco); }
.filtros { display: flex; gap: var(--e-2); overflow-x: auto; padding: 2px 0 var(--e-2); margin-bottom: var(--e-4); scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtro { flex: 0 0 auto; min-height: 44px; padding: 0 var(--e-4); border-radius: var(--r-full); border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta); font: 500 var(--t-s) var(--f-texto); white-space: nowrap; box-shadow: var(--sombra-1); transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.filtro:hover { border-color: var(--ambar-hondo); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.filtro--activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.productos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.producto { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-2); overflow: hidden; box-shadow: var(--sombra-1); display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s, border-color .25s; }
.producto:hover { box-shadow: var(--sombra-2); transform: translateY(-3px); border-color: var(--ambar); }
.producto__foto { position: relative; background: #fff; border-bottom: 1px solid var(--tono); }
.producto__foto img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: var(--e-3); }
.insignia { position: absolute; top: var(--e-2); left: var(--e-2); background: var(--ambar); color: var(--tinta); font-weight: 700; font-size: var(--t-ceja); padding: 3px 9px; border-radius: var(--r-full); }
.producto__info { padding: var(--e-3); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.producto__cat { font-size: var(--t-ceja); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ambar-texto); }
.producto h3 { font-size: 1rem; line-height: 1.25; }
.producto__nota { display: none; font-size: .875rem; color: var(--gris); line-height: 1.4; }
.producto__datos { list-style: none; margin: var(--e-1) 0 0; padding: 0; display: grid; gap: 2px; font-size: .8125rem; color: var(--gris); }
.producto__datos li { padding-left: 14px; position: relative; }
.producto__datos li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--ambar); }
.ficha { margin-top: var(--e-2); font-size: .8125rem; }
.ficha summary { cursor: pointer; font-weight: 600; color: var(--ambar-texto); min-height: 32px; display: flex; align-items: center; list-style: none; }
.ficha summary::-webkit-details-marker { display: none; }
.ficha summary::before { content: '+'; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; margin-right: 6px; font-size: 13px; line-height: 1; }
.ficha[open] summary::before { content: '−'; }
.ficha dl { margin: var(--e-2) 0 0; display: grid; gap: 6px; color: var(--gris); }
.ficha dt { font-weight: 700; color: var(--tinta); }
.ficha dd { margin: 0; }
.producto__pie { margin-top: auto; padding-top: var(--e-3); display: grid; gap: var(--e-2); }
.producto__pie .btn { width: 100%; }
.precio { font-weight: 700; font-size: var(--t-3); color: var(--tinta); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); }
.precio s { font-size: .875rem; font-weight: 500; color: var(--gris); }
.stock { font-size: var(--t-ceja); color: var(--wa-hondo); font-weight: 600; }
.stock--no { color: var(--rojo); }
.producto--agotado h3, .producto--agotado .precio b { color: var(--gris); }
.producto--agotado img { opacity: .55; }

/* ---------- asesoría (ámbar) ---------- */
.asesoria { background: var(--ambar); padding: var(--seccion) 0; }
.asesoria__in { display: grid; gap: var(--e-5); align-items: start; }
.asesoria .ceja { color: var(--tinta); }
.asesoria h2 { max-width: 20ch; }
.asesoria > .envoltura > div > p:not(.ceja) { margin-top: var(--e-3); max-width: 50ch; }
.asesoria__in > .btn { justify-self: start; align-self: center; }
.consulta { background: var(--blanco); border-radius: var(--r-3); padding: var(--e-5); box-shadow: var(--sombra-3); }
.consulta .etiqueta { margin-top: var(--e-2); }
.consulta .error { margin-top: 2px; }
.consulta__o { margin-top: var(--e-2); font-size: var(--t-s); color: var(--gris); }
.consulta p { max-width: none; }
.consulta__ok { font-family: var(--f-titulo); font-size: var(--t-2); }
.consulta__listo { display: grid; gap: var(--e-3); }
.consulta__listo:focus { outline: none; }

/* ---------- proyectos (blanca) ---------- */
.casos { background: var(--blanco); padding: var(--seccion) 0; }
.casos__lista { display: grid; gap: var(--e-4); }
.caso { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-3); box-shadow: var(--sombra-1); overflow: hidden; display: grid; transition: box-shadow .25s, transform .25s; }
.caso:hover { box-shadow: var(--sombra-2); transform: translateY(-3px); }
.caso__foto { padding: 0; border: 0; background: var(--tono); cursor: zoom-in; display: block; width: 100%; }
.caso__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.caso__texto { padding: var(--e-5); display: grid; gap: var(--e-3); align-content: start; }
.caso__texto h3 { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-2); }
.caso dl { margin: 0; display: grid; gap: var(--e-2); }
.caso dl div { display: grid; grid-template-columns: 6.2rem 1fr; gap: var(--e-2); padding-bottom: var(--e-2); border-bottom: 1px solid var(--tono); }
.caso dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.caso dt { font-size: var(--t-ceja); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ambar-texto); padding-top: 3px; }
.caso dd { margin: 0; font-size: var(--t-s); }

/* ---------- opiniones (crema) ---------- */
.opiniones { background: var(--tono); padding: var(--seccion) 0; }
.opiniones__lista { display: grid; gap: var(--e-3); margin-top: var(--e-6); }
.opinion { margin: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-2); padding: var(--e-5); box-shadow: var(--sombra-1); display: grid; gap: var(--e-3); align-content: start; }
.opinion p { font-family: var(--f-titulo); font-size: var(--t-3); line-height: 1.45; }
.opinion footer { font-size: var(--t-s); color: var(--gris); }
.opinion footer b { color: var(--tinta); display: block; }
.opinion__estrellas { color: var(--ambar-hondo); letter-spacing: 2px; font-size: var(--t-s); }
.opiniones__cifras { margin-top: var(--e-5); display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* ---------- equipo (oscura) ---------- */
.equipo { background: var(--tinta); color: #ebe5da; padding: var(--seccion) 0; }
.equipo__in { display: grid; gap: var(--e-7); align-items: center; }
.equipo__fotos { position: relative; padding-bottom: var(--e-8); }
.equipo__fotos figure { margin: 0; }
.equipo__f1 img { border-radius: var(--r-3); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.equipo__f2 { position: absolute; right: 0; bottom: 0; width: 56%; }
.equipo__f2 img { border-radius: var(--r-2); border: 5px solid var(--tinta); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8); }
.equipo h2 { color: #fff; max-width: 20ch; }
.equipo__texto > p:not(.ceja) { color: #cfc6b8; margin-top: var(--e-4); max-width: var(--medida); }
.logros { list-style: none; padding: 0; margin: var(--e-6) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-2); }
.logros li { background: rgba(255, 255, 255, .05); border: 1px solid rgba(248, 176, 64, .28); border-radius: var(--r-2); padding: var(--e-4); }
.logros b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--ambar); line-height: 1; }
.logros span { display: block; font-size: var(--t-s); color: #cfc6b8; margin-top: var(--e-1); line-height: 1.3; }
.cita { margin: var(--e-6) 0 0; padding: var(--e-5); background: rgba(255, 255, 255, .06); border-radius: var(--r-2); border-left: 3px solid var(--ambar); }
.cita p { font-family: var(--f-titulo); font-size: var(--t-3); line-height: 1.45; color: #fff; }
.cita cite { display: block; margin-top: var(--e-3); font-size: var(--t-s); color: #cfc6b8; font-style: normal; }

/* ---------- visítenos (crema) ---------- */
.visitenos { background: var(--tono); padding: var(--seccion) 0; }
.visitenos__in { display: grid; gap: var(--e-6); align-items: start; }
.visitenos h2 { max-width: 20ch; }
.estado { margin-top: var(--e-4); display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 600; font-size: var(--t-s); padding: var(--e-2) var(--e-4); border-radius: var(--r-full); background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra-1); }
.estado--abierto { color: var(--verde); }
.datos { margin: var(--e-5) 0 0; display: grid; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-2); box-shadow: var(--sombra-1); overflow: hidden; }
.datos div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--tono); }
.datos div:last-child { border-bottom: 0; }
.datos dt { font-size: var(--t-s); font-weight: 700; color: var(--gris); padding-top: 1px; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.datos a { color: var(--ambar-texto); font-weight: 500; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; margin-right: var(--e-3); }
.datos a:hover { text-decoration: underline; }
.direccion { display: none; }
.tarjeta-horario { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-3); padding: var(--e-5); box-shadow: var(--sombra-2); }
.tarjeta-horario h3 { font-size: var(--t-ceja); text-transform: uppercase; letter-spacing: .08em; color: var(--ambar-texto); }
.tarjeta-horario h3 + * { margin-top: var(--e-3); }
.tarjeta-horario table + h3 { margin-top: var(--e-5); }
.horario { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.horario th { text-align: left; font-weight: 500; text-transform: capitalize; padding: 7px 0; border-bottom: 1px solid var(--tono); }
.horario td { text-align: right; padding: 7px 0; border-bottom: 1px solid var(--tono); color: var(--gris); font-variant-numeric: tabular-nums; }
.telefonos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); font-size: var(--t-s); }
.telefonos span { display: block; color: var(--gris); font-size: var(--t-ceja); }
.telefonos a { display: inline-flex; align-items: center; min-height: 36px; margin-right: var(--e-4); font-weight: 600; color: var(--tinta); text-decoration-color: var(--ambar); text-underline-offset: 3px; }

/* ---------- pie ---------- */
.pie { background: var(--tinta-2); color: #cfc6b8; padding: var(--e-7) 0 calc(var(--e-7) + 72px); font-size: var(--t-s); }
.pie__in { display: grid; gap: var(--e-5); }
.pie__marca img { width: 150px; height: auto; margin-bottom: var(--e-3); }
.pie b { color: #fff; }
.pie a { color: #fff; }
.redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.red { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 48px; padding: var(--e-2) var(--e-4); border-radius: var(--r-full); border: 1px solid var(--linea-osc); background: rgba(255, 255, 255, .04); text-decoration: none; color: #fff; transition: border-color .2s, transform .2s; }
.red:hover { border-color: var(--ambar); transform: translateY(-2px); }
.red svg { color: var(--ambar); flex: none; }
.red span { display: grid; line-height: 1.15; }
.red small { color: #cfc6b8; font-size: var(--t-ceja); }
.pie__legal { display: grid; gap: var(--e-1); }
.pie__legal a { color: #cfc6b8; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.pie__legal a:hover { color: #fff; text-decoration: underline; }

/* ---------- flotantes: calculadora a la izquierda, carrito al centro, WhatsApp a la derecha ---------- */
.flotantes { position: fixed; left: 0; right: 0; bottom: var(--e-4); z-index: 30; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; padding: 0 var(--e-4); }
.flotantes > * { pointer-events: auto; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.flotantes--oculto > * { opacity: 0; pointer-events: none; transform: translateY(16px); }
.flotante { background: var(--tinta); color: #fff; text-decoration: none; font-weight: 700; padding: 0 var(--e-5); min-height: 52px; border-radius: var(--r-full); box-shadow: var(--sombra-3); display: inline-flex; align-items: center; gap: var(--e-2); white-space: nowrap; margin-right: 64px; transition: background-color .2s; }
.flotante:hover { background: var(--ambar-hondo); color: var(--tinta); }
.burbuja-wa { position: absolute; right: var(--e-4); bottom: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: var(--sombra-3); transition: background-color .2s, transform .2s; }
.burbuja-wa:hover { background: var(--wa-hondo); transform: translateY(-2px); }
.burbuja-wa__globo { position: absolute; right: 64px; bottom: 10px; white-space: nowrap; background: var(--blanco); color: var(--tinta); font-size: var(--t-ceja); font-weight: 600; padding: 6px var(--e-3); border-radius: var(--r-full); box-shadow: var(--sombra-2); border: 1px solid var(--linea); }
.boton-calc { position: absolute; left: var(--e-4); bottom: 0; height: 52px; padding: 0 var(--e-4); border-radius: var(--r-full); background: var(--blanco); color: var(--tinta); display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; font-weight: 700; font-size: var(--t-s); box-shadow: var(--sombra-3); border: 1.5px solid var(--linea); transition: border-color .2s, transform .2s; }
.boton-calc svg { color: var(--ambar-hondo); }
.boton-calc:hover { border-color: var(--ambar-hondo); transform: translateY(-2px); }

/* ---------- diálogos: carrito (cajón), pedido (modal) y visor ---------- */
dialog { border: 0; padding: 0; color: var(--tinta); background: var(--blanco); }
dialog::backdrop { background: rgba(20, 18, 16, .55); }
.cerrar { width: 44px; height: 44px; border-radius: var(--r-full); border: 0; background: var(--tono); color: var(--tinta); font-size: 1.6rem; line-height: 1; display: grid; place-items: center; transition: background-color .2s; }
.cerrar:hover { background: var(--linea); }
.cajon { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(440px, 100vw); display: none; flex-direction: column; box-shadow: var(--sombra-3); }
.cajon[open] { display: flex; }
.cajon__cab, .modal__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linea); }
.cajon__cab h2, .modal__cab h2 { font-size: var(--t-2); }
.cajon__cuerpo { flex: 1; overflow-y: auto; padding: var(--e-4) var(--e-5); display: grid; gap: var(--e-3); align-content: start; }
#carrito-lineas { display: grid; gap: var(--e-3); }
.vacio { color: var(--gris); }
.linea { display: grid; grid-template-columns: 64px 1fr; gap: var(--e-3); padding-bottom: var(--e-3); border-bottom: 1px solid var(--linea); }
.linea img { width: 64px; height: 64px; border-radius: var(--r); border: 1px solid var(--linea); object-fit: contain; background: #fff; }
.linea__nombre { font-weight: 600; font-size: var(--t-s); line-height: 1.3; }
.linea__precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; margin-top: var(--e-1); border: 1.5px solid var(--linea); border-radius: var(--r-full); overflow: hidden; }
.stepper button { width: 42px; height: 40px; border: 0; background: var(--blanco); color: var(--tinta); font-size: 1.25rem; }
.stepper button:hover { background: var(--tono); }
.stepper span { min-width: 30px; text-align: center; font-weight: 700; }
.sugeridos { display: grid; gap: var(--e-2); }
.sugeridos__t { font-size: var(--t-ceja); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ambar-texto); }
.sugerido { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--e-3); align-items: center; padding: var(--e-2); border: 1px dashed var(--linea); border-radius: var(--r); }
.sugerido img { width: 48px; height: 48px; border-radius: var(--r); object-fit: contain; background: #fff; }
.sugerido span { font-size: var(--t-s); line-height: 1.3; display: grid; }
.sugerido b { font-variant-numeric: tabular-nums; }
.sugerido .btn { min-height: 40px; font-size: .9rem; padding: 0 var(--e-3); }
.barra-envio { padding: var(--e-3) var(--e-5); background: var(--crema); border-bottom: 1px solid var(--linea); font-size: var(--t-s); }
.barra-envio__riel { margin-top: var(--e-2); height: 8px; border-radius: var(--r-full); background: var(--linea); overflow: hidden; }
.barra-envio__riel span { display: block; height: 100%; width: 0; background: var(--ambar); border-radius: inherit; transition: width 400ms var(--ease); }
.barra-envio--lista .barra-envio__riel span { background: var(--verde); }
.cajon__pie { padding: var(--e-3) var(--e-5) var(--e-4); border-top: 1px solid var(--linea); background: var(--blanco); }
.codigo summary { cursor: pointer; font-size: var(--t-s); font-weight: 600; color: var(--ambar-texto); min-height: 36px; display: flex; align-items: center; }
.codigo__fila { display: grid; grid-template-columns: 1fr auto; gap: var(--e-2); }
.codigo__fila .btn { min-height: 48px; font-size: var(--t-s); }
.aviso-cupon { font-size: var(--t-ceja); color: var(--gris); min-height: 20px; margin-top: var(--e-1); }
.aviso-cupon--ok { color: var(--wa-hondo); font-weight: 600; }
.aviso-cupon--no { color: var(--rojo); }
.totales { margin: var(--e-1) 0 var(--e-3); display: grid; gap: var(--e-1); }
.totales div { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-s); }
.totales dt { color: var(--gris); }
.totales dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.totales__desc dd, .totales__desc dt { color: var(--wa-hondo); }
.totales__total { border-top: 1px solid var(--linea); padding-top: var(--e-2); margin-top: var(--e-1); }
.totales__total dt { color: var(--tinta); font-weight: 700; }
.totales__total dd { font-size: var(--t-2); }
.totales__total small { font-size: var(--t-ceja); color: var(--gris); font-weight: 500; }

.modal { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border-radius: var(--r-3); box-shadow: var(--sombra-3); }
.modal__logo { width: 120px; height: auto; }
.pasos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: var(--e-3) var(--e-5) 0; margin: 0; }
.pasos li { font-size: var(--t-ceja); text-align: center; padding: 6px 2px; border-radius: var(--r); background: var(--tono); color: var(--gris); }
.pasos li.activo { background: var(--ambar); color: var(--tinta); font-weight: 700; }
.pasos li.hecho { background: var(--linea); color: var(--tinta); }
.mini-resumen { padding: var(--e-2) var(--e-5) 0; font-size: var(--t-s); color: var(--gris); }
.mini-resumen:empty { display: none; }
.paso { display: none; padding: var(--e-4) var(--e-5) var(--e-5); }
.paso--activo { display: grid; gap: var(--e-2); }
.etiqueta { display: block; font-size: var(--t-s); font-weight: 600; margin-bottom: var(--e-1); }
.opcional { font-weight: 400; color: var(--gris); }
.campo { width: 100%; font: 400 1rem var(--f-texto); min-height: 48px; padding: 0 var(--e-3); border: 1.5px solid var(--linea); border-radius: var(--r); background: var(--blanco); color: var(--tinta); }
.campo:focus-visible { outline: 3px solid var(--ambar-hondo); outline-offset: 1px; }
.campo[aria-invalid="true"] { border-color: var(--rojo); }
.campo--texto { min-height: 96px; padding: var(--e-3); resize: vertical; line-height: 1.45; }
.campo--cp { max-width: 160px; letter-spacing: .12em; }
select.campo { -webkit-appearance: none; appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23141210' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; }
.error { color: var(--rojo); font-size: var(--t-ceja); min-height: 0; }
.error:empty { display: none; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.direccion-campos { display: grid; gap: var(--e-2); }
.formas { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.formas legend { font-weight: 700; margin-bottom: var(--e-2); font-size: var(--t-s); }
.formas--entrega, .formas--envio { margin-top: var(--e-3); }
.forma { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border: 1.5px solid var(--linea); border-radius: var(--r-2); cursor: pointer; transition: border-color .2s, background-color .2s; }
.forma:hover { border-color: var(--ambar-hondo); }
.forma--activa, .forma:has(input:checked) { border-color: var(--ambar-hondo); background: var(--ambar-suave); }
.forma input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ambar-hondo); flex: none; }
.forma b { display: block; }
.forma small { display: block; font-size: var(--t-s); color: var(--gris); line-height: 1.4; }
.nota-pago { font-size: var(--t-s); color: var(--gris); padding: var(--e-2) 0; }
.nota-pago:empty { display: none; }
.candado { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-ceja); color: var(--gris); }
.pagos-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--e-1) 0; }
.pagos-badges span { font-size: var(--t-ceja); font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--linea); color: var(--gris); background: var(--crema); }
.pagos-badges:empty { display: none; }
.sello { justify-self: start; font-size: var(--t-ceja); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: var(--e-1) var(--e-3); border-radius: var(--r-full); background: var(--ambar-suave); color: var(--ambar-texto); }
.sello--ok { background: #e6f4ee; color: var(--verde); }
.comprobante { display: grid; grid-template-columns: 120px 1fr; gap: var(--e-4); align-items: center; margin: var(--e-3) 0; padding: var(--e-4); border: 2px dashed var(--linea); border-radius: var(--r-2); }
.qr { width: 120px; height: 120px; display: grid; place-items: center; border-radius: var(--r); padding: var(--e-1); font-weight: 700; font-size: var(--t-s); background: #fff; }
.qr svg { width: 100%; height: 100%; }
.folio { font-family: var(--f-titulo); font-size: 1.9rem; letter-spacing: .04em; }
#resumen-final { font-size: var(--t-s); color: var(--gris); }
.visor { background: var(--tinta); color: #fff; padding: var(--e-4); border-radius: var(--r-3); max-width: min(92vw, 760px); }
.visor img { max-height: 76vh; width: auto; margin: 0 auto; border-radius: var(--r); }
.visor p { margin-top: var(--e-3); font-size: var(--t-s); color: #cfc6b8; }
.cerrar--claro { position: absolute; top: var(--e-2); right: var(--e-2); z-index: 2; }

/* ---------- páginas sueltas: mi pedido, mi cuenta, políticas, cursos y panel ---------- */
.hoja { padding: var(--e-7) var(--gutter) var(--e-9); max-width: 800px; }
.hoja__titulo { font-size: var(--t-1); margin-bottom: var(--e-5); }
.tarjeta-hoja { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-3); padding: var(--e-5); box-shadow: var(--sombra-1); margin-bottom: var(--e-5); display: grid; gap: var(--e-3); }
.tarjeta-hoja h2 { font-size: var(--t-2); }
.linea-estado { list-style: none; margin: 0 0 var(--e-5); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-2); font-size: var(--t-ceja); font-weight: 600; color: var(--gris); }
.linea-estado li { padding-top: var(--e-2); border-top: 5px solid var(--linea); }
.linea-estado li.hecho { border-color: var(--tinta); color: var(--tinta); }
.linea-estado li.activo { border-color: var(--ambar); color: var(--tinta); }
.aviso-caja { background: var(--ambar-suave); border-left: 4px solid var(--ambar-hondo); padding: var(--e-3) var(--e-4); border-radius: var(--r); margin-bottom: var(--e-4); }
.aviso-caja--ok { background: #e6f4ee; border-color: var(--verde); }
.estado-pedido--no { color: var(--rojo); font-weight: 600; margin-bottom: var(--e-4); }
.legal { max-width: 760px; }
.legal__seccion { margin-top: var(--e-6); }
.legal__seccion h2 { font-size: var(--t-2); }
.legal__texto { display: grid; gap: var(--e-3); }
.legal__texto h2 { font-size: var(--t-2); margin-top: var(--e-4); }
.legal__texto p { color: var(--gris); }
.pendiente { background: var(--ambar-suave); border: 1px dashed var(--ambar-hondo); padding: var(--e-3) var(--e-4); border-radius: var(--r); }
.cuenta__correo { margin: 0 0 var(--e-4); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2); overflow-wrap: anywhere; }
.cuenta__correo .enlace { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.pedido-cuenta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-2); padding: var(--e-4); display: grid; gap: var(--e-2); }
.tarjeta-hoja .pedido-cuenta { box-shadow: none; margin-bottom: 0; }
.pedido-cuenta__cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); font-size: var(--t-3); }
.pedido-cuenta__estado { font-size: var(--t-ceja); font-weight: 600; padding: 2px 10px; border-radius: var(--r-full); background: var(--ambar-suave); color: var(--ambar-texto); white-space: nowrap; }
.pedido-cuenta__estado--pagado, .pedido-cuenta__estado--enviado, .pedido-cuenta__estado--entregado { background: #e6f4ee; color: var(--verde); }
.pedido-cuenta__estado--cancelado { background: #fdecec; color: var(--rojo); }
.pedido-cuenta__meta { color: var(--gris); font-size: var(--t-s); }
.pedido-cuenta__detalle { font-size: var(--t-s); }
.pedido-cuenta__acc { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pedido-cuenta__acc .btn { min-height: 44px; }

.cuerpo-panel { background: var(--crema); }
.panel { padding: var(--e-6) var(--gutter) var(--e-9); }
.entrar { max-width: 380px; margin: var(--e-7) auto; display: grid; gap: var(--e-2); }
.metricas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); margin-bottom: var(--e-5); }
.metrica { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-2); padding: var(--e-4); box-shadow: var(--sombra-1); }
.metrica b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 2rem; }
.metrica span { font-size: var(--t-s); color: var(--gris); }
.pestanas { display: flex; gap: var(--e-2); border-bottom: 2px solid var(--linea); margin-bottom: var(--e-4); overflow-x: auto; }
.pestana { min-height: 48px; padding: 0 var(--e-4); border: 0; background: none; font-weight: 600; color: var(--gris); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.pestana--activa { color: var(--tinta); border-color: var(--ambar); }
.pestana__cuenta { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 4px; border-radius: var(--r-full); background: var(--ambar); color: var(--tinta); font-size: var(--t-ceja); }
.aviso-panel { min-height: 24px; font-size: var(--t-s); margin-bottom: var(--e-3); }
.aviso-panel--ok { color: var(--wa-hondo); font-weight: 600; }
.aviso-panel--no { color: var(--rojo); font-weight: 600; }
.pedido-panel, .cupon-panel { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-2); padding: var(--e-4); box-shadow: var(--sombra-1); margin-bottom: var(--e-3); font-size: var(--t-s); display: grid; gap: var(--e-2); border-left: 5px solid var(--linea); }
.pedido-panel--apartado { border-left-color: var(--ambar); }
.pedido-panel--pagado { border-left-color: var(--wa); }
.pedido-panel--cancelado, .cupon-panel--off { opacity: .6; }
.pedido-panel--hecho { opacity: .75; }
.pedido-panel header, .cupon-panel header { display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; align-items: center; }
.pedido-panel ul { margin: 0; padding-left: var(--e-5); color: var(--gris); }
.pedido-panel__meta, .pedido-panel__entrega { color: var(--gris); }
.pedido-panel__contacto a { font-weight: 600; }
.pedido-panel__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pedido-panel__acciones .btn { min-height: 44px; font-size: var(--t-s); padding: 0 var(--e-4); }
.asesoria-panel__msj { white-space: pre-line; }
.etq { font-size: var(--t-ceja); font-weight: 600; padding: 2px var(--e-3); border-radius: var(--r-full); background: var(--tono); }
.etq--pagado { background: #e6f4ee; color: var(--verde); }
.etq--apartado { background: var(--ambar-suave); color: var(--ambar-texto); }
.prod-panel { display: grid; grid-template-columns: 64px 1fr; gap: var(--e-3); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-2); padding: var(--e-3); box-shadow: var(--sombra-1); margin-bottom: var(--e-3); }
.prod-panel img { width: 64px; height: 64px; border-radius: var(--r); border: 1px solid var(--linea); object-fit: contain; background: #fff; }
.prod-panel--oculto { opacity: .6; }
.prod-panel__nombre { font-weight: 600; }
.prod-panel__datos { display: grid; gap: var(--e-2); }
.prod-panel__campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); font-size: var(--t-ceja); }
.prod-panel__campos label { display: grid; gap: 2px; }
.prod-panel__campos .campo { min-height: 44px; }
.prod-panel__check { grid-column: 1 / -1; display: flex !important; align-items: center; gap: var(--e-2); min-height: 44px; }
.prod-panel__check input { width: 20px; height: 20px; accent-color: var(--ambar-hondo); }
.prod-panel .btn { justify-self: start; min-height: 44px; font-size: var(--t-s); }
.cupon-form { margin-bottom: var(--e-5); }
.guia-form { display: grid; gap: var(--e-3); padding-top: var(--e-2); border-top: 1px dashed var(--linea); }
.guia-form label { display: grid; gap: var(--e-1); font-weight: 600; }

.cursos-portada { background: var(--tinta); color: #fff; padding: var(--e-7) 0 var(--seccion); }
.cursos-portada__in { display: grid; gap: var(--e-6); align-items: center; }
.cursos-portada h1 { font-size: var(--t-hero); color: #fff; }
.cursos-portada__txt { color: #cfc6b8; margin-top: var(--e-4); max-width: 52ch; }
.cursos-portada__logros { margin-top: var(--e-5); }
.cursos-portada__acc { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }
.cursos-portada .btn--claro { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .35); }
.cursos-portada__foto { margin: 0; }
.cursos-portada__foto img { width: 100%; height: auto; border-radius: var(--r-3); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.cursos-seccion { padding: var(--seccion) 0; }
.cursos-seccion--tono { background: var(--tono); }
.cursos-lista { display: grid; gap: var(--e-4); }
.curso { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-3); box-shadow: var(--sombra-1); overflow: hidden; display: grid; }
.curso img { width: 100%; height: 220px; object-fit: cover; }
.curso__info { padding: var(--e-5); display: grid; gap: var(--e-3); align-content: start; }
.curso h3 { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-2); }
.curso__datos { font-weight: 600; color: var(--ambar-texto); font-size: var(--t-s); }
.curso__temario summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--ambar-texto); }
.curso__temario ol { margin: 0 0 var(--e-2); padding-left: 1.3em; display: grid; gap: var(--e-1); font-size: var(--t-s); color: var(--gris); }
.cursos-presencial, .cursos-mentor { display: grid; gap: var(--e-6); align-items: start; }
.cursos-presencial .btn { margin-top: var(--e-5); }
.cursos-incluye { margin: 0; padding-left: 1.2em; display: grid; gap: var(--e-2); }
.cursos-nota { color: var(--gris); font-size: var(--t-s); }
.cursos-testimonios { display: grid; gap: var(--e-3); }
.cita-curso { margin: 0; background: var(--blanco); border: 1px solid var(--linea); border-left: 4px solid var(--ambar); border-radius: var(--r); padding: var(--e-4); box-shadow: var(--sombra-1); }
.cita-curso p { font-family: var(--f-titulo); line-height: 1.45; }
.cita-curso cite { display: block; margin-top: var(--e-2); font-style: normal; font-weight: 600; font-size: var(--t-s); }

/* ---------- revelado al scroll ---------- */
html.js .revela { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.js .revela.visto { opacity: 1; transform: none; }
html.js .producto.revela.visto:hover, html.js .caso.revela.visto:hover { transform: translateY(-3px); }

/* ---------- responsive ---------- */
@media (min-width: 420px) { .producto__nota { display: block; } }
@media (min-width: 560px) {
  .razones__lista { grid-template-columns: 1fr 1fr; }
  .productos { gap: var(--e-4); }
  .producto__info { padding: var(--e-4); }
  .producto h3 { font-size: 1.0625rem; }
  .producto__pie { grid-template-columns: 1fr auto; align-items: end; }
  .producto__pie .btn { width: auto; }
  .opiniones__lista { grid-template-columns: 1fr 1fr; }
  .cursos-testimonios { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 700px) {
  .solo-ancho { display: inline; }
  .cabeza-seccion--fila { grid-template-columns: 1fr minmax(0, 420px); align-items: end; }
  .receta__acciones { grid-template-columns: auto 1fr; align-items: center; }
  .casos__lista { grid-template-columns: repeat(3, 1fr); }
  .metricas { grid-template-columns: repeat(4, 1fr); }
  .visitenos__in { grid-template-columns: 1.1fr 1fr; }
  .asesoria__in { grid-template-columns: 1fr; }
  .cursos-lista { grid-template-columns: repeat(3, 1fr); }
  .logros { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 760px) { .productos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .menu { display: flex; }
  .btn-carrito { margin-left: var(--e-4); }
  .portada { padding: var(--e-7) 0 var(--e-8); }
  .portada__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); }
  .portada h1 { max-width: none; }
  .portada__foto img { aspect-ratio: 11 / 10; }
  .razones__lista { grid-template-columns: repeat(4, 1fr); }
  .proyectos__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  .calc__tipos { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .asesoria__in { grid-template-columns: 1fr minmax(0, 560px); align-items: start; gap: var(--e-8); }
  .opiniones__lista { grid-template-columns: repeat(3, 1fr); }
  .equipo__in { grid-template-columns: 1.05fr 1fr; gap: var(--e-8); }
  .pie__in { grid-template-columns: 1fr auto auto; align-items: start; gap: var(--e-8); }
  .pie { padding-bottom: calc(var(--e-7) + 72px); }
  .cursos-portada__in { grid-template-columns: 1.1fr 1fr; }
  .cursos-presencial, .cursos-mentor { grid-template-columns: 1fr 1.2fr; }
}
@media (min-width: 1100px) { .productos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); } }
@media (max-width: 899px) { .portada__foto { max-width: 560px; } }
@media (max-width: 559px) {
  .portada { padding-top: var(--e-5); }
  .portada__in { gap: var(--e-5); }
  .portada h1 { max-width: none; font-size: 2.4rem; }
  .bajada { margin-top: var(--e-3); }
  .chips { margin-top: var(--e-4); gap: 6px; }
  .acciones { margin-top: var(--e-4); gap: var(--e-2); }
  .acciones .btn { flex: 1 1 calc(50% - var(--e-2)); padding: 0 var(--e-4); font-size: var(--t-s); }
  .proyectos__lista, .opiniones__cifras { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; scrollbar-width: none; }
  .proyectos__lista::-webkit-scrollbar { display: none; }
  .consulta .dos { grid-template-columns: 1fr; gap: 0; }
  .consulta { padding: var(--e-4); }
  .calc__tipo { min-height: 56px; }
}
@media (max-width: 520px) {
  .burbuja-wa__globo { display: none; }
  .boton-calc span { display: none; }
  .boton-calc { width: 52px; padding: 0; justify-content: center; }
  .flotantes { justify-content: center; }
  .flotante { margin-right: 0; padding: 0 var(--e-4); }
  .prod-panel__campos { grid-template-columns: 1fr 1fr; }
  .pedido-cuenta__acc .btn { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .btn-carrito span:not(.contador) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .marca img { width: 128px; }
  .datos div { grid-template-columns: 1fr; gap: 2px; }
  .direccion-campos .dos { grid-template-columns: 1fr; }
  .caso dl div { grid-template-columns: 1fr; gap: 2px; }
  .logros { grid-template-columns: 1fr 1fr; }
}
@media (max-height: 760px) {
  .cajon__cab { padding: var(--e-2) var(--e-5); }
  .barra-envio { padding: var(--e-2) var(--e-5); }
  .totales div:not(.totales__total) { font-size: var(--t-ceja); }
}
@media (hover: none) { .producto:hover, .caso:hover, .proy:hover, .filtro:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .revela { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}

/* Envío desde el carrito y «le llega hoy» (Lalamove) */
.envio-carrito { font-size: var(--t-s); margin-top: var(--e-2); }
.envio-carrito ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.envio-carrito li { display: flex; justify-content: space-between; gap: var(--e-2); }
.envio-carrito li small { color: var(--gris); display: block; }
.envio-carrito li b { white-space: nowrap; }
.hoy { margin: var(--e-2) 0 0; font-size: var(--t-s); padding: var(--e-2) var(--e-3); border-radius: 10px; background: var(--crema); border: 1px solid var(--linea); }
.hoy b { color: var(--ambar-texto); }
/* SPEI en «Mi pedido» */
.spei__dato { font-variant-numeric: tabular-nums; letter-spacing: .02em; word-break: break-all; }
.spei__copiar { background: none; border: 0; padding: 4px 0 4px 8px; font: inherit; cursor: pointer; min-height: 32px; }

/* Confianza junto a la tienda y al botón de pagar */
.confianza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-5); margin: 0 0 var(--e-5); padding: var(--e-3) var(--e-4); border: 1px solid var(--linea); border-radius: 14px; background: var(--crema); }
.confianza__cifras { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--t-s); }
.confianza__cifras a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.confianza__cifras a:hover b { text-decoration: underline; }
.confianza__estrellas { color: var(--ambar, #f8b040); letter-spacing: 1px; }
.confianza__cita { margin: 0; font-size: var(--t-s); color: var(--gris); font-style: italic; max-width: 46ch; }
.confianza__cita cite { display: block; font-style: normal; font-weight: 600; color: var(--tinta, inherit); margin-top: 2px; }
.confianza__mini { margin: var(--e-2) 0; font-size: var(--t-xs, .8rem); color: var(--gris); text-align: center; }
.confianza__mini span { color: var(--ambar, #f8b040); }

/* Panel: foto y producto nuevo */
.prod-panel__foto { display: grid; gap: 6px; align-content: start; }
.prod-panel__subir { font-size: var(--t-s); min-height: 40px; padding: 6px 10px; cursor: pointer; text-align: center; }
.nuevo-caja { margin-bottom: var(--e-5); }
.nuevo-caja summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ambar-texto); }
.nuevo-caja textarea { resize: vertical; }

.spei .totales > div:not(.totales__total) { display: block; }
.spei .totales > div:not(.totales__total) dd { text-align: left; margin: 2px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spei__dato { font-size: 1.05em; }