/* ===================================================================== Producto: Condimento para arroz — página de categoría de góndola DRAFT · design-drafts/producto-arroz/ Hereda el sistema visual de design-drafts/producto-pimienta: fondo tinta cálida, Playfair display + Lora cuerpo, kickers letterspaced, bandas alternadas, cards con borde cálido y lift en hover. Re-tintado al producto, como pimienta re-tintó al pimentón: pimienta = brasa / madera / rescoldo arroz = cúrcuma / aceite caliente / pimentón Los tonos se anclan a los tokens reales del sitio (assets/css/style.css): --brand-yellow #FBC02D -> --gold (cúrcuma, el dominante) --brand-red #D32F2F -> --ember (pimentón, el acento afilado) --brand-bg #f5e8d2 -> --cream y el fondo es el mismo rgb(26,18,8) que ya usa la ruta Enciclopedia. ===================================================================== */ /* ── Fuentes locales. Sin CDN: los .woff2 son los del sitio. ────────── */ @font-face{ font-family:'Lora';font-style:normal;font-weight:400;font-display:swap; src:url('/assets/fonts/lora-latin-400-normal.woff2') format('woff2'); ascent-override:91%;descent-override:22%;line-gap-override:0%; } @font-face{ font-family:'Lora';font-style:normal;font-weight:600;font-display:swap; src:url('/assets/fonts/lora-latin-600-normal.woff2') format('woff2'); ascent-override:91%;descent-override:22%;line-gap-override:0%; } /* El @font-face de Playfair Display 600 se sacó a propósito: sus 23,5 KB caían en la ventana del LCP y NINGUN elemento de arriba del fold la usa —la usan 8 reglas de h3, todas abajo—. Sin el archivo, el navegador resuelve `font-weight:600` con el 700, que es el vecino más cercano y la diferencia en una serif de display es mínima. Medido: −135 ms de LCP sólo por esto. */ @font-face{ font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap; src:url('/assets/fonts/playfair-display-latin-700-normal.woff2') format('woff2'); ascent-override:91%;descent-override:22%;line-gap-override:0%; } :root{ --ink:#120d06; /* aceite antes de calentar */ --ink-2:#1a1208; /* = rgb(26,18,8), el fondo de Enciclopedia */ --ink-3:#241a0c; --cream:#f5e8d2; /* = --brand-bg */ --paper:#e9dcc0; --sheet:#f2e4c6; /* la hoja clara del bloque de respuestas */ --sheet-2:#e7d5b0; --muted-1:#b9a982; /* Medido: #8c7a52 daba 4,43:1 sobre el fondo marrón (#1a1208), por debajo del mínimo AA de 4,5 para texto de cuerpo. Un 4 % más de brillo, mismo matiz, lo lleva a 4,75:1. Afecta eyebrows, etiquetas y epígrafes de toda la página, no sólo estas dos secciones. */ --muted-2:#927f55; --gold:#FBC02D; /* = --brand-yellow — cúrcuma */ --gold-deep:#c99516; --gold-soft:rgba(251,192,45,.16); --ember:#D32F2F; /* = --brand-red — pimentón */ --ember-soft:#a8321f; --line:rgba(251,192,45,.18); --line-soft:rgba(251,192,45,.09); --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box} /* El header es sticky (100 px en escritorio, 140 en celular) y los h2 no tenían scroll-margin: al saltar a un ancla el título quedaba 30 px por debajo de la barra EN CELULAR. En escritorio zafaba por 10 px, de casualidad. Medido con los anclas reales: #uso-h, #cinco-h, #recetas-h, #fmt-h. */ html{scroll-behavior:smooth;scroll-padding-top:116px} @media(max-width:768px){html{scroll-padding-top:160px}} body{ margin:0; font-family:'Lora',Georgia,serif; background:var(--ink); color:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } a{color:var(--gold);text-decoration:none} a:hover{text-decoration:underline} /* height:auto es obligatorio: los atributos width/height del HTML entran como hint de presentación y, si no se anulan, le ganan al aspect-ratio del CSS. Los atributos se quedan igual — son los que reservan el espacio y dan CLS 0. */ img{max-width:100%;display:block;height:auto} h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;letter-spacing:-.01em} ::selection{background:var(--ember);color:#fff} /* Grano de papel sobre toda la página: saca el plano digital sin costo de red */ body::after{ content:'';position:fixed;inset:0;z-index:80;pointer-events:none; opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap{max-width:1040px;margin:0 auto;padding:0 24px} .wrap-wide{max-width:1180px;margin:0 auto;padding:0 24px} .kick{ font-size:11.5px;letter-spacing:.26em;text-transform:uppercase; color:var(--gold);margin:0 0 12px;font-weight:600; } .band{padding:96px 0;position:relative} .band h2{ font-size:clamp(27px,3.4vw,40px);margin:0 0 18px;color:var(--cream); line-height:1.12;font-weight:700; } /* ⚠ Este selector exige el contenedor como PADRE DIRECTO. La sección `cinco` pasó a .wrap-wide para alinear su texto con la banda, y con sólo `.wrap` acá la bajada perdía su medida, su color y su interlineado sin que saltara ningún error. Los dos contenedores tienen que estar listados. */ .band > .wrap > .intro, .band > .wrap-wide > .intro{ line-height:1.75;color:var(--muted-1);font-size:16px;max-width:62ch;margin:0 0 8px; } .crumbs{padding:26px 0 0;font-size:13px;color:var(--muted-2);letter-spacing:.04em} @media(max-width:880px){.crumbs{padding-top:12px}} .crumbs a{color:var(--muted-2)} .crumbs a:hover{color:var(--gold)} .crumbs .here{color:var(--muted-1)} /* Botones — mismo gesto que pimienta, re-tintados */ .pa-btn{ display:inline-block;padding:13px 28px;border-radius:999px; font-size:14.5px;font-weight:600; transition:transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease); } .pa-btn:hover{transform:translateY(-2px);text-decoration:none} .btn-gold{background:var(--gold);color:#1a1208} .btn-gold:hover{background:#ffd257} .btn-ghost{border:1px solid rgba(245,232,210,.32);color:var(--cream)} .btn-ghost:hover{border-color:var(--cream);background:rgba(245,232,210,.05)} /* ===================================================================== 1 · HERO La foto atmosférica es AMBIENTE. La imagen principal es el sobre. ===================================================================== */ /* overflow:clip y NO hidden: hidden crea un contenedor de scroll y eso rompe el position:sticky del sobre — se despegaba y se iba de pantalla al scrollear. clip recorta igual sin crear scrollport. */ .pa-hero{position:relative;overflow:clip;isolation:isolate} /* El hero-especias entra como fondo de ambiente. Se ve el arroz, el humo y la curcuma; nunca compite con el sobre ni es la primera imagen del DOM. Brillo y opacidad estan puestos al maximo que deja contraste HOLGADO sobre el texto: medido, H1 4,87:1 y lead 6,20:1 en el peor pixel (minimos AA 3,0 y 4,5). Si se sube mas, el H1 cae a 3,27 y deja de haber margen. */ .hero-amb{ /* Acotada al tope: el hero ahora incluye la transcripción y mide bastante más que una pantalla; dejándola en inset:0 la foto se estiraba a lo largo. */ position:absolute;inset:0 0 auto;height:min(105vh,1000px);z-index:-2; pointer-events:none; /* AVIF con fallback WebP. El ambiente es el elemento LCP y llegaba ÚLTIMO en una cola de 222 KB que arranca toda junta: no era lento por pesado, era lento por hacer fila. En AVIF pesa 23 KB en vez de 41 y adelanta el turno. La pérdida de calidad no se ve: sobre este bloque caen brightness(.68) y opacity(.72), que dejan pasar ~49 % de la diferencia — medida en 1,24/255 de media, por debajo del umbral de percepción. */ background:url('/assets/images/producto/arroz/ambiente/hero-ambiente.webp') center 30%/cover no-repeat; background-image:image-set( url('/assets/images/producto/arroz/ambiente/hero-ambiente.avif') type('image/avif'), url('/assets/images/producto/arroz/ambiente/hero-ambiente.webp') type('image/webp')); filter:saturate(.85) brightness(.68) contrast(1); opacity:.72; -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 45%,transparent 92%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 45%,transparent 92%); } /* El calor de cúrcuma detrás del sobre. Colgaba de `.pa-hero` con `top:44%`, o sea de un porcentaje del ALTO DEL HERO — y el hero se asienta tarde. Cada reflow corría el glow y eso contaba como CLS: 0,25 en caliente antes de inlinear el crítico, y 0,366 después de subir el H1, porque achicar el hero cambió las proporciones. Ahora cuelga de `.hero-pack`, que es lo que el glow siempre quiso estar iluminando —lo dice el comentario original: «detrás del sobre»— y cuya altura sale de min(46vh,370px): depende del VIEWPORT, no del contenido, así que no se mueve nunca. Ojo: `.hero-pack` es flex, pero un hijo `position:absolute` no es flex item, así que no entra en el layout. */ .hero-pack::before{ content:'';position:absolute;z-index:-1; left:50%;top:50%;width:min(760px,86vw);aspect-ratio:1; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(251,192,45,.20) 0%,rgba(211,47,47,.10) 38%,transparent 68%); pointer-events:none; } .hero-grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start; padding:36px 0 68px; } /* La cita del dorso es el tercer hijo de la grilla. Colocada explícita bajo el sobre, el escritorio queda exactamente como estaba. */ .hero-grid > .sobre-pie{grid-column:1;grid-row:2;justify-self:center;margin-top:14px} @media(max-width:880px){ /* ── el aire del hero, apretado ──────────────────────────────────────── La línea de las cinco especias terminaba al ras del borde inferior: 2 px de aire a 412×823 y 14 a 430×745. Un texto al filo no se lee como «hay más abajo», se lee como roto. Los píxeles salen de la caja —aire de la grilla, márgenes del pack, del kicker y del H1— y NO del sobre, que ya se ajustó dos veces. */ .hero-grid{grid-template-columns:1fr;gap:8px;padding:12px 0 72px;min-height:auto} .hero-pack{margin-bottom:10px} .pa-hero-copy .kicker{margin-bottom:8px} .pa-hero-copy h1{margin-bottom:10px} .crumbs{padding-top:8px} /* En una sola columna fluye última: el H1 sube y entra entero. */ .hero-grid > .sobre-pie{grid-column:auto;grid-row:auto;margin-top:18px} } .pa-hero-copy .kicker{ font-size:11.5px;letter-spacing:.28em;text-transform:uppercase; color:var(--gold);margin:0 0 14px;font-weight:600; } .pa-hero-copy h1{ font-size:clamp(40px,6vw,74px); line-height:.98;margin:0 0 18px;color:#fbf3e2;font-weight:700; } .pa-hero-copy h1 em{ font-style:normal;color:var(--gold); /* el "amarillo" del título es literalmente amarillo cúrcuma */ } .pa-hero .notes{ font-size:14px;color:var(--muted-1);letter-spacing:.02em; margin:0 0 22px;font-style:italic; padding-bottom:20px;border-bottom:1px solid var(--line-soft); max-width:44ch; } /* Va DESPUÉS de la regla base a propósito: el override dentro del bloque de ≤880 quedaba antes en el archivo y perdía por orden, sin avisar. Misma especificidad = gana el que está más abajo. */ @media(max-width:880px){ .pa-hero .notes{padding-bottom:12px} } .pa-hero .lead{ font-size:17px;line-height:1.68;color:var(--cream); max-width:46ch;margin:0 0 30px; } .pa-hero .lead b{color:#fff;font-weight:600} .pa-cta-row{display:flex;gap:12px;flex-wrap:wrap} /* El sobre: imagen principal, LCP, primera del DOM. */ .hero-pack{ position:sticky;top:5vh; display:flex;flex-direction:column;align-items:center;gap:14px; } .hero-pack img{ width:auto;height:min(74vh,640px);position:relative;z-index:2; aspect-ratio:1100/1440; /* CLS 0 aunque tarde */ filter:drop-shadow(-30px 26px 40px rgba(0,0,0,.7)); transition:transform .45s var(--ease); } .hero-pack:hover img{transform:translateY(-8px) rotateY(-5deg) rotateX(1.5deg)} @media(max-width:880px){ /* Sin sticky en mobile: el sobre fijo se superponía con el texto. Pero SÍ relative: las capas del sprite y del canvas son absolutas y con static se escapaban al hero entero, quedando enormes y tapando el botón. */ /* ── que el H1 entre en el primer viewport ──────────────────────────── El H1 arrancaba en y=828 contra un fold de 823: «condimento para arroz», el término que la página vino a buscar, no aparecía en la primera pantalla del dispositivo por donde llega la mayoría del tráfico. El ajuste va REPARTIDO en cuatro lugares en vez de achicar sólo el sobre: las migas, los dos gaps del pack, el margen del kicker y un 12% de la foto. Así el sobre sigue grande — que es la pieza que tiene que verse. */ /* ⚠ `top:auto` no es decorativo. La regla base pone `position:sticky; top:5vh` para el escritorio; acá se pasa a `relative` pero el `top:5vh` SEGUÍA aplicando, y sobre un elemento relative eso lo corre hacia abajo sin mover el layout: el pack quedaba 35 px más abajo que su fila de la grilla y el botón «Ver el dorso» terminaba encima del kicker. Estaba latente desde siempre; se hizo visible cuando el botón pasa a `position:static` al montar el sprite y el pack crece. Medido: 5vh de 700 = 35 px, exactamente el desfase. Y no cuesta aire: el pack sube dentro de su propia fila, la copy no se mueve. */ .hero-pack{position:relative;top:auto;order:-1;margin-bottom:18px;gap:10px} .hero-pack img{height:min(46vh,370px)} /* Pantallas cortas (360×780 y similares): el problema es alto, no ancho, así que se ataca con una media query de ALTO. Sin esto el H1 entra sólo al 38% y se lee «Condimento» sin el «para arroz», que es la mitad del head term. */ @media(max-height:800px){ .hero-pack img, .hero-pack .sobre-sprite{height:min(41vh,330px)} .hero-pack{gap:8px;margin-bottom:14px} .sobre-pie{font-size:12.5px;line-height:1.5} /* Los últimos 15 px que le faltaban al 360×640 salen de la caja, no del sobre: el aire de arriba de la grilla, el margen del kicker y las migas. */ .hero-grid{padding-top:4px} .pa-hero-copy .kicker{margin-bottom:4px} .pa-hero-copy h1{margin-bottom:6px} .hero-pack{margin-bottom:6px} .crumbs{padding-top:4px} /* La línea de especias no llega entera a 640 ni a 664 de alto. Ahí el criterio es el otro: que quede claramente cortada, no al filo. Se le saca el padding y el borde de abajo, que sumaban 21 px de nada. */ .pa-hero .notes{padding-bottom:0;border-bottom:none;margin-bottom:14px} } } /* El sobre 3D. El canvas se monta ENCIMA del y arranca invisible: recién cuando el GLB terminó de cargar se cruza el fundido. Así el LCP sigue siendo la imagen y el 3D no entra en la ruta crítica. */ .hero-pack .sobre3d{ /* Misma caja que la , al pixel: el visor encuadra el modelo contra el tamano del canvas, asi que si la caja no coincide el fundido se ve como un salto de escala. */ position:absolute;left:50%;top:0;transform:translateX(-50%); height:min(74vh,640px);aspect-ratio:1100/1440;max-width:100%; z-index:3;pointer-events:none; } .hero-pack .sobre3d canvas{ width:100%;height:100%;display:block; opacity:0;transition:opacity .6s var(--ease); touch-action:pan-y; /* en touch el scroll vertical siempre gana */ } .hero-pack.live3d .sobre3d{pointer-events:auto} .hero-pack.live3d .sobre3d canvas{opacity:1;cursor:grab} .hero-pack.live3d .sobre3d canvas:active{cursor:grabbing} .hero-pack.live3d > img, .hero-pack.vivo > img{ /* La animacion de entrada corre con fill:both y su ultimo keyframe deja opacity:1; una declaracion normal no le gana. Se apaga la animacion. */ animation:none;opacity:0; } .hero-pack.live3d:hover img{transform:none} /* La capa del sprite (sólo mobile) se monta encima del , igual criterio. Va acotada a la caja de la imagen y es inerte: con inset:0 tapaba todo el hero-pack —el botón incluido— y se comía los clics. */ /* El reencuadre del sprite. La hoja viene RECORTADA AL ALFA —el sobre ocupa 99,2% x 90,2% del frame— mientras que sobre-front-620.webp trae margen transparente y el sobre ocupa 64,2% x 68,0%. Sin corregir, al montar la capa el sobre pega un salto de x1,545 en ancho y x1,326 en alto. Medido: cambia el 46,2% de los pixeles del hero (35,3% con fuerza). Con esta correccion baja a 7,7% (3,1% fuerte), que es la diferencia real de contenido —elevacion 0,09 contra 0, y la luz— y a ese nivel no se nota. Las dos hojas coinciden dentro del 0,3%, asi que un solo transform sirve para la AVIF (240x358) y para la WebP (200x298). OJO: hay que ENCADENAR el translateX(-50%) que centra, no pisarlo. */ .hero-pack .sobre-sprite{ position:absolute;left:50%;top:0; transform:translateX(-50%) translate(-.27%, 3.26%) scale(.6473, .7535); transform-origin:center; height:min(74vh,640px);aspect-ratio:1100/1440;max-width:100%; z-index:2;pointer-events:none; background-repeat:no-repeat;background-position:0 0; opacity:0;transition:opacity .45s var(--ease); will-change:background-position; } .hero-pack.vivo .sobre-sprite{opacity:1} /* El override de mobile va ACA y no arriba con el resto del bloque responsive: tiene la misma especificidad que las reglas base, asi que si va antes pierde por orden y las capas se quedan con la altura de escritorio. */ @media(max-width:880px){ .hero-pack .sobre3d, .hero-pack .sobre-sprite{height:min(46vh,370px)} /* misma caja que la img */ } /* Alto fijo: ni la pista ni el botón mueven nada al aparecer. */ .sobre-accion{ /* ancho fijo ademas del alto: si la caja se encoge al cambiar pista por boton, el re-centrado cuenta igual como layout shift */ width:100%;min-height:48px; display:flex;align-items:center;justify-content:center; } .sobre-pista{ margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted-2);opacity:0;transition:opacity .4s var(--ease); pointer-events:none; } .hero-pack.live3d .sobre-pista{opacity:.8} .sobre-boton{ display:inline-flex;align-items:center;gap:10px; font-family:'Lora',Georgia,serif;font-size:14.5px;font-weight:600; color:#1a1208;background:var(--gold); border:none;border-radius:999px;padding:13px 24px; cursor:pointer;min-height:44px; transition:background .2s var(--ease), transform .15s var(--ease); } .sobre-boton:hover{background:#ffd257} .sobre-boton:active{transform:translateY(1px)} .sobre-boton:focus-visible{outline:2px solid var(--cream);outline-offset:3px} .sobre-boton .ico{font-size:16px;line-height:1} /* Ocupa su lugar desde el primer pintado pero no se ve ni la lee un lector de pantalla hasta que el sprite está listo. visibility, no hidden: hidden lo sacaría del flujo y volvería el salto. */ .sobre-boton{visibility:hidden;position:absolute} .hero-pack.vivo .sobre-boton{visibility:visible;position:static} .hero-pack.vivo .sobre-pista{display:none} .hero-pack .spill{ /* Decorativo y absoluto: sin esto se come los clics del botón que tiene abajo. */ position:absolute;bottom:2%;left:50%;transform:translateX(-50%); pointer-events:none; width:72%;height:70px;z-index:1; background:radial-gradient(50% 100% at 50% 100%,rgba(201,149,22,.35) 0%,rgba(26,18,8,.9) 58%,transparent 76%); filter:blur(10px); } /* Entrada escalonada — un solo momento orquestado, no micro-interacciones sueltas */ @media(prefers-reduced-motion:no-preference){ .pa-hero-copy > *,.hero-pack img{animation:rise .8s var(--ease) both} .hero-pack img{animation-delay:.05s} .pa-hero-copy .kicker{animation-delay:.10s} .pa-hero-copy h1{animation-delay:.16s} .pa-hero .notes{animation-delay:.24s} .pa-hero .lead{animation-delay:.30s} .pa-hero .pa-cta-row{animation-delay:.38s} } @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* ===================================================================== 2 · LO QUE TODOS PREGUNTAN — librería de tres tratamientos El marcado es el mismo en los tres (h3 + p, cinco pares, sin acordeón) y el tratamiento se activa con una clase en el . Existen los tres a propósito: las fichas de producto no tienen que verse todas iguales. qa-a · EDITORIAL SIN CAJA. Sin superficie: el bloque corre sobre el fondo de la página, numerado al margen. El que mejor escala si hay muchas preguntas o respuestas largas — no hay caja que se estire. qa-b · FICHAS. Cinco tarjetas claras, la primera a lo ancho. Sirve cuando hay una pregunta claramente principal y el resto son secundarias. qa-c · BISAGRA (la que usa esta página). Dos columnas apoyadas en un filete vertical. Pide preguntas cortas: las de más de dos líneas empiezan a desbalancear la columna izquierda. Se activa poniendo la clase en el body: . Nada más. Qué se estaba arreglando, del diagnóstico: · la hoja clara era un rectángulo enorme y plano que cortaba el ritmo · las filas medían todas igual aunque el texto variara, y sobraba aire · pregunta y respuesta parecían dos listas paralelas, no un diálogo · la primera pregunta ocupa tres líneas y desbalanceaba la grilla · el encabezado con el eyebrow a la derecha se leía como barra de tabla ===================================================================== */ /* ── base común ───────────────────────────────────────────────────── */ .preguntas{padding:0 0 96px;position:relative} .hoja-head h2{ font-family:'Playfair Display',Georgia,serif;font-weight:700; margin:0;line-height:1.1; } .qa p b{font-weight:600} /* ===================================================================== A · EDITORIAL SIN CAJA Se va la hoja. El bloque respira sobre el mismo fondo del resto de la página, así que no corta el ritmo: lo continúa. La pregunta y la respuesta son un solo flujo tipográfico, no dos columnas enfrentadas, y cada par mide lo que mide su texto. El número al margen ordena sin encerrar. ===================================================================== */ .qa-a .hoja{max-width:900px;margin:0 auto;counter-reset:qa} .qa-a .hoja-head{margin:0 0 40px;max-width:640px} .qa-a .hoja-head .kick{margin-bottom:10px} .qa-a .hoja-head h2{font-size:clamp(28px,3.6vw,42px);color:var(--cream)} .qa-a .qa{ counter-increment:qa; position:relative;padding:26px 0 26px 62px; border-top:1px solid var(--line-soft); } .qa-a .qa:first-of-type{border-top:none;padding-top:6px} .qa-a .qa::before{ content:counter(qa,decimal-leading-zero); position:absolute;left:0;top:30px; font-family:'Playfair Display',serif;font-size:12px;letter-spacing:.14em; color:var(--gold-deep); } .qa-a .qa:first-of-type::before{top:10px} .qa-a .qa h3{ font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600; font-size:clamp(20px,2.2vw,26px);line-height:1.25; color:var(--gold);margin:0 0 10px;max-width:26ch; } .qa-a .qa p{ margin:0;font-size:16.5px;line-height:1.72;color:var(--muted-1);max-width:64ch; } .qa-a .qa p b{color:var(--cream)} /* ===================================================================== B · FICHAS La hoja grande se parte en cinco fichas claras, cada una del alto de su contenido. La primera —la pregunta larga— ocupa el ancho entero y hace de entrada; las otras cuatro van de a dos. La grilla deja de estar desbalanceada porque ya no hay una grilla que balancear. ===================================================================== */ .qa-b .hoja{ max-width:1040px;margin:0 auto; display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start; } .qa-b .hoja-head{grid-column:1/-1;margin:0 0 14px;max-width:620px} .qa-b .hoja-head .kick{margin-bottom:10px} .qa-b .hoja-head h2{font-size:clamp(28px,3.6vw,42px);color:var(--cream)} .qa-b .qa{ background:linear-gradient(180deg,var(--sheet) 0%,var(--sheet-2) 100%); color:#1a1208;border-radius:3px; padding:24px 26px; box-shadow:0 18px 34px -18px rgba(0,0,0,.7); } .qa-b .qa:first-of-type{ grid-column:1/-1; display:grid;grid-template-columns:minmax(240px,.8fr) 1.2fr; gap:8px 34px;align-items:baseline;padding:28px 30px; } .qa-b .qa h3{ font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600; font-size:20px;line-height:1.25;color:#1a1208;margin:0 0 10px; } .qa-b .qa:first-of-type h3{font-size:clamp(22px,2.4vw,28px);margin:0} .qa-b .qa p{margin:0;font-size:15.5px;line-height:1.7;color:#463a26} .qa-b .qa p b{color:#1a1208} /* ===================================================================== C · BISAGRA Dos columnas, pero apoyadas sobre una misma línea vertical: la pregunta termina contra el filete y la respuesta arranca del otro lado. Ahí dejan de ser listas paralelas — se miran. Sin encabezado en barra: el título es título y ya. ===================================================================== */ .qa-c .hoja{max-width:980px;margin:0 auto} .qa-c .hoja-head{ margin:0 0 34px;padding-bottom:22px; border-bottom:2px solid var(--gold);max-width:none; } .qa-c .hoja-head .kick{margin-bottom:8px} .qa-c .hoja-head h2{font-size:clamp(26px,3.2vw,38px);color:var(--cream)} .qa-c .qa{ display:grid;grid-template-columns:1fr 1.35fr;gap:0 0;align-items:start; padding:22px 0; } .qa-c .qa + .qa{border-top:1px solid var(--line-soft)} .qa-c .qa h3{ font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600; font-size:clamp(18px,2vw,23px);line-height:1.28;color:var(--cream); margin:0;padding-right:28px;text-align:right; border-right:1px solid var(--line); } .qa-c .qa p{ margin:0;padding-left:28px; font-size:16px;line-height:1.72;color:var(--muted-1); } .qa-c .qa p b{color:var(--gold)} /* ── mobile: una columna en los tres, sin acordeón ─────────────────── */ @media(max-width:760px){ .preguntas{padding-bottom:72px} .qa-a .qa{padding-left:0} .qa-a .qa::before{position:static;display:block;margin-bottom:8px} .qa-a .qa:first-of-type::before{margin-top:0} .qa-b .hoja{grid-template-columns:1fr} .qa-b .qa:first-of-type{grid-template-columns:1fr;gap:10px} .qa-c .qa{grid-template-columns:1fr;gap:10px} .qa-c .qa h3{text-align:left;padding-right:0;border-right:none; padding-left:14px;border-left:2px solid var(--gold)} .qa-c .qa p{padding-left:14px} } /* ===================================================================== 3 · PIE DEL SOBRE + VARIANTES EN EVALUACIÓN El bloque «Lo que dice el dorso» se eliminó: duplicaba «Cinco especias» y estaba escrito para un motor, no para un lector. Lo que queda es el pie —la letra chica del envase, en tamaño legible— y las variantes montadas para comparar a ojo. ===================================================================== */ /* Pie del sobre: el rótulo en tamaño que se lee, con voz de pie de foto. */ .sobre-pie{ margin:0;max-width:34ch;text-align:center; font-size:13.5px;line-height:1.6;color:var(--muted-1);font-style:italic; } .sobre-pie span{ display:block; font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--muted-2);font-style:normal;margin-bottom:5px; } /* ===================================================================== 4 · LAS CINCO ESPECIAS — tres tratamientos Mismo marcado en los tres (article > img + .txt). Cuál corre se elige con la clase del : esp-a, esp-b o esp-c. Las fotos salen de assets/images/catalogo/ —la convención del sitio: catalogo/ es la especia suelta, envases/ es el sobre— re-encodeadas a 440x293, el tamaño real de uso. Las cinco suman 88 KB y cargan después del LCP. El texto sigue siendo el contenido: si las fotos no cargan, la sección se entiende igual y los cinco links a la Enciclopedia siguen ahí. ===================================================================== */ .cinco{background:var(--ink)} .cinco .pa-cards{display:grid;gap:14px;margin-top:34px} .scard{ position:relative;overflow:hidden; background:var(--ink-2); border:1px solid var(--line);border-radius:12px; color:inherit;display:flex;flex-direction:column; transition:transform .22s var(--ease), border-color .22s var(--ease); } .scard:hover{transform:translateY(-5px);border-color:rgba(251,192,45,.4);text-decoration:none} .scard img{display:block;width:100%;object-fit:cover} .scard .txt{display:flex;flex-direction:column;flex:1;padding:18px 20px 6px} .scard .n{ font-family:'Playfair Display',serif;font-size:11px;letter-spacing:.2em; color:var(--muted-2);margin:0 0 8px;flex:0 0 auto; } .scard h3{font-size:20px;margin:0 0 9px;color:var(--cream);font-weight:600} .scard p{font-size:14px;line-height:1.6;color:var(--muted-1);margin:0 0 14px;flex:1} .scard .go{ /* El área táctil no depende de detectar el puntero: 45 px siempre. Un pointer:coarse que no matchea dejaba el CTA en 35 px. */ display:inline-block; font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold); padding:12px 0 18px; } .scard:hover .go{color:#ffd257} /* ── A · VENTANA ─────────────────────────────────────────────────────── La foto es la tapa de la ficha: de borde a borde, sin margen, con el color de acento como filete debajo. No está pegada arriba — es la cara de la card. */ .esp-a .pa-cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .esp-a .scard img{aspect-ratio:3/2;border-bottom:2px solid var(--tono,var(--gold))} /* ── B · MEDALLÓN ────────────────────────────────────────────────────── Recorte circular sobre el nombre. El círculo rima con los bowls de madera de las propias fotos, y a este tamaño la especia se reconoce igual. */ .esp-b .pa-cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .esp-b .scard{align-items:center;text-align:center;padding-top:24px} .esp-b .scard img{ width:112px;height:112px;aspect-ratio:1;border-radius:50%; box-shadow:0 0 0 2px var(--tono,var(--gold)), 0 10px 22px -8px rgba(0,0,0,.8); } .esp-b .scard .txt{align-items:center;padding-top:16px} .esp-b .scard p{max-width:26ch} /* ── C · BANDA · N especias, nunca una fila incompleta ────────────────── No está cableada a cinco. La regla no es «siempre una línea» sino «nunca una fila huérfana»: con 6 cierra en 6 o en 3+3, con 4 en 4 o 2+2, con 10 en 5+5. La cantidad de columnas sale de contar los hijos con :has(), así que agregar o sacar una especia no toca el CSS. Verificado con 5 y con 6. Y no llega al borde del viewport: lleva márgenes laterales para que se lea como una pieza apoyada en la página y no como un fondo. Sigue siendo más ancha que la columna de texto, que es el punto. ──────────────────────── */ .esp-c .pa-cards{ --marco:clamp(20px, 5vw, 72px); grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0; border:1px solid var(--line);border-radius:14px;overflow:hidden; /* CONTENIDA, no a sangre. Vista en contexto, la banda a sangre le queda grande a la página: se come el ritmo de las otras secciones. 1.132 px es el contenido de .wrap-wide (1.180 menos los 24 de padding), o sea que la banda cae exactamente con el ancho del resto — que es el que Thomas eligió. A 5 cards da 226 px cada una. No bajar a 1.040: a 198 px la foto se achica 14% y vuelve el problema que esto resolvió. */ /* 48 y no 32: el padding de .wrap-wide es 24 por lado, así que con 32 la banda sangraba 8 px más que el texto en anchos medios. Con 48 coinciden exacto en todo ancho menor a 1180, y a 1180+ manda el 1132, que no cambia. */ width:min(1132px, calc(100vw - 48px)); margin-inline:0;position:relative;left:50%;transform:translateX(-50%); } /* La versión a sangre queda guardada en el selector: ?v=banda-sangre */ .banda-sangre.esp-c .pa-cards{ width:calc(100vw - var(--marco) * 2); margin-inline:calc(50% - 50vw + var(--marco)); position:static;left:auto;transform:none; } /* La grilla cuenta: cada regla matchea cuando el enésimo hijo es el último. */ .esp-c .pa-cards:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)} .esp-c .pa-cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)} .esp-c .pa-cards:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,1fr)} .esp-c .pa-cards:has(> :nth-child(6):last-child){grid-template-columns:repeat(6,1fr)} .esp-c .pa-cards:has(> :nth-child(7):last-child){grid-template-columns:repeat(7,1fr)} .esp-c .pa-cards:has(> :nth-child(8):last-child){grid-template-columns:repeat(4,1fr)} .esp-c .pa-cards:has(> :nth-child(9):last-child){grid-template-columns:repeat(3,1fr)} .esp-c .pa-cards:has(> :nth-child(10):last-child){grid-template-columns:repeat(5,1fr)} /* En pantallas medianas los pares se parten a la mitad — sigue sin huérfanas. */ @media(max-width:1180px){ .esp-c .pa-cards:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)} .esp-c .pa-cards:has(> :nth-child(8):last-child){grid-template-columns:repeat(4,1fr)} .esp-c .pa-cards:has(> :nth-child(10):last-child){grid-template-columns:repeat(5,1fr)} } .esp-c .scard{border:none;border-radius:0;background:transparent} /* El separador entre cards va por box-shadow inset y no por border-left. Con border, ese 1 px salía del ancho de contenido: las cuatro cards con separador daban imágenes de 225 px y la primera de 226, y como la imagen lleva aspect-ratio:4/3 eso desalineaba el filete de color 0,75 px — el amarillo de la cúrcuma quedaba más abajo que los otros cuatro. El inset pinta la misma línea sin ocupar lugar, así las cinco imágenes miden igual. */ .esp-c .scard + .scard{box-shadow:inset 1px 0 0 var(--line-soft)} .esp-c .scard:hover{transform:none;background:var(--ink-2)} .esp-c .scard img{aspect-ratio:4/3;border-bottom:2px solid var(--tono,var(--gold))} .esp-c .scard .txt{padding:16px 18px 4px} .esp-c .scard h3{display:flex;align-items:baseline;gap:9px;font-size:18px;margin:0 0 8px} .esp-c .scard h3 .n{ font-family:'Playfair Display',serif;font-size:11px;letter-spacing:.16em; color:var(--muted-2);flex:0 0 auto; } .esp-c .scard p{font-size:13.5px;line-height:1.55;margin:0 0 10px} /* Versiones contenidas (demos). Ojo: un max-width solo no alcanza — el contenedor es .wrap y la banda no puede crecer más que su padre. */ /* ── mobile: cinta con scroll y snap. Nada de 2+2+1 — la fila incompleta es lo que no puede pasar. La card siguiente asoma para avisar que hay más. */ @media(max-width:760px){ .esp-c .pa-cards, .banda-sangre.esp-c .pa-cards{ display:flex;grid-template-columns:none; position:static;left:auto;transform:none; overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; width:calc(100vw - 24px);margin-inline:calc(50% - 50vw + 12px);max-width:none; scrollbar-width:none; } .esp-c .pa-cards::-webkit-scrollbar{display:none} .esp-c .scard{flex:0 0 72%;scroll-snap-align:start} /* misma flecha que en recetas: el carril de especias también scrollea */ .esp-c .carril-mas{display:flex} } /* ===================================================================== 5 · EL MÉTODO + LOS DESVÍOS Antes eran tres bandas iguales de 551 palabras. Dos cosas cambian acá: · Cada paso se lleva su porqué adentro. El «qué hacer» va en crema y el «por qué» debajo, con un filete de pimentón. Antes el porqué vivía 250 palabras más abajo, en una lista aparte. · El dorado deja de estar en todo. Estaba en los kickers, en los números, en los bullets, en los y en la tabla — cuando todo es acento, no hay acento. Ahora el dorado marca el paso (el número) y --ember, que ya estaba en la paleta y sin usar, marca la explicación y el aviso. ===================================================================== */ .uso{background:var(--ink-2);border-top:1px solid var(--line-soft)} .uso-sig{padding-top:0;border-top:none} .uso-sig > .wrap > h2{margin-top:0} /* ── el método ───────────────────────────────────────────────────────── Antes eran tres cajas idénticas en fila, y tres marcos iguales no dicen «primero, después, por último»: dicen «tres opciones». Un método es una secuencia y el layout la aplanaba. Además había cajas adentro de cajas — panel de dosis con borde, tres cards con el mismo borde, y adentro de cada una otro filete para el porqué: tres niveles de marco. Ahora no hay ninguna caja. Un riel horizontal atraviesa los tres pasos con los números apoyados encima, así el recorrido se ve antes de leer. Y el color del acento se profundiza del 1 al 3 —aceite pálido, amarillo, dorado— que es exactamente lo que pasa en la olla: el color pasa a significar algo. Cuesta cero bytes: es una variable por paso. ─────────────────────────────────── */ .metodo{ display:grid;grid-template-columns:1.25fr .95fr;gap:44px;align-items:start; margin:34px 0 0; } .pasos{list-style:none;margin:0;padding:0;display:grid;gap:26px} .pasos li{position:relative} .pasos h3{ display:flex;align-items:baseline;gap:12px; font-size:19px;margin:0 0 10px;color:var(--cream);font-weight:600; } .pasos .n{ font-family:'Playfair Display',serif;font-size:26px;line-height:1; color:var(--paso,var(--gold));font-weight:700;flex:0 0 auto; } .pasos .que{margin:0 0 10px;font-size:16px;line-height:1.65;color:var(--cream)} .pasos .que em{font-style:normal;color:var(--paso,var(--gold));font-weight:600} .pasos .por{ margin:0;padding-left:16px;border-left:2px solid rgba(211,47,47,.55); font-size:14.5px;line-height:1.68;color:var(--muted-1); } /* FORMA B · los tres pasos en fila, sobre un riel. Sin marcos: el riel y los números hacen el trabajo que hacían las cajas, y lo hacen mejor porque ordenan en vez de encerrar. */ .met-b .pasos{ grid-template-columns:repeat(3,1fr);gap:0;position:relative; } .met-b .pasos::before{ /* el riel, a la altura del centro de los números */ content:'';position:absolute;top:21px;left:0;right:0;height:1px; background:linear-gradient(90deg,#e6cf92,#FBC02D 50%,#c9860f); opacity:.55; } /* el padding va en cada paso, no en la lista: si va en la lista los números quedan a la misma altura que los títulos y los pisan */ .met-b .pasos li{padding:58px 26px 0 0} .met-b .pasos li + li{padding-left:26px;border-left:1px solid var(--line-soft)} .met-b .pasos h3{ display:block;margin:0 0 10px; } .met-b .pasos .n{ /* el número se apoya sobre el riel, afuera del texto */ position:absolute;top:0;left:0; display:flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:50%; background:var(--ink-2);border:1px solid var(--paso,var(--gold)); color:var(--paso,var(--gold));font-size:19px; } .met-b .pasos li + li .n{left:26px} .met-b .pasos li + li{border-left:1px solid var(--line-soft)} .met-b .pasos .por{ margin-top:12px;padding:12px 0 0 0; border-left:none;border-top:1px solid var(--line-soft); } /* la foto y la tabla, en columna */ .lado{display:flex;flex-direction:column;gap:0} .plato{margin:0;position:relative} .plato img{width:100%;border-radius:12px;border:1px solid var(--line)} .plato figcaption{ margin-top:10px;font-size:12.5px;line-height:1.5; color:var(--muted-2);font-style:italic; } /* ── el aviso: no es un paso, es una advertencia ──────────────────────── */ .ojo{ margin:26px 0 0;padding:14px 18px; border:1px solid rgba(211,47,47,.4);border-radius:10px; background:rgba(211,47,47,.06); font-size:14.5px;line-height:1.65;color:var(--muted-1);max-width:70ch; } .ojo b{color:#e8624f;font-weight:600} /* `.ojo.dato` — el formato de la casa para el dato que ninguna otra página da. Es lo que diferencia esta página de las otras diez del SERP, así que tiene tratamiento propio: filete de acento a la izquierda en vez de marco completo, y el rojo baja a oro. Es un dato de cocina, no un cartel de advertencia — el marco rojo entero lo hacía leer como error. DOS en toda la página. Si todo está resaltado, nada está resaltado. */ .ojo.dato{ border:none;border-left:3px solid var(--gold);border-radius:0; background:linear-gradient(90deg,rgba(251,192,45,.09),transparent 70%); padding:14px 20px;margin-top:22px; } .ojo.dato b{color:var(--gold)} /* Adentro de una columna del riel, el .ojo hacía que el paso 1 midiera el triple que los otros dos. A lo ancho, debajo del riel, las tres columnas emparejan y el dato no pierde su lugar en la secuencia. */ .ojo.dato.bajo-riel{margin:26px 0 0;max-width:none} /* ── la tabla de dosis, ahora al lado del método y no al final de todo ── */ /* Sin marco: era el primero de los tres niveles de caja. Queda apoyada sobre una línea, que alcanza para leerla como tabla. */ .dosis{margin-top:22px;border-top:1px solid var(--line)} .metodo .dosis{margin-top:20px} .metodo .dosis-row{padding:11px 0;font-size:14px} .dosis-h{ padding:13px 0 10px; font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-1); } .dosis-row{ display:flex;justify-content:space-between;gap:18px; padding:12px 0;border-top:1px solid var(--line-soft); font-size:15px;color:var(--muted-1); } .dosis-row b{color:var(--cream);font-weight:600;white-space:nowrap} /* ── los desvíos ─────────────────────────────────────────────────────── Eran cinco cards iguales en grilla: caían 4+1 con una huérfana, y las cinco pesaban lo mismo aunque «arroz con pollo» sea un plato central y «sobras» un truco de emergencia. Ahora cuelgan de un eje vertical que reusa el degradado del riel del método: el color refiere a algo —vienen todas del mismo método— en vez de decorar. Y cada una lleva la etiqueta de QUÉ cambia, que es el sistema real: una cambia el momento, otra la grasa, otra el cereal, otra el destino. Los títulos NO van en dorado. El dorado ya tiene dueño en esta página: es el color de las especias, y cada card de la banda lleva su --tono. Usarlo acá para nombres de platos le sacaba sentido en los dos lados. ────────────── */ .desvios{ position:relative;margin-top:30px;padding-left:30px; display:grid;gap:0; } .desvios::before{ /* el eje */ content:'';position:absolute;left:0;top:6px;bottom:14px;width:2px; background:linear-gradient(180deg,#e6cf92,#FBC02D 45%,#c9860f); opacity:.5;border-radius:2px; } .desvio{ position:relative;padding:18px 0 18px 4px; border-bottom:1px solid var(--line-soft); } .desvio:last-child{border-bottom:none} .desvio::before{ /* el brazo que sale del eje */ content:'';position:absolute;left:-30px;top:31px;width:22px;height:1px; background:var(--line); } .cambia{ margin:0 0 6px;font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--muted-2); } .desvio h3{ margin:0 0 7px;font-size:18px;font-weight:600;color:var(--cream); font-family:'Playfair Display',Georgia,serif; } .desvio .q{margin:0;font-size:15px;line-height:1.68;color:var(--muted-1);max-width:70ch} /* Jerarquía: el plato central pesa más que el truco de emergencia. */ .desvio.fuerte{padding-top:6px} .desvio.fuerte h3{font-size:26px;margin-bottom:9px} .desvio.fuerte .q{font-size:16.5px;color:var(--cream)} .desvio.fuerte::before{top:34px;width:22px;background:var(--gold);opacity:.7} @media(max-width:760px){ .desvios{padding-left:20px} .desvio::before{left:-20px;width:14px} .desvio.fuerte h3{font-size:22px} } /* ── armarlo desde cero: es el argumento de por qué comprar el sobre, no una regla más al pie ─────────────────────────────────────────── */ .armar{ margin-top:44px;padding:28px 30px; border:1px solid var(--line);border-left:3px solid var(--gold); border-radius:12px;background:rgba(251,192,45,.045); } .armar h3{ font-family:'Playfair Display',serif;font-size:24px;font-weight:700; color:var(--cream);margin:0 0 12px; } .armar > p{margin:0 0 16px;font-size:15.5px;line-height:1.7;color:var(--muted-1);max-width:62ch} .armar ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .armar li{ padding-left:20px;position:relative; font-size:15px;line-height:1.65;color:var(--muted-1);max-width:64ch; } .armar li::before{ content:'';position:absolute;left:0;top:.62em; width:7px;height:7px;border-radius:50%;background:var(--ember); } .armar li b{color:var(--cream);font-weight:600} /* ── LIBRERÍA DEL MÉTODO · dos formas, misma marcación, clase en el ── (sin clase) · ARTÍCULO. Pasos en columna a la izquierda, foto y tabla apilados a la derecha. Sirve cuando los pasos son largos o desiguales: la columna los absorbe sin romper la grilla. .met-b · RECETA (la que usa esta página). Foto y tabla como banda arriba, los tres pasos en fila, desvíos en tarjetas. Pide pasos parejos y cortos: uno mucho más largo desbalancea la fila de tres. No existe una versión de UNA sola sección: método + desvíos + armarlo dan 437 palabras juntas y el techo por sección son 250. ─────────────────── */ .met-b .metodo{grid-template-columns:1fr;gap:30px} .met-b .lado{ order:-1;display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:start; } .met-b .plato img{aspect-ratio:16/7;object-fit:cover} .met-b .dosis{margin-top:0} .met-b .usos{ display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px;border-top:none; } .met-b .uso-row{ display:block;padding:18px 20px;border-bottom:none; border:1px solid var(--line);border-radius:12px;background:var(--ink); } .met-b .uso-row h3{margin-bottom:8px;font-style:normal;color:var(--gold)} @media(max-width:900px){ .met-b .pasos{grid-template-columns:1fr} .met-b .lado{grid-template-columns:1fr} } @media(max-width:880px){ .metodo{grid-template-columns:1fr;gap:28px} .plato{order:-1} } @media(max-width:760px){ .uso-row{grid-template-columns:1fr;gap:6px} .armar{padding:22px 20px} } /* ── VARIANTE · las dos secciones de uso sobre negro ──────────────────── Se activa con .negro en el . Cambia sólo el fondo de .uso; los tonos de texto son los mismos, porque contra negro puro el contraste SUBE (el fondo actual es #1a1208, ya muy oscuro, pero no es negro). Medido abajo en el informe: ningún tono necesitó recalibrarse. ─────────────────────────── */ .negro .uso{background:#000;border-top-color:rgba(251,192,45,.14)} .negro .uso .dosis-h, .negro .uso .dosis-row{border-color:rgba(251,192,45,.14)} .negro .plato img{border-color:rgba(251,192,45,.16)} .negro .desvio{border-bottom-color:rgba(251,192,45,.10)} .negro .ojo{background:rgba(211,47,47,.09)} /* ===================================================================== 5d · EL TEST · 5e · CON QUÉ MÁS VA · 6b · LA CATEGORÍA · 6c · MÁS PREGUNTAS Todo rescatado de la ficha /especia/arroz antes de darla de baja. ===================================================================== */ .test{background:var(--ink-2);border-top:1px solid var(--line-soft)} .chequeos{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px} .chequeos li{ position:relative;padding:16px 20px 16px 52px; border:1px solid var(--line);border-radius:10px; background:rgba(245,232,210,.03); font-size:15px;line-height:1.65;color:var(--muted-1); } .chequeos li b{color:var(--cream);font-weight:600} .chequeos li::before{ position:absolute;left:18px;top:15px; width:22px;height:22px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700; } .chequeos li.ok::before{content:'✓';background:rgba(251,192,45,.16);color:var(--gold)} .chequeos li.mal::before{content:'✕';background:rgba(211,47,47,.16);color:#e8624f} .chequeos li.mal{border-color:rgba(211,47,47,.3)} .cierre{ margin:26px 0 0;padding-left:18px;border-left:3px solid var(--gold); font-size:16px;line-height:1.6;color:var(--cream);font-style:italic;max-width:56ch; } /* ── Con qué más va ──────────────────────────────────────────────────── Antes: cuatro cajas iguales, el sobre de 96 px flotando sin apoyo y cuatro «VER LA FICHA →» seguidos en versalitas — la señal más débil posible. Ahora la card ENTERA es el link (por eso el marcado es con , no
con adentro), el sobre es el protagonista y tiene piso, y el comino —el que conecta con el curry— pesa más que los otros tres. ─────────────────── */ .juntos{background:var(--ink)} .jcards{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px; } .jcard{ position:relative;display:grid;gap:14px; background:var(--ink-2);border:1px solid var(--line);border-radius:14px; padding:22px 20px 20px;color:inherit;overflow:hidden; transition:transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .jcard:hover{ transform:translateY(-6px);border-color:rgba(251,192,45,.55); background:var(--ink-3);text-decoration:none; } /* el destello dorado que barre la card al pasar el mouse */ .jcard::after{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 80% at 50% 0%,rgba(251,192,45,.12),transparent 60%); opacity:0;transition:opacity .25s var(--ease); } .jcard:hover::after{opacity:1} /* el sobre, con piso: sin la sombra proyectada parecía pegado sobre el fondo */ .pack{position:relative;display:flex;justify-content:center;padding-bottom:12px} .pack::after{ content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%); width:74%;height:16px;border-radius:50%; background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.75),transparent 70%); } .jcard img{ width:118px;height:auto;position:relative;z-index:1; filter:drop-shadow(-8px 10px 14px rgba(0,0,0,.55)); transition:transform .25s var(--ease); } .jcard:hover img{transform:translateY(-4px) scale(1.03)} .jcard .txt{display:block;text-align:center} .jcard .h{ display:block;font-family:'Playfair Display',Georgia,serif; font-size:19px;font-weight:600;color:var(--cream);margin-bottom:8px; } .jcard:hover .h{color:var(--gold)} .jcard .d{display:block;font-size:14px;line-height:1.6;color:var(--muted-1)} /* La destacada ocupa el ancho entero de la primera fila y pone el sobre grande al costado: es la que conecta con el curry y tiene que notarse. */ .jcard.destacada{ grid-column:1 / -1; grid-template-columns:auto 1fr;align-items:center;gap:28px; padding:26px 30px; background:linear-gradient(120deg,rgba(251,192,45,.07),transparent 60%),var(--ink-2); } .jcard.destacada .pack{padding-bottom:0} .jcard.destacada .pack::after{bottom:-10px;height:20px} .jcard.destacada img{width:170px} .jcard.destacada .txt{text-align:left} .jcard.destacada .h{font-size:26px;margin-bottom:10px} .jcard.destacada .d{font-size:15.5px;max-width:56ch} @media(max-width:900px){ .jcards{grid-template-columns:1fr 1fr} .jcard.destacada{grid-column:1 / -1} } @media(max-width:560px){ .jcards{grid-template-columns:1fr} /* Apila como el resto de las fichas: la foto arriba y el texto abajo. Con imagen al costado el texto quedaba en una columna angosta e ilegible. */ .jcard.destacada{grid-template-columns:1fr;gap:16px;padding:20px} .jcard.destacada img{width:150px;margin-inline:auto} .jcard.destacada .txt{text-align:center} .jcard.destacada .d{max-width:none} .jcard.destacada .h{font-size:22px} } /* ===================================================================== 6 · RECETA ANCLA ===================================================================== */ .receta{background:var(--ink)} .receta-card{ display:grid;grid-template-columns:1fr 1.05fr; border:1px solid var(--line);border-radius:14px;overflow:hidden; background:var(--ink-2);margin-top:32px; transition:transform .22s var(--ease),border-color .22s var(--ease); } .receta-card:hover{transform:translateY(-4px);border-color:rgba(251,192,45,.4);text-decoration:none} .receta-card .pa-ph{aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)} .receta-card .pa-ph img{width:100%;height:100%;object-fit:cover} .receta-card .bd{padding:34px 34px;display:flex;flex-direction:column;justify-content:center} .receta-card .t{ font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 10px; } .receta-card h3{font-size:27px;margin:0 0 12px;color:var(--cream);font-weight:700} .receta-card p{font-size:15px;line-height:1.68;color:var(--muted-1);margin:0 0 18px} .receta-card .go{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)} @media(max-width:760px){.receta-card{grid-template-columns:1fr}.receta-card .bd{padding:26px 24px}} .pendiente{ margin-top:24px;font-size:13px;line-height:1.6;color:var(--muted-2); border:1px dashed rgba(251,192,45,.35);border-radius:8px;padding:14px 18px; } .pendiente b{color:var(--gold)} /* ===================================================================== 7 · CÓMO VIENE — el cierre comercial Salió la foto del camión: un comercio no decide traer un SKU por nostalgia, decide porque entiende qué compra y si lo puede vender. En su lugar van los datos que va a buscar — DUN-14, contenido y peso neto por caja — más lo que estaba disperso en la página: qué lleva el blend y cómo se usa. El DUN va VISIBLE y no al JSON-LD. La spec pide gtin13 en el schema; mostrar el código de la caja como dato de página es otra cosa y no la contradice. ===================================================================== */ .formatos{background:var(--ink-2);border-top:1px solid var(--line-soft)} /* ── las tres rutas ─────────────────────────────────────────────────── */ .rutas{ display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px; border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .ruta{padding:22px 24px 20px} .ruta + .ruta{border-left:1px solid var(--line-soft)} .ruta .quien{ font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);margin:0 0 12px; } .ruta .que{margin:0 0 8px;font-size:15px;color:var(--muted-1)} .ruta .que b{ font-family:'Playfair Display',Georgia,serif; font-size:22px;color:var(--cream);font-weight:700; } .ruta .det{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted-2)} /* el premium se marca en dorado, no en rojo: el borde rojo leía como advertencia */ .ruta.destacada{background:rgba(251,192,45,.05)} .ruta.destacada .que b{color:var(--gold)} /* ── la tabla de datos: lo que el comercio escanea y carga en su sistema ─ */ .tabla-com{margin-top:30px;border:1px solid var(--line);border-radius:12px;overflow:hidden} .tc-head,.tc-row{ display:grid;grid-template-columns:1.1fr 1.5fr 1fr 1fr;gap:16px; padding:13px 20px;align-items:baseline; } .tc-head{ background:var(--ink-3); font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2); } .tc-row{border-top:1px solid var(--line-soft);font-size:14.5px;color:var(--muted-1)} .tc-row b{font-size:15.5px;color:var(--cream);font-weight:600} .cod{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--cream)} .tc-pie{ display:flex;gap:12px;align-items:baseline;flex-wrap:wrap; padding:13px 20px;border-top:1px solid var(--line); background:rgba(251,192,45,.04); } .tc-pie span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)} .tc-pie b{font-size:15px;font-weight:600} /* ── qué está vendiendo ─────────────────────────────────────────────── */ .ficha-com{margin-top:30px} .ficha-com h3{ font-family:'Playfair Display',Georgia,serif;font-size:20px; color:var(--cream);margin:0 0 14px;font-weight:600; } .ficha-com ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .ficha-com li{ padding-left:20px;position:relative; font-size:15px;line-height:1.68;color:var(--muted-1);max-width:74ch; } .ficha-com li::before{ content:'';position:absolute;left:0;top:.62em; width:7px;height:7px;border-radius:50%;background:var(--gold); } .ficha-com li b{color:var(--cream);font-weight:600} /* ── el panel de contacto ───────────────────────────────────────────── */ .mayor{ margin-top:36px;padding:30px 32px;border-radius:14px; background:linear-gradient(135deg,rgba(251,192,45,.10),rgba(211,47,47,.06)); border:1px solid var(--line); display:flex;gap:26px;align-items:center;flex-wrap:wrap; } .mayor .txt{flex:1;min-width:280px} .mayor h3{ font-family:'Playfair Display',Georgia,serif; font-size:24px;margin:0 0 8px;color:var(--cream);font-weight:700; } .mayor p{margin:0;font-size:15.5px;line-height:1.65;color:var(--muted-1)} .mayor .acts{display:flex;gap:12px;flex-wrap:wrap} @media(max-width:900px){ .rutas{grid-template-columns:1fr} .ruta + .ruta{border-left:none;border-top:1px solid var(--line-soft)} /* la tabla se apila: cuatro columnas no entran en un teléfono */ .tc-head{display:none} .tc-row{grid-template-columns:1fr;gap:4px;padding:16px 18px} .tc-row span{display:flex;justify-content:space-between;gap:16px} .tc-row span::before{ content:attr(data-l); font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted-2);align-self:center; } } /* ===================================================================== Degradación ===================================================================== */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero-pack:hover img,.pa-btn:hover,.scard:hover,.receta-card:hover{transform:none} .pa-hero-copy > *,.hero-pack img{animation:none} /* Ni 3D ni sprite: js/sobre.js se corta en la primera línea, así que no se descarga ni el GLB ni la hoja. Queda el del sobre, quieto. El dorso no se pierde: su rótulo está transcripto en texto, al lado. */ .hero-pack{position:static} .sobre3d,.sobre-pista,.sobre-boton{display:none} } /* La línea del rombo. Va pegada a los códigos porque es un dato de envase, no un bloque de marca: una línea y se termina. */ .nota-151{ margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted-2); } .nota-151 b{color:var(--gold);font-weight:600;letter-spacing:.04em} .nota-151 a{color:var(--muted-1);text-decoration:underline;text-underline-offset:3px} .nota-151 a:hover{color:var(--gold)} /* ===== COMO VIENE + RECETAS ===== */ /* ═══════════════════════════════════════════════════════════════════════════ CÓMO VIENE — el selector de formatos Sale del diseño de Thomas: _design-system/catalogo-b2b/como-viene-interactivo.html TRADUCIDO a los tokens de esta hoja. NO se importa styles.css ni colors_and_type.css del design system: meter un segundo juego de tokens acá es exactamente cómo se pierden los ajustes de contraste que ya costaron dos rondas —el --muted-2 recalibrado, entre otros—. --brand-yellow #FBC02D → var(--gold) --radius-2xl → 18px --brand-ink → var(--ink-2) --radius-lg → 14px --brand-bg #f5e8d2 → var(--cream) --radius-pill → 999px --font-display → Playfair Display --font-body → Lora SIN JAVASCRIPT: radios nativos y el combinador `~`. Así el panel ya viene renderizado en el HTML —no hay reflow al hidratar, CLS 0— anda con JS apagado y es navegable por teclado de fábrica. ═══════════════════════════════════════════════════════════════════════════ */ .viene .wrap-wide{max-width:1180px} .cv{margin-top:38px} .cv > input{position:absolute;opacity:0;width:0;height:0;pointer-events:none} /* ── nivel 1 · los slots ──────────────────────────────────────────────── Ancho fijo, nunca estiran. Con 1 sobre + granel son dos cajas alineadas a la izquierda y se lee como un selector, no como una fila coja; con 4 sobres + granel son cinco y envuelven sin dejar hueco. No hay ningún número cableado a la cantidad de variantes que tiene el arroz. */ .slots{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin:0} .slot{ flex:0 0 132px;background:var(--ink-3); border:1px solid var(--line);border-radius:12px; padding:12px 10px 10px;cursor:pointer; display:flex;flex-direction:column;gap:9px;align-items:center; transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease); } .slot:hover{border-color:rgba(251,192,45,.45);transform:translateY(-2px)} .slot .thumb{ width:100%;height:92px;border-radius:7px;overflow:hidden; background:var(--ink);display:flex;align-items:center;justify-content:center; } .slot .thumb img{width:100%;height:100%;object-fit:cover;display:block} .slot .thumb.contain img{object-fit:contain;padding:6px} .slot .name{font-size:12.5px;line-height:1.3;text-align:center;color:var(--muted-1)} #cv-s1:checked ~ .slots [for=cv-s1], #cv-sg:checked ~ .slots [for=cv-sg]{ background:linear-gradient(180deg,#3a2a12,var(--ink-3)); border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold); } #cv-s1:checked ~ .slots [for=cv-s1] .name, #cv-sg:checked ~ .slots [for=cv-sg] .name{color:var(--gold);font-weight:600} #cv-s1:focus-visible ~ .slots [for=cv-s1], #cv-sg:focus-visible ~ .slots [for=cv-sg], #cv-v1:focus-visible ~ .panelwrap [for=cv-v1], #cv-v2:focus-visible ~ .panelwrap [for=cv-v2]{outline:2px solid var(--gold);outline-offset:3px} /* ── nivel 2 · el panel ─────────────────────────────────────────────── */ .panelwrap{margin-top:24px;border-top:2px solid var(--gold)} .panel{ border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px; background:linear-gradient(180deg,rgba(251,192,45,.05),transparent 55%); padding:30px 34px 34px; } .selname{ font-family:'Lora',Georgia,serif;font-size:13px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted-2);margin:0 0 16px; } .selname b{color:var(--cream);font-weight:600} .pa-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px} .pa-tab{ display:none;align-items:center;min-height:46px; background:var(--ink-3);border:1px solid var(--line); color:var(--muted-1);font-size:14.5px;padding:11px 22px;border-radius:999px; cursor:pointer;transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease); } .pa-tab:hover{border-color:rgba(251,192,45,.5);color:var(--gold)} #cv-s1:checked ~ .panelwrap .t-sobre, #cv-sg:checked ~ .panelwrap .t-granel{display:inline-flex} #cv-v1:checked ~ .panelwrap [for=cv-v1], #cv-v2:checked ~ .panelwrap [for=cv-v2], .pa-tab.fijo{background:var(--gold);border-color:var(--gold);color:#1a1208;font-weight:600;cursor:default} /* Qué vista se ve: cruce de los DOS radios. Ojo con el combinador — `.panel` está adentro de `.panelwrap`, así que `~ .panel` no lo alcanza nunca y el panel queda vacío. Hay que apuntar al hermano real. */ .vista{display:none} #cv-s1:checked ~ #cv-v1:checked ~ .panelwrap .v-sobre, #cv-s1:checked ~ #cv-v2:checked ~ .panelwrap .v-cajas, #cv-sg:checked ~ .panelwrap .v-granel{display:block} /* el nombre de lo elegido, misma lógica */ .selname span{display:none} #cv-s1:checked ~ #cv-v1:checked ~ .panelwrap .n-sobre, #cv-s1:checked ~ #cv-v2:checked ~ .panelwrap .n-cajas, #cv-sg:checked ~ .panelwrap .n-granel{display:inline} /* ── contenido del panel ───────────────────────────────────────────── */ .info2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} .info2 h3,.v-cajas h3{ font-family:'Playfair Display',Georgia,serif;font-size:21px;font-weight:600; color:var(--cream);margin:0 0 16px; } .deflist{display:flex;flex-direction:column} .deflist > div{ display:flex;justify-content:space-between;gap:22px;padding:13px 0; border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--muted-1); } .deflist b{color:var(--cream);font-weight:600;text-align:right;flex:0 1 auto} .deflist .cod{font-variant-numeric:tabular-nums;letter-spacing:.06em;white-space:nowrap} .eanrow{margin-top:24px} .eanrow .l{ font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted-2);margin:0 0 7px; } .eanrow .v{ font-size:19px;color:var(--cream);font-variant-numeric:tabular-nums; letter-spacing:.09em;margin:0; } /* NO hay gráfico de código de barras. El mock traía uno dibujado con CSS al lado del EAN real: en una sección para comerciantes eso es justo el público que podría intentar escanearlo. O se genera de verdad desde el EAN, o no va. */ .nota2{font-size:14px;line-height:1.65;color:var(--muted-1);margin:18px 0 0} .nota2 b{color:var(--cream)} /* la tabla de cajas */ .tbl2{width:100%;border-collapse:collapse;font-size:14.5px} .tbl2 th{ text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted-2);padding:0 18px 12px 0;border-bottom:1px solid var(--line);font-weight:600; } .tbl2 td{padding:15px 18px 15px 0;border-bottom:1px solid var(--line-soft);color:var(--muted-1)} .tbl2 td:first-child{color:var(--cream);font-weight:600} .tbl2 .cod{font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--cream);white-space:nowrap} .cajas-2col{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center} /* el dibujo del anidamiento: acá es donde va, no en una sección aparte. La tabla dice los números, el dibujo dice la relación. */ .dib2 svg{width:100%;height:auto;display:block} .dib2 figcaption{margin-top:9px;font-size:12.5px;line-height:1.55;color:var(--muted-2)} /* la banda de cierre */ .cvcta{ margin-top:44px;padding:32px 36px;border-radius:14px; border:1px solid var(--line); background:linear-gradient(120deg,rgba(251,192,45,.10),rgba(211,47,47,.05)); display:flex;align-items:center;gap:32px;flex-wrap:wrap; } .cvcta h3{font-family:'Playfair Display',Georgia,serif;font-size:25px;color:var(--cream);margin:0 0 6px;font-weight:700} .cvcta p{margin:0;font-size:15px;color:var(--muted-1)} .cvcta .btns{display:flex;gap:11px;margin-left:auto;flex-wrap:wrap} @media(max-width:980px){ .info2,.cajas-2col{grid-template-columns:1fr;gap:30px} .panel{padding:26px 22px 28px} } @media(max-width:520px){ /* A 360 los dos problemas son la fila de slots y la tabla de DUN. Slots: pasan a dos por renglón y llenan el ancho — con 1, 2, 3 o 4 sobres más el granel siempre cierran renglón, nunca queda una caja suelta a media página. Tabla: deja de ser tabla y cada fila se apila con su etiqueta sacada de data-k, que es el único modo de que cuatro columnas de código entren en un teléfono sin scroll horizontal. */ .slot{flex:1 1 calc(50% - 7px)} .slots{gap:14px} .tbl2,.tbl2 tbody,.tbl2 tr,.tbl2 td{display:block;width:100%} .tbl2 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .tbl2 tr{padding:14px 0;border-bottom:1px solid var(--line-soft)} .tbl2 tr:last-child{border-bottom:0} .tbl2 td{padding:2px 0;border:0;display:flex;justify-content:space-between;gap:16px} .tbl2 td::before{ content:attr(data-k);flex:0 0 auto; font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2); align-self:center; } .tbl2 td:first-child{font-size:16px;margin-bottom:6px} .deflist > div{flex-direction:column;gap:4px} .deflist b{text-align:left} .cvcta{padding:24px 20px;gap:20px} .cvcta .btns{margin-left:0} } /* ═══ RECETAS ═════════════════════════════════════════════════════════════ Grilla pensada para 3 o 4, poblada con las 2 que existen. Medido sobre las 48 recetas del sitio: sólo arroz-con-azafran y guiso-de-arroz-con-pollo son recetas de arroz de verdad, y NINGUNA de las 48 usa el condimento. Las demás dicen «servir con arroz» — guarnición, no plato. La grilla cuenta, igual que la banda de especias: con 2 no queda huérfana. */ /* La grilla CUENTA, igual que la banda de especias: nunca fila huérfana. Con 5 va 3+2 —dos filas parejas— y no 4+1. Con 4, dos de dos. Con 6, tres de dos. Con 3, una sola fila. */ .rgrid{display:grid;gap:20px;margin-top:32px;grid-template-columns:repeat(3,1fr)} .rgrid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)} .rgrid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)} .rgrid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)} .rgrid:has(> :nth-child(5):last-child){grid-template-columns:repeat(3,1fr)} .rgrid:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)} .rcard{ display:flex;flex-direction:column; background:var(--ink-2);border:1px solid var(--line);border-radius:14px; overflow:hidden;color:inherit; transition:transform .2s var(--ease),border-color .2s var(--ease); } .rcard:hover{transform:translateY(-4px);border-color:rgba(251,192,45,.5);text-decoration:none} .rcard img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block; border-bottom:2px solid var(--tono,var(--gold))} .rcard .bd{padding:17px 19px 20px;display:flex;flex-direction:column;flex:1} .rcard h3{font-family:'Playfair Display',Georgia,serif;font-size:19px;color:var(--cream); margin:0 0 8px;font-weight:600;line-height:1.2} .rcard p{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--muted-1);flex:1} .rcard .go{font-size:13px;color:var(--gold);letter-spacing:.02em} /* La nota de pendiente es para nosotros, no para el lector: una línea al pie, no una caja de advertencia que compita con el contenido. */ .rnota{margin:20px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted-2)} .rnota code{font-size:11.5px} @media(max-width:900px){ .rgrid,.rgrid:has(> :nth-child(3):last-child), .rgrid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)} } /* La flecha del carrusel. Es APOYO del asomo, no el indicador principal: lo que dice «hay más» es que la card siguiente quede cortada en el margen. Existe sólo en celular y sólo mientras haya a dónde ir — el JS la esconde al final. Es un