, sin el header ni el footer) y no en : puesto en body, "abajo" significa el final de TODO el documento (footer incluido), así que en páginas altas como el Home la ilustración terminaba escondida detrás del footer opaco, y con posición fija además tapaba el texto en páginas cortas como Nosotros. Anclada al final de #principal queda siempre justo antes del footer, sin toparse con el contenido de arriba. */ #principal{ position:relative; background-color:#F4F3F0; background-image: linear-gradient(180deg, #F4F3F0 0%, rgba(244,243,240,.78) 30%, rgba(244,243,240,.68) 60%, rgba(244,243,240,.88) 100%), url('https://superprot.cl/wp-content/uploads/2026/08/Gemini_Generated_Image_m5dfrmm5dfrmm5df-scaled.webp'), linear-gradient(180deg, var(--blanco) 0%, #EEEFF0 100%); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom center, bottom center, top; background-size: 100% auto, 100% auto, 100% 100%; } img{ max-width:100%; display:block; } button{ font:inherit; color:inherit; cursor:pointer; } a{ color:inherit; } h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.12; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } :focus-visible{ outline:3px solid var(--foco); outline-offset:3px; border-radius:4px; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ── Utilidades ── */ .env{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); } .env-ancho{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--gutter); } .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .saltar{ position:absolute; left:-9999px; top:0; background:var(--texto); color:#fff; padding:12px 20px; z-index:200; border-radius:0 0 var(--r-1) 0; } .saltar:focus{ left:0; } .oculto{ display:none !important; } .rotulo{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--marca); margin-bottom:var(--e-3); } .titulo{ font-size:clamp(28px,4.2vw,46px); line-height:1.08; letter-spacing:-.03em; text-wrap:balance; } .titulo em{ font-style:normal; color:var(--marca-viva); } .bajada{ font-size:clamp(15px,1.5vw,17px); color:var(--texto-2); max-width:58ch; line-height:1.7; } .trazo{ position:relative; white-space:nowrap; font-style:normal; } .trazo svg{ position:absolute; left:0; right:0; bottom:-.22em; width:100%; height:.3em; overflow:visible; } /* ═══════════ BOTÓN ═══════════ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2); min-height:var(--btn-alto-md); padding:0 var(--e-6); border:0; border-radius:var(--r-full); background:var(--fondo-alt2); color:var(--texto); font-weight:600; font-size:15px; letter-spacing:-.01em; text-decoration:none; white-space:nowrap; cursor:pointer; box-shadow:var(--s-1); transition:transform var(--dur-media) var(--curva), box-shadow var(--dur-media) ease, background var(--dur-media) ease; } .btn:hover{ transform:translateY(-2px); box-shadow:var(--s-2); } .btn:active{ transform:translateY(0); } .btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; } .btn--primario{ background:var(--accion); color:var(--accion-texto); box-shadow:0 6px 16px -5px rgba(30,107,51,.55); } .btn--primario:hover{ background:var(--accion-hover); box-shadow:0 12px 24px -8px rgba(30,107,51,.6); } .btn--wa{ background:var(--wa-500); color:#fff; box-shadow:0 6px 16px -5px rgba(15,127,57,.5); } .btn--wa:hover{ background:#0C6C30; } .btn--contorno{ background:var(--superficie); box-shadow:inset 0 0 0 1.5px var(--borde), var(--s-1); } .btn--contorno:hover{ box-shadow:inset 0 0 0 1.5px var(--texto-3), var(--s-2); } .btn--fantasma{ background:transparent; box-shadow:none; } .btn--fantasma:hover{ background:var(--fondo-alt2); box-shadow:none; transform:none; } .btn--claro{ background:var(--blanco); color:var(--accion); } .btn--sol{ background:var(--destacado); color:var(--texto); box-shadow:0 6px 16px -5px rgba(255,198,41,.75); } .btn--tono{ background:var(--tono); color:var(--tono-txt,#fff); box-shadow:0 6px 14px -6px var(--tono); } .btn--tono:hover{ filter:brightness(1.07); } .btn--sm{ min-height:var(--btn-alto-sm); padding:0 var(--e-4); font-size:13.5px; } .btn--lg{ min-height:var(--btn-alto-lg); padding:0 var(--e-7); font-size:16px; } .btn--bloque{ width:100%; } .btn--icono{ padding:0; width:var(--btn-alto-md); } /* ═══════════ CABECERA ═══════════ */ .barra-datos{ background:var(--verde-900); color:rgba(255,255,255,.82); font-size:12.5px; } .barra-datos .env{ display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-6); align-items:center; justify-content:space-between; padding-block:7px; } .barra-datos a{ text-decoration:none; } .barra-datos a:hover{ color:var(--lima-500); } .barra-datos span{ display:inline-flex; align-items:center; gap:6px; } @media (max-width:900px){ .barra-datos{ display:none; } } .cab{ position:sticky; top:0; z-index:90; background:rgba(255,255,255,.9); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--borde); } .cab .env{ display:flex; align-items:center; gap:var(--e-4); padding-block:var(--e-3); } .marca{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; } .marca img{ height:64px; width:auto; display:block; } .nav{ display:flex; align-items:center; gap:2px; margin-left:auto; } .nav > a, .nav > button, .nav > .mega-anclaje > button{ display:inline-flex; align-items:center; gap:5px; padding:9px 13px; border:0; background:transparent; border-radius:var(--r-full); text-decoration:none; font-weight:500; font-size:15px; color:var(--texto-2); transition:background var(--dur-rapida) ease, color var(--dur-rapida) ease; } .nav > a:hover, .nav > button:hover, .nav > .mega-anclaje > button:hover, .nav > a[aria-current="page"]{ background:var(--marca-suave); color:var(--accion); } .nav > a[aria-current="page"]{ font-weight:600; } .nav-flecha{ transition:transform var(--dur-media) ease; } .nav > button[aria-expanded="true"] .nav-flecha, .nav > .mega-anclaje > button[aria-expanded="true"] .nav-flecha{ transform:rotate(180deg); } .acciones{ display:flex; align-items:center; gap:var(--e-2); } .btn-buscar{ display:grid; place-items:center; width:var(--btn-alto-md); height:var(--btn-alto-md); border:0; border-radius:var(--r-full); background:var(--fondo-alt2); color:var(--texto-2); transition:background var(--dur-rapida) ease; } .btn-buscar:hover{ background:var(--borde); color:var(--texto); } .btn-cot{ position:relative; display:inline-flex; align-items:center; gap:var(--e-2); min-height:var(--btn-alto-md); padding:0 var(--e-5); border:0; border-radius:var(--r-full); background:var(--destacado); color:var(--texto); font-weight:600; font-size:14.5px; box-shadow:0 6px 16px -6px rgba(255,198,41,.85); transition:transform var(--dur-media) ease, box-shadow var(--dur-media) ease; } .btn-cot:hover{ transform:translateY(-2px); box-shadow:0 12px 22px -8px rgba(255,198,41,.9); } .contador{ min-width:21px; height:21px; padding:0 6px; display:grid; place-items:center; background:var(--texto); color:var(--destacado); border-radius:var(--r-full); font-size:11.5px; font-weight:700; } .contador[data-vacio="si"]{ background:rgba(20,38,27,.18); color:var(--texto); } .btn-menu{ display:none; width:var(--btn-alto-md); height:var(--btn-alto-md); place-items:center; border:0; border-radius:var(--r-full); background:var(--fondo-alt2); } /* Mega-menú */ .mega-anclaje{ position:relative; } .mega{ position:absolute; top:calc(100% + 10px); left:0; right:auto; background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-3); box-shadow:var(--s-3); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--dur-media) ease, transform var(--dur-media) ease, visibility var(--dur-media) ease; } .mega[data-abierto="si"]{ opacity:1; visibility:visible; transform:translateY(0); } .mega-grid{ padding:var(--e-3); } .mega-simple{ display:flex; flex-direction:column; gap:2px; min-width:240px; } .mega-simple a{ display:block; padding:12px 18px; border-radius:var(--r-2); text-decoration:none; font-size:15.5px; font-weight:600; color:var(--texto); transition:background var(--dur-rapida) ease, color var(--dur-rapida) ease; } .mega-simple a:hover{ background:var(--fondo-alt); color:var(--accion); } @media (max-width:1100px){ .nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; margin-left:0; background:var(--superficie); padding:var(--e-4) var(--gutter) var(--e-6); border-bottom:1px solid var(--borde); box-shadow:var(--s-3); transform:translateY(-10px); opacity:0; visibility:hidden; transition:transform var(--dur-media) ease, opacity var(--dur-media) ease, visibility var(--dur-media) ease; max-height:calc(100vh - var(--cabecera-alto)); overflow-y:auto; } .nav[data-abierto="si"]{ transform:translateY(0); opacity:1; visibility:visible; } .nav > a, .nav > .mega-anclaje > button{ font-size:17px; font-weight:600; padding:13px 14px; justify-content:flex-start; width:100%; } .btn-menu{ display:grid; } .acciones{ margin-left:auto; } .mega-anclaje{ width:100%; } .mega{ position:static; width:100%; box-shadow:none; border:0; border-radius:0; opacity:1; visibility:visible; transform:none; display:none; } .mega[data-abierto="si"]{ display:block; } .mega-grid{ padding-block:var(--e-2); } .mega-simple{ min-width:0; } } @media (max-width:560px){ .marca img{ height:48px; } .btn-cot{ font-size:0; gap:0; padding:0 var(--e-3); } .btn-cot > svg{ margin-right:6px; } } /* Buscador global */ .buscador-global{ position:fixed; inset:0; z-index:115; background:rgba(20,38,27,.45); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity var(--dur-media) ease, visibility var(--dur-media) ease; padding:var(--gutter); } .buscador-global[data-abierto="si"]{ opacity:1; visibility:visible; } .buscador-caja{ max-width:640px; margin:min(14vh,110px) auto 0; background:var(--superficie); border-radius:var(--r-4); box-shadow:var(--s-4); overflow:hidden; transform:translateY(-14px); transition:transform var(--dur-lenta) var(--curva); } .buscador-global[data-abierto="si"] .buscador-caja{ transform:translateY(0); } .buscador-campo{ display:flex; align-items:center; gap:var(--e-3); padding:var(--e-5) var(--e-6); border-bottom:1px solid var(--borde); } .buscador-campo input{ flex:1; min-width:0; border:0; outline:0; font-family:inherit; font-size:17px; background:transparent; color:var(--texto); } .buscador-res{ max-height:min(50vh,420px); overflow-y:auto; padding:var(--e-2); } .buscador-item{ display:flex; align-items:center; gap:var(--e-3); width:100%; padding:var(--e-3); border:0; background:transparent; border-radius:var(--r-2); text-align:left; text-decoration:none; } .buscador-item:hover{ background:var(--fondo-alt); } .buscador-item .fig{ width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-1); background:var(--tono-pal); flex-shrink:0; } .buscador-item .fig svg{ width:28px; height:auto; } .buscador-item h4{ font-size:14.5px; font-weight:600; letter-spacing:-.018em; } .buscador-item p{ font-size:12.5px; color:var(--texto-3); } .buscador-vacio{ padding:var(--e-8) var(--e-6); text-align:center; color:var(--texto-3); font-size:14.5px; } /* ═══════════ MIGAS ═══════════ */ .migas{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); font-size:13px; color:var(--texto-3); padding-block:var(--e-5) 0; } .migas a{ text-decoration:none; } .migas a:hover{ color:var(--accion); text-decoration:underline; } .migas span[aria-current]{ color:var(--texto-2); font-weight:500; } .migas svg{ opacity:.5; } /* ═══════════ CHIPS ═══════════ */ .chip{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 var(--e-3); border-radius:var(--r-full); background:var(--fondo-alt2); font-size:12.5px; font-weight:500; color:var(--texto-2); } .chip--tono{ background:var(--tono-pal); color:var(--texto); font-weight:600; box-shadow:inset 0 0 0 1.5px var(--tono); } .chip--quitar{ border:0; cursor:pointer; background:var(--marca-suave); color:var(--accion); font-weight:600; } .chip--quitar:hover{ background:var(--hoja-050); filter:brightness(.96); } .chip--quitar svg{ opacity:.7; } /* ═══════════ TARJETA DE PRODUCTO ═══════════ */ .grilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(244px,1fr)); gap:clamp(14px,2vw,24px); } .tarjeta{ display:flex; flex-direction:column; background:var(--superficie); border-radius:var(--tarjeta-radio); box-shadow:var(--s-2); overflow:hidden; transition:transform var(--dur-media) var(--curva), box-shadow var(--dur-media) ease; } .tarjeta:hover{ transform:translateY(-6px); box-shadow:var(--s-3); } .tarjeta-fig{ position:relative; height:var(--tarjeta-figura-alto); display:grid; place-items:center; padding:var(--e-4); background:linear-gradient(165deg,#fff 0%, var(--tono-pal) 58%); text-decoration:none; } .tarjeta-fig svg.ilus{ height:100%; width:auto; max-width:82%; } .insignia{ position:absolute; top:var(--e-3); left:var(--e-3); padding:5px 11px; border-radius:var(--r-full); background:var(--tono); color:var(--tono-txt,#fff); font-size:11px; font-weight:700; box-shadow:0 6px 14px -6px var(--tono); } .tarjeta-cuerpo{ padding:var(--e-4); display:flex; flex-direction:column; gap:var(--e-2); flex:1; } .tarjeta-cuerpo h3{ font-size:17.5px; font-weight:600; letter-spacing:-.024em; } .tarjeta-cuerpo h3 a{ text-decoration:none; } .tarjeta-cuerpo h3 a:hover{ color:var(--accion); } .tarjeta-datos{ display:flex; flex-wrap:wrap; gap:6px; } .dato{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:var(--r-full); background:var(--fondo-alt2); font-size:11.5px; font-weight:500; color:var(--texto-2); } .tarjeta-cuerpo > p{ font-size:13px; color:var(--texto-3); line-height:1.5; } .tarjeta-pie{ margin-top:auto; padding-top:var(--e-2); display:flex; gap:var(--e-2); } .tarjeta-pie .btn{ flex:1; } /* Tarjeta de producto — catálogo simplificado (foto + proteína + formato + botón) */ .tarjeta-producto{ display:flex; flex-direction:column; background:var(--superficie); border-radius:var(--tarjeta-radio); box-shadow:var(--s-2); overflow:hidden; transition:transform var(--dur-media) var(--curva), box-shadow var(--dur-media) ease; } .tarjeta-producto:hover{ transform:translateY(-4px); box-shadow:var(--s-3); } .tp-fig{ display:block; height:170px; background:var(--fondo-alt2); text-decoration:none; overflow:hidden; } .tp-fig img{ height:100%; width:100%; object-fit:contain; display:block; } .tp-fig svg.ilus{ height:70%; width:auto; max-width:70%; color:var(--hoja-500); } .tp-cuerpo{ padding:var(--e-4); display:flex; flex-direction:column; gap:3px; flex:1; } .tp-cuerpo h3{ font-size:16px; font-weight:700; letter-spacing:-.02em; margin-bottom:1px; } .tp-cuerpo h3 a{ text-decoration:none; color:var(--texto); } .tp-cuerpo h3 a:hover{ color:var(--accion); } .tp-proteina{ font-size:12.5px; font-weight:600; color:var(--verde-700); } .tp-formato{ font-size:12.5px; color:var(--texto-3); margin-bottom:var(--e-3); } .tp-precio{ font-size:17px; font-weight:700; color:var(--texto); margin-bottom:var(--e-3); } .tp-precio .woocommerce-Price-amount{ font-weight:700; } .tp-mayorista{ font-size:11.5px; font-weight:600; color:var(--hoja-700); background:var(--hoja-050); display:inline-block; padding:3px 8px; border-radius:var(--r-full); margin:0 0 var(--e-3); } .tp-btn{ width:100%; } .tp-acciones{ display:flex; gap:var(--e-2); margin-top:auto; padding-top:var(--e-2); } .tp-acciones .btn{ flex:1; } /* Banner "Nuestros productos" + filtro de etapa por pastillas */ .productos-banner{ position:relative; overflow:hidden; border-radius:var(--r-6); padding:clamp(28px,5vw,54px) var(--e-5) clamp(30px,5vw,58px); text-align:center; background: linear-gradient(180deg,rgba(20,38,27,.72),rgba(20,38,27,.82)), url('../../../uploads/2026/08/Gemini_Generated_Image_ethe88ethe88ethe-Photoroom.png') center 30%/cover no-repeat, var(--verde-900); } .productos-banner h1{ color:#fff; font-size:clamp(26px,3.6vw,38px); letter-spacing:-.03em; margin-bottom:var(--e-2); } .productos-banner p{ color:rgba(255,255,255,.85); font-size:14.5px; max-width:52ch; margin:0 auto; } .pastillas-cat{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--e-2); margin:var(--e-6) 0 var(--e-3); } .pastillas-etapa{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--e-2); margin:0 0 var(--e-3); padding-top:var(--e-3); border-top:1px solid var(--borde); } .cuenta-productos{ text-align:center; font-size:13px; color:var(--texto-3); margin-bottom:var(--e-4); } .pastilla{ border:1.5px solid var(--gris-200); background:var(--superficie); color:var(--texto); border-radius:var(--r-full); padding:9px 20px; font-size:13.5px; font-weight:600; cursor:pointer; transition:background var(--dur-media) ease, color var(--dur-media) ease, border-color var(--dur-media) ease; } .pastilla:hover{ border-color:var(--hoja-500); } .pastilla.activa{ background:var(--hoja-500); border-color:var(--hoja-500); color:#fff; } .cat-grilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:clamp(14px,2vw,22px); } .cat-tarjeta{ display:flex; flex-direction:column; text-decoration:none; background:var(--superficie); border-radius:var(--tarjeta-radio); box-shadow:var(--s-2); overflow:hidden; transition:transform var(--dur-media) var(--curva), box-shadow var(--dur-media) ease; } .cat-tarjeta:hover{ transform:translateY(-6px); box-shadow:var(--s-3); } .cat-tarjeta-fig{ display:block; aspect-ratio:1/1; overflow:hidden; } .cat-tarjeta-fig img{ width:100%; height:100%; object-fit:cover; display:block; } .cat-tarjeta-nombre{ padding:var(--e-4); text-align:center; font-size:15.5px; font-weight:600; color:var(--texto); } /* ═══════════ CATÁLOGO ═══════════ */ .cat-layout{ display:grid; grid-template-columns:262px minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:start; } @media (max-width:900px){ .cat-layout{ grid-template-columns:1fr; } } .facetas{ position:sticky; top:calc(var(--cabecera-alto) + var(--e-4)); } @media (max-width:900px){ .facetas{ position:fixed; inset:0; z-index:112; top:0; background:var(--superficie); overflow-y:auto; padding:var(--e-5) var(--gutter) var(--e-11); transform:translateX(-101%); transition:transform var(--dur-lenta) ease; } .facetas[data-abierto="si"]{ transform:translateX(0); } } .facetas-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); margin-bottom:var(--e-4); } .facetas-cab h2{ font-size:17px; letter-spacing:-.02em; } .faceta{ border-top:1px solid var(--borde); padding-block:var(--e-4); } .faceta:first-of-type{ border-top:0; padding-top:0; } .faceta > summary{ display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:600; cursor:pointer; list-style:none; padding-block:2px; } .faceta > summary::-webkit-details-marker{ display:none; } .faceta > summary::after{ content:''; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--dur-media) ease; opacity:.55; } .faceta[open] > summary::after{ transform:rotate(180deg); } .faceta-lista{ margin-top:var(--e-3); display:flex; flex-direction:column; gap:2px; } .faceta-op{ display:flex; align-items:center; gap:var(--e-3); min-height:36px; padding:4px 8px; margin-left:-8px; border-radius:var(--r-1); cursor:pointer; font-size:14px; color:var(--texto-2); transition:background var(--dur-rapida) ease; } .faceta-op:hover{ background:var(--fondo-alt); } .faceta-op input{ position:absolute; opacity:0; width:0; height:0; } .faceta-marca{ width:19px; height:19px; flex-shrink:0; border:1.5px solid var(--borde); border-radius:5px; background:var(--superficie); display:grid; place-items:center; transition:background var(--dur-rapida) ease, border-color var(--dur-rapida) ease; } .faceta-op input:checked + .faceta-marca{ background:var(--accion); border-color:var(--accion); } .faceta-op input:checked + .faceta-marca::after{ content:''; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg) translate(-.5px,-1px); } .faceta-op input:focus-visible + .faceta-marca{ outline:3px solid var(--foco); outline-offset:2px; } .faceta-op input:checked ~ .faceta-txt{ color:var(--texto); font-weight:500; } .faceta-txt{ flex:1; } .faceta-n{ font-size:12px; color:var(--texto-3); font-variant-numeric:tabular-nums; } .faceta-op[data-vacio="si"]{ opacity:.4; pointer-events:none; } .barra-res{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3); padding-bottom:var(--e-4); margin-bottom:var(--e-5); border-bottom:1px solid var(--borde); } .barra-res .cuenta{ font-size:14px; color:var(--texto-2); margin-right:auto; } .barra-res .cuenta b{ color:var(--texto); } .sel-orden{ min-height:var(--btn-alto-sm); padding:0 var(--e-8) 0 var(--e-3); border:1.5px solid var(--borde); border-radius:var(--r-full); background:var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2363706A' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/15px; font-family:inherit; font-size:13.5px; font-weight:500; color:var(--texto-2); appearance:none; cursor:pointer; } .chips-activos{ display:flex; flex-wrap:wrap; gap:var(--e-2); width:100%; } .btn-facetas-movil{ display:none; } @media (max-width:900px){ .btn-facetas-movil{ display:inline-flex; } } .paginacion{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--e-2); margin-top:var(--e-9); } .pag-btn{ min-width:var(--btn-alto-sm); height:var(--btn-alto-sm); padding:0 var(--e-3); display:grid; place-items:center; border:0; border-radius:var(--r-full); background:var(--fondo-alt2); font-size:14px; font-weight:600; color:var(--texto-2); } .pag-btn:hover{ background:var(--borde); color:var(--texto); } .pag-btn[aria-current="page"]{ background:var(--accion); color:#fff; } .pag-btn[disabled]{ opacity:.4; pointer-events:none; } .vacio{ grid-column:1/-1; padding:var(--e-11) var(--e-6); text-align:center; background:var(--fondo-alt); border-radius:var(--r-4); } .vacio svg{ width:76px; height:auto; margin:0 auto var(--e-4); opacity:.55; } .vacio h3{ font-size:20px; margin-bottom:var(--e-2); } .vacio p{ color:var(--texto-3); font-size:14.5px; max-width:44ch; margin:0 auto var(--e-5); } .vacio-acciones{ display:flex; flex-wrap:wrap; gap:var(--e-2); justify-content:center; } /* ═══════════ PÁGINA DE PRODUCTO ═══════════ */ .prod{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); align-items:start; padding-block:var(--e-6) var(--seccion); } @media (max-width:860px){ .prod{ grid-template-columns:1fr; } } .prod-fig{ border-radius:var(--r-5); position:relative; overflow:hidden; background:linear-gradient(165deg,#fff,var(--tono-pal) 62%); display:grid; place-items:center; } .prod-fig img{ width:100%; height:auto; display:block; } .prod-fig svg.saco{ width:100%; max-width:236px; height:auto; filter:drop-shadow(0 24px 32px rgba(20,38,27,.16)); } .prod-sello{ position:absolute; top:var(--e-5); right:var(--e-5); width:clamp(64px,9vw,88px); } .prod h1{ font-size:clamp(27px,3.8vw,40px); letter-spacing:-.034em; margin-block:var(--e-2) 4px; } .prod-proteina{ font-size:15px; font-weight:700; color:var(--hoja-700); margin-bottom:var(--e-3); } .prod-resumen{ font-size:16px; color:var(--texto-2); margin-bottom:var(--e-5); } .prod-chips{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-bottom:var(--e-6); } .prod-badges{ display:flex; flex-wrap:wrap; gap:var(--e-3); margin-bottom:var(--e-6); } .prod-badge{ display:inline-flex; align-items:center; gap:var(--e-2); font-size:13.5px; font-weight:600; color:var(--texto); } .prod-badge .ico-circ{ width:30px; height:30px; margin:0; background:var(--hoja-500); } .prod-badge .ico-circ svg{ width:14px; height:14px; } .prod-analisis{ margin-bottom:var(--e-6); padding:var(--e-5); border-radius:var(--r-3); background:var(--marca-suave); } .prod-analisis h2{ font-size:14px; font-weight:700; letter-spacing:-.01em; margin-bottom:var(--e-3); } .prod-analisis .lista-def{ margin:0; } /* ═══════════ CALCULADORA (Calcula tu compra) ═══════════ */ .calc-caja{ max-width:640px; margin-inline:auto; background:var(--superficie); border-radius:var(--r-4); box-shadow:var(--s-2); padding:clamp(var(--e-5),4vw,var(--e-7)); } .calc-campos{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-4); margin-bottom:var(--e-6); } @media (max-width:560px){ .calc-campos{ grid-template-columns:1fr; } } .calc-campo{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--texto-2); } .calc-campo input, .calc-campo select{ width:100%; max-width:100%; height:var(--campo-alto); border-radius:var(--r-2); border:1.5px solid var(--borde); padding:0 var(--e-4); font:inherit; font-size:15px; color:var(--texto); background:var(--blanco); } .calc-campo select{ text-overflow:ellipsis; } .calc-campo input:focus, .calc-campo select:focus{ outline:2px solid var(--foco); outline-offset:1px; border-color:transparent; } .calc-rango{ font-size:12.5px; font-weight:600; color:var(--hoja-700); margin-bottom:var(--e-4); } .calc-resultado{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-3); margin-bottom:var(--e-3); } @media (min-width:640px){ .calc-resultado{ grid-template-columns:repeat(4,1fr); } } .calc-stat{ display:flex; flex-direction:column; gap:4px; padding:var(--e-4); border-radius:var(--r-3); background:var(--fondo-alt); text-align:center; } .calc-stat span{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3); } .calc-stat b{ font-size:20px; font-weight:800; color:var(--texto); } .calc-stat--destacado{ background:var(--marca-suave); } .calc-stat--destacado b{ color:var(--hoja-700); } .calc-nota{ font-size:12.5px; color:var(--texto-3); margin-bottom:var(--e-5); line-height:1.6; } .calc-nota a{ color:var(--accion); font-weight:600; } .prod-compra{ display:flex; flex-direction:column; gap:var(--e-3); padding:var(--e-5); border-radius:var(--r-3); box-shadow:var(--s-1); margin-bottom:var(--e-5); } .prod-precio{ width:100%; font-size:13.5px; color:var(--texto-3); } .prod-precio b{ color:var(--texto); font-weight:600; } .prod-precio-real{ width:100%; font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--texto); margin-bottom:2px; } .prod-precio-real .woocommerce-Price-amount{ font-weight:800; } .prod-precio-mayorista{ width:100%; font-size:13.5px; font-weight:600; color:var(--hoja-700); margin-bottom:var(--e-2); } .prod-precio-nota{ width:100%; font-size:12.5px; color:var(--texto-3); margin-top:-2px; margin-bottom:var(--e-2); } /* Precio por niveles (minorista/mayorista) — a pedido del cliente, estilo "desde X unidades". */ .prod-niveles{ width:100%; display:flex; flex-direction:column; gap:6px; margin-bottom:var(--e-3); } .prod-niveles .nivel{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; } .prod-niveles .nivel-desde{ font-size:12.5px; color:var(--texto-3); min-width:9.5em; } .prod-niveles .nivel-precio{ font-size:15px; font-weight:600; color:var(--texto-2); } .prod-niveles .nivel-precio small{ font-size:11px; font-weight:500; color:var(--texto-3); } .prod-niveles .nivel--mayor{ padding:10px 12px; border-radius:var(--r-3); background:var(--hoja-050); } .prod-niveles .nivel--mayor .nivel-desde{ color:var(--hoja-700); font-weight:600; } .prod-niveles .nivel--mayor .nivel-precio{ font-size:22px; font-weight:800; color:var(--texto); letter-spacing:-.01em; } .prod-niveles .nivel-ahorro{ font-size:11.5px; font-weight:700; letter-spacing:.02em; color:#fff; background:var(--hoja-500); padding:3px 9px; border-radius:var(--r-full); } .prod-niveles .nivel--base{ padding-inline:12px; } .prod-niveles .nivel-precio-tachado{ font-size:13.5px; color:var(--texto-3); text-decoration:line-through; text-decoration-color:var(--texto-3); } .prod-niveles .nivel-precio-tachado small{ font-size:11px; } .prod-vacunacion{ width:100%; display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--hoja-700); } .prod-vacunacion svg{ flex:none; color:var(--hoja-500); } .prod-stock-box{ display:inline-flex; align-items:baseline; gap:8px; margin-block:var(--e-4) var(--e-5); padding:10px 20px; border-radius:var(--r-full); background:var(--hoja-050); color:var(--hoja-700); } .prod-stock-num{ font-size:26px; font-weight:800; letter-spacing:-.02em; } .prod-stock-lbl{ font-size:14px; font-weight:600; } .prod-cantidad-minima{ width:100%; font-size:13px; color:var(--texto-3); } .prod-calendario{ width:100%; border-collapse:collapse; font-size:13.5px; margin-block:var(--e-2); } .prod-calendario caption{ text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3); margin-bottom:var(--e-2); } .prod-calendario th, .prod-calendario td{ padding:8px 10px; border-bottom:1px solid var(--borde); text-align:left; } .prod-calendario th{ font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--texto-3); } .prod-calendario td{ color:var(--texto-2); font-weight:600; } .prod-compra-cant{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3); } .paso-cant{ display:flex; align-items:center; background:var(--superficie); border-radius:var(--r-full); box-shadow:inset 0 0 0 1.5px var(--borde); overflow:hidden; } .paso-cant button{ width:40px; height:44px; display:grid; place-items:center; background:transparent; border:0; color:var(--texto-2); transition:background var(--dur-rapida) ease; } .paso-cant button:hover{ background:var(--marca-suave); color:var(--accion); } .paso-cant input{ width:52px; height:44px; border:0; outline:0; text-align:center; font-family:inherit; font-size:15px; font-weight:600; background:transparent; color:var(--texto); -moz-appearance:textfield; } .paso-cant input::-webkit-outer-spin-button, .paso-cant input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .pestanas{ display:flex; gap:var(--e-1); border-bottom:1px solid var(--borde); margin-bottom:var(--e-5); overflow-x:auto; scrollbar-width:none; } .pestanas::-webkit-scrollbar{ display:none; } .pestana{ flex:0 0 auto; padding:var(--e-3) var(--e-4); border:0; background:transparent; border-bottom:3px solid transparent; margin-bottom:-1px; font-size:14.5px; font-weight:600; color:var(--texto-3); white-space:nowrap; transition:color var(--dur-rapida) ease, border-color var(--dur-rapida) ease; } .pestana:hover{ color:var(--texto-2); } .pestana[aria-selected="true"]{ color:var(--accion); border-bottom-color:var(--accion); } .panel-pestana[hidden]{ display:none; } .tabla{ width:100%; border-collapse:collapse; font-size:14px; } .tabla caption{ text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); padding-bottom:var(--e-3); } .tabla th,.tabla td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--borde); } .tabla thead th{ background:var(--tono-pal); color:var(--texto); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-bottom:0; } .tabla thead th:first-child{ border-radius:var(--r-1) 0 0 var(--r-1); } .tabla thead th:last-child{ border-radius:0 var(--r-1) var(--r-1) 0; text-align:right; } .tabla tbody th{ font-weight:500; color:var(--texto-2); } .tabla td{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; } .tabla tbody tr:last-child th,.tabla tbody tr:last-child td{ border-bottom:0; } .lista-def div{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:var(--e-4); padding-block:var(--e-3); border-bottom:1px solid var(--borde); font-size:14px; } .lista-def dt{ font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3); } .lista-def dd{ margin:0; color:var(--texto-2); line-height:1.55; } @media (max-width:520px){ .lista-def div{ grid-template-columns:1fr; gap:2px; } } /* ═══════════ SECCIONES ═══════════ */ .sec{ padding-block:var(--seccion); } .sec--alt{ background:var(--fondo-alt); } .sec-cab{ text-align:center; margin-bottom:var(--e-8); background:rgba(255,255,255,.86); border-radius:var(--r-5); padding:var(--e-6) var(--e-6); max-width:fit-content; margin-inline:auto; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .sec-cab .bajada{ margin:var(--e-4) auto 0; } /* Home: la vista previa de "Consejos" quedó sin título — se agranda el rótulo para que la sección no pierda peso visual. */ .rotulo--consejos{ font-size:22px; margin-bottom:0; } .elementor-element-sp2c .elementor-heading-title{ font-size:22px; } .hero{ position:relative; padding-block:clamp(28px,5vw,54px) clamp(110px,13vw,180px); overflow:hidden; isolation:isolate; } .hero-fondo{ position:absolute; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(100deg,rgba(253,251,246,.95) 0%,rgba(253,251,246,.86) 30%,rgba(253,251,246,.5) 56%,rgba(253,251,246,.18) 100%), url('../../../uploads/2026/08/Gemini_Generated_Image_41tj0441tj0441tj-scaled.webp') center/cover no-repeat; } .hero-fondo svg{ position:absolute; } .blob-sol{ top:-22%; left:-16%; width:min(34vw,400px); opacity:.5; } .blob-verde{ bottom:-2%; left:-12%; width:min(140vw,1680px); } .punto-sol{ top:14%; right:5%; width:clamp(46px,5.5vw,84px); opacity:.85; } .punto-verde{ top:56%; right:-3%; width:clamp(60px,9vw,140px); } .hero .env{ position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(24px,4vw,54px); align-items:center; } .hero h1{ font-size:clamp(34px,5.4vw,62px); line-height:1.06; letter-spacing:-.038em; margin-bottom:var(--e-5); text-wrap:balance; } .hero h1 em{ font-style:normal; color:var(--marca-viva); } .hero-valores{ display:flex; flex-wrap:wrap; gap:var(--e-3) 18px; margin:var(--e-5) 0 0; } .hv-item{ display:inline-flex; align-items:center; gap:var(--e-2); font-size:13.5px; font-weight:600; color:var(--texto); } .hero-valores .hv-badge{ width:22px; height:22px; margin:0; background:var(--hoja-500); box-shadow:none; } .hero-valores .hv-badge svg{ width:11px; height:11px; } .hero-acciones{ display:flex; flex-wrap:wrap; gap:var(--e-3); margin-top:var(--e-7); } .hero-fig{ position:relative; display:grid; place-items:center end; } .hero-fig .saco{ width:min(100%,368px); height:auto; filter:drop-shadow(0 30px 40px rgba(20,38,27,.22)); } .sello{ position:absolute; top:6%; right:2%; width:clamp(80px,11vw,120px); animation:flota 5s ease-in-out infinite; } @keyframes flota{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} } .hero-ave{ position:absolute; } .ave-gallina{ bottom:-6%; left:-16%; width:clamp(100px,15vw,172px); } .ave-pollito{ bottom:-7%; right:-4%; width:clamp(56px,8vw,92px); } @media (max-width:940px){ .hero .env{ grid-template-columns:1fr; } .hero{ padding-bottom:clamp(100px,22vw,150px); } .hero-fig{ margin-top:var(--e-4); } .hero-fig .saco{ width:min(60%,240px); } .sello{ top:-2%; right:16%; width:clamp(66px,16vw,90px); } .ave-gallina{ bottom:-4%; left:2%; width:clamp(90px,22vw,124px); } .ave-pollito{ bottom:-5%; right:4%; width:clamp(50px,13vw,72px); } } @media (max-width:520px){ .hero-fig .saco{ width:min(58%,192px); } .hero-acciones .btn{ flex:1 1 100%; } } .franja{ position:relative; margin-top:clamp(-96px,-11vw,-146px); z-index:2; } .franja-caja{ background:var(--superficie); border-radius:var(--r-5); box-shadow:var(--s-3); padding:clamp(18px,2.4vw,28px); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(8px,1.4vw,18px); } @media (max-width:1000px){ .franja-caja{ grid-template-columns:repeat(3,1fr); } } @media (max-width:640px){ .franja-caja{ grid-template-columns:repeat(2,1fr); } } .pilar{ position:relative; padding-inline:clamp(4px,1vw,12px); text-align:center; } .pilar + .pilar::before{ content:''; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:var(--borde); } @media (max-width:1000px){ .pilar + .pilar::before{ display:none; } } .ico-circ{ width:50px; height:50px; display:grid; place-items:center; border-radius:var(--r-full); background:var(--tono-vivo,var(--tono)); color:#fff; margin:0 auto var(--e-3); box-shadow:0 8px 18px -7px var(--tono-vivo,var(--tono)); } .ico-circ svg{ width:23px; height:23px; } .pilar h3{ font-size:14px; font-weight:600; line-height:1.25; margin-bottom:4px; letter-spacing:-.015em; white-space:nowrap; } .pilar p{ font-size:12.5px; color:var(--texto-3); line-height:1.45; } .pilar .ico-circ{ width:58px; height:58px; } .pilar .ico-circ svg{ width:27px; height:27px; } @media (max-width:640px){ .pilar h3{ white-space:normal; } } /* Banda verde — buscador por etapa */ .banda-verde{ position:relative; overflow:hidden; background:linear-gradient(115deg,var(--verde-900) 0%,#2A7A38 46%,var(--lima-500) 128%); border-radius:var(--r-6); padding:clamp(24px,4vw,48px); box-shadow:var(--s-3); } .banda-verde::after{ content:''; position:absolute; right:-8%; top:-40%; width:44%; aspect-ratio:1; background:rgba(255,255,255,.07); border-radius:50%; } .banda-grid{ position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(22px,3.6vw,46px); align-items:center; } @media (max-width:900px){ .banda-grid{ grid-template-columns:1fr; } } .banda-verde h2{ color:#fff; font-size:clamp(24px,3.3vw,38px); line-height:1.1; letter-spacing:-.03em; margin-bottom:var(--e-3); } .banda-verde h2 em{ font-style:normal; color:var(--destacado); } .banda-verde .intro{ color:rgba(255,255,255,.8); font-size:15px; max-width:42ch; } .sel-etiqueta{ display:block; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:var(--e-3); } .tramos{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-2); margin-top:var(--e-5); } .tramo{ border:0; border-radius:var(--r-3); background:rgba(255,255,255,.12); color:#fff; padding:var(--e-3) var(--e-4); text-align:left; min-height:var(--btn-alto-md); transition:background var(--dur-media) ease, transform var(--dur-media) ease; } .tramo:hover{ background:rgba(255,255,255,.22); transform:translateY(-2px); } .tramo strong{ display:block; font-size:14px; font-weight:600; line-height:1.2; letter-spacing:-.015em; } .tramo span{ display:block; margin-top:2px; font-size:11.5px; opacity:.72; } .tramo[aria-selected="true"]{ background:#fff; color:var(--verde-900); box-shadow:var(--s-2); } .nota-tramos{ margin-top:var(--e-3); font-size:11.5px; color:rgba(255,255,255,.52); } .recom{ background:var(--superficie); border-radius:var(--r-4); padding:clamp(16px,2.4vw,24px); box-shadow:var(--s-3); display:grid; grid-template-columns:108px minmax(0,1fr); gap:clamp(12px,2vw,22px); align-items:center; } .recom[hidden]{ display:none; } @media (max-width:480px){ .recom{ grid-template-columns:1fr; text-align:center; } } .recom-fig{ border-radius:var(--r-3); background:var(--tono-pal); display:grid; place-items:center; padding:var(--e-3); height:124px; } .recom-fig svg{ height:100%; width:auto; } .recom .eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tono); margin-bottom:4px; } .recom h3{ font-size:clamp(18px,2.2vw,24px); margin-bottom:6px; letter-spacing:-.028em; } .recom p{ font-size:13.5px; color:var(--texto-2); line-height:1.55; margin-bottom:var(--e-3); } .recom-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--e-4); } .recom-acc{ display:flex; flex-wrap:wrap; gap:var(--e-2); } @media (max-width:480px){ .recom-chips,.recom-acc{ justify-content:center; } } /* Banda violeta */ .banda-uva{ position:relative; overflow:hidden; background:linear-gradient(125deg,var(--violeta-600) 0%,var(--violeta-400) 100%); border-radius:var(--r-6); padding:clamp(28px,4.2vw,54px); box-shadow:var(--s-3); display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(24px,4vw,50px); align-items:center; } @media (max-width:900px){ .banda-uva{ grid-template-columns:1fr; } } .banda-uva::before{ content:''; position:absolute; left:-10%; bottom:-56%; width:46%; aspect-ratio:1; background:rgba(255,255,255,.06); border-radius:50%; } .banda-uva h2{ position:relative; color:#fff; font-size:clamp(25px,3.4vw,38px); line-height:1.1; letter-spacing:-.032em; } .banda-uva h2 em{ font-style:normal; color:var(--destacado); display:block; } .banda-uva > div > p{ position:relative; margin-top:var(--e-4); color:rgba(255,255,255,.74); font-size:15px; max-width:34ch; } .uva-grid{ position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.6vw,30px); } @media (max-width:440px){ .uva-grid{ grid-template-columns:1fr; } } .uva-item .ico-circ{ margin:0 0 var(--e-3); width:46px; height:46px; } .uva-item .ico-circ svg{ width:21px; height:21px; } .uva-item h3{ color:#fff; font-size:15.5px; font-weight:600; margin-bottom:5px; letter-spacing:-.02em; } .uva-item p{ font-size:13px; color:rgba(255,255,255,.68); line-height:1.5; } /* Banda carbón */ .banda-carbon{ position:relative; overflow:hidden; background:var(--carbon-900); border-radius:var(--r-6); padding:clamp(28px,4.2vw,54px); box-shadow:var(--s-3); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(24px,4vw,48px); align-items:center; } @media (max-width:860px){ .banda-carbon{ grid-template-columns:1fr; } } .banda-carbon .rotulo{ color:var(--lima-500); } .banda-carbon h2{ color:#fff; font-size:clamp(25px,3.5vw,40px); line-height:1.08; letter-spacing:-.034em; margin-bottom:var(--e-3); } .banda-carbon h2 em{ font-style:normal; color:var(--lima-500); } .banda-carbon p.texto{ color:rgba(255,255,255,.66); font-size:15px; max-width:46ch; margin-bottom:var(--e-6); } .formatos{ display:flex; flex-wrap:wrap; gap:var(--e-3); } .formato{ flex:1 1 108px; border:0; border-radius:var(--r-3); background:rgba(255,255,255,.07); padding:var(--e-4); text-align:left; transition:background var(--dur-media) ease, transform var(--dur-media) ease; } .formato:hover{ background:rgba(140,198,63,.18); transform:translateY(-3px); } .formato strong{ display:block; font-size:22px; font-weight:700; color:var(--lima-500); letter-spacing:-.03em; } .formato span{ display:block; margin-top:2px; font-size:11.5px; color:rgba(255,255,255,.5); } .formato em{ display:block; margin-top:var(--e-3); font-style:normal; font-size:12.5px; font-weight:600; color:var(--lima-500); white-space:nowrap; } /* Etapas — stepper visual (pollita/recría/P1/P2) */ .etapas-visual{} .etapas-visual-grid{ display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.2vw,18px); flex-wrap:wrap; max-width:1180px; margin:0 auto; } .ev-card{ display:flex; flex-direction:column; align-items:center; text-align:center; width:205px; background:var(--superficie); border-radius:var(--r-4); box-shadow:var(--s-2); padding:clamp(20px,2.4vw,28px) var(--e-4) 0; overflow:hidden; } .ev-fig-wrap{ position:relative; margin-bottom:var(--e-4); } .ev-fig{ width:150px; height:150px; border-radius:var(--r-full); background:var(--tono-pal,var(--gris-100)); display:grid; place-items:center; overflow:hidden; text-decoration:none; transition:transform var(--dur-media) ease; } a.ev-fig:hover{ transform:scale(1.04); } .ev-fig img{ width:100%; height:100%; object-fit:cover; display:block; } .ev-fig svg{ width:56%; height:56%; color:var(--tono,var(--verde-500)); } .ev-badge{ position:absolute; bottom:2px; left:2px; width:38px; height:38px; margin:0; box-shadow:var(--s-2); } .ev-badge svg{ width:18px; height:18px; } .ev-card h3{ font-size:18px; font-weight:700; letter-spacing:-.02em; margin-bottom:3px; color:var(--texto); } .ev-card h3 a{ color:inherit; text-decoration:none; } .ev-card h3 a:hover{ color:var(--accion); } .ev-card p{ font-size:13px; color:var(--texto-2); margin-bottom:clamp(18px,2.2vw,24px); } .ev-card::after{ content:''; display:block; width:100%; height:5px; margin-top:auto; background:var(--tono,var(--verde-500)); } .ev-arrow{ align-self:center; margin-top:-30px; color:var(--gris-400); flex-shrink:0; } @media (max-width:1040px){ .etapas-visual-grid{ gap:var(--e-5) var(--e-4); } .ev-arrow{ display:none; } } @media (max-width:560px){ .ev-card{ width:100%; max-width:280px; } } /* Contacto — tarjeta "Cotiza fácilmente por WhatsApp" */ .cotiza-wa{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(20px,3.5vw,44px); align-items:center; background:var(--superficie); border-radius:var(--r-6); box-shadow:var(--s-3); padding:clamp(26px,4vw,50px); margin-block:var(--e-8); } @media (max-width:820px){ .cotiza-wa{ grid-template-columns:1fr; } } .cotiza-wa h1{ font-size:clamp(25px,3.2vw,32px); line-height:1.15; letter-spacing:-.03em; margin-bottom:6px; text-wrap:balance; } .cotiza-wa h1 em{ font-style:normal; color:var(--marca-viva); } .cotiza-wa .bajada{ margin-bottom:var(--e-5); } .cwa-campo{ display:block; width:100%; min-height:var(--campo-alto); padding:11px 16px; border:1.5px solid var(--borde); border-radius:var(--r-2); background:var(--superficie); color:var(--texto); font-family:inherit; font-size:14.5px; margin-bottom:var(--e-3); transition:border-color var(--dur-rapida) ease; } .cwa-campo:focus{ border-color:var(--accion); outline:none; } .cotiza-wa-form .btn{ margin-top:var(--e-2); } .cotiza-wa-fig{ display:grid; place-items:center; position:relative; } .cotiza-wa-fig::before{ content:''; position:absolute; width:min(100%,300px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,var(--hoja-050) 0%,var(--marca-suave) 70%,transparent 100%); } .cotiza-wa-fig img{ position:relative; width:100%; max-width:240px; height:auto; display:block; margin:0 auto; filter:drop-shadow(0 18px 26px rgba(20,38,27,.16)); } @media (max-width:820px){ .cotiza-wa-fig{ order:-1; } .cotiza-wa-fig::before{ width:min(100%,220px); } .cotiza-wa-fig img{ max-width:170px; } } /* Contacto — tarjeta con mapa + datos de contacto */ .contacto-tarjeta{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); background:var(--superficie); border-radius:var(--r-6); box-shadow:var(--s-2); overflow:hidden; margin-block:var(--e-8); } @media (max-width:820px){ .contacto-tarjeta{ grid-template-columns:1fr; } } .ct-mapa{ position:relative; min-height:340px; } .ct-mapa iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .ct-datos{ padding:clamp(26px,4vw,44px); display:flex; flex-direction:column; justify-content:center; gap:var(--e-3); } .ct-datos h2{ font-size:clamp(20px,2.4vw,24px); letter-spacing:-.02em; margin-bottom:var(--e-2); } /* Nosotros — intro con misión + estadísticas + foto. Solo padding-bottom: ya va dentro de un contenedor "cab-pag" que aporta el espacio superior, así que un padding-top propio aquí duplicaba el hueco bajo las migas de pan. */ .nosotros-intro{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4.5vw,64px); align-items:center; padding-bottom:clamp(32px,5vw,60px); } @media (max-width:900px){ .nosotros-intro{ grid-template-columns:1fr; } } .nosotros-intro h1{ font-size:clamp(30px,4.2vw,46px); line-height:1.1; letter-spacing:-.032em; margin-bottom:var(--e-4); text-wrap:balance; } .nosotros-intro h1 em{ font-style:normal; color:var(--marca-viva); } .ni-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e-6); margin-top:var(--e-7); } @media (max-width:700px){ .ni-stats{ grid-template-columns:1fr; } } .ni-stat{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-2); } .ni-badge{ width:46px; height:46px; margin:0 0 2px; background:var(--hoja-500); } .ni-badge svg{ width:21px; height:21px; } .ni-stat h3{ font-size:15px; font-weight:700; line-height:1.35; letter-spacing:-.01em; color:var(--hoja-700); } .ni-stat p{ font-size:13px; color:var(--texto-2); line-height:1.55; } .ni-foto{ position:relative; border-radius:var(--r-6); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--s-3); } .ni-foto img{ width:100%; height:100%; object-fit:cover; display:block; } .ni-foto.ni-foto--placeholder{ display:grid; place-items:center; background:linear-gradient(160deg,var(--hoja-050) 0%,var(--gris-100) 100%); } .ni-foto.ni-foto--placeholder svg{ width:36%; height:36%; color:var(--hoja-500); opacity:.7; } /* ¿Quiénes somos? — sección propia con texto ~58% + foto al lado. */ .quienes-hero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4.5vw,64px); align-items:center; } @media (max-width:900px){ .quienes-hero{ grid-template-columns:1fr; } } .quienes-hero h2{ font-size:clamp(28px,3.6vw,38px); letter-spacing:-.03em; line-height:1.12; text-wrap:balance; margin-bottom:var(--e-4); } .quienes-hero p{ font-size:15px; line-height:1.75; color:var(--texto-2); } .quienes-hero p + p{ margin-top:var(--e-4); } .quienes-foto{ position:relative; border-radius:var(--r-6); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--s-3); } .quienes-foto img{ width:100%; height:100%; object-fit:cover; display:block; } /* Misión / Visión — pareja de tarjetas con más carácter visual (duotono, ícono, texto claro). */ .mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-6); margin-top:var(--seccion); } @media (max-width:760px){ .mv-grid{ grid-template-columns:1fr; } } .mv-card{ border-radius:var(--r-5); padding:clamp(28px,3.6vw,var(--e-8)); color:#fff; } .mv-card--mision{ background:linear-gradient(155deg,var(--verde-900) 0%,var(--hoja-500) 100%); } .mv-card--vision{ background:linear-gradient(155deg,var(--cielo-700) 0%,var(--cielo-500) 100%); } .mv-icon{ width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.16); margin-bottom:var(--e-5); } .mv-icon svg{ width:24px; height:24px; color:#fff; } .mv-card h2{ font-size:22px; font-weight:700; letter-spacing:-.01em; margin-bottom:var(--e-3); color:#fff; } .mv-card p{ font-size:14.5px; line-height:1.75; color:rgba(255,255,255,.88); } /* Banda durazno */ .banda-durazno{ background:var(--durazno-050); border-radius:var(--r-6); overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); align-items:center; } .banda-durazno.uno-col{ grid-template-columns:1fr; } @media (max-width:860px){ .banda-durazno{ grid-template-columns:1fr; } } .durazno-txt{ padding:clamp(26px,4vw,52px); } .durazno-txt h2{ font-size:clamp(25px,3.4vw,38px); line-height:1.1; letter-spacing:-.032em; margin-bottom:var(--e-3); } .durazno-txt h2 em{ font-style:normal; color:var(--rosa-700); } .durazno-txt p{ color:var(--texto-2); font-size:15.5px; max-width:44ch; margin-bottom:var(--e-6); } .durazno-fig{ align-self:stretch; background:linear-gradient(155deg,#F8E8D5,#F0D9BE); display:grid; place-items:center; padding:clamp(24px,3.4vw,44px); min-height:230px; } .durazno-fig.alto{ min-height:280px; } .durazno-fig svg{ width:min(76%,250px); height:auto; } .durazno-fig--foto{ padding:0; min-height:280px; } .durazno-fig--foto img{ width:100%; height:100%; object-fit:cover; display:block; } @media (max-width:860px){ .durazno-fig--foto{ min-height:220px; } } .combo-inicio{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr); gap:clamp(18px,2.6vw,28px); align-items:stretch; } .combo-inicio .banda-durazno{ height:100%; } /* Mantener "Más que alimentar" en 2 columnas (texto+foto) más allá del punto donde .banda-durazno normalmente apilaría solo — evita que, apenas se angosta la ventana, esta tarjeta se vuelva mucho más alta que el panel verde de al lado. Solo se apila de verdad, y sin la foto, en móvil real. */ @media (max-width:860px){ .combo-inicio .banda-durazno{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); } .combo-inicio .durazno-txt .btn{ white-space:normal; text-align:center; padding:var(--e-3) var(--e-4); } } @media (max-width:640px){ .combo-inicio{ grid-template-columns:1fr; } .combo-inicio .banda-durazno{ grid-template-columns:1fr; } .combo-inicio .durazno-fig{ display:none; } } .combo-servicios{ position:relative; overflow:hidden; background:linear-gradient(160deg,var(--verde-900) 0%,#1E6B33 100%); border-radius:var(--r-6); padding:clamp(22px,3vw,32px); display:flex; flex-direction:column; justify-content:space-between; gap:var(--e-5); } .combo-titulo{ position:relative; color:#fff; font-size:17px; font-weight:700; letter-spacing:-.015em; line-height:1.25; margin-bottom:var(--e-4); } .combo-servicios-txt{ position:relative; display:flex; flex-direction:column; gap:clamp(16px,2.4vw,22px); } .combo-item{ display:flex; align-items:flex-start; gap:var(--e-4); } .combo-badge{ background:rgba(255,255,255,.14); box-shadow:none; flex-shrink:0; width:42px; height:42px; margin:0; } .combo-badge svg{ color:#fff; } .combo-item h4{ color:#fff; font-size:13.5px; font-weight:700; letter-spacing:-.01em; margin-bottom:3px; } .combo-item p{ color:rgba(255,255,255,.72); font-size:12.5px; line-height:1.5; } .combo-foto{ position:relative; align-self:center; margin-top:var(--e-2); } .combo-foto img{ width:100%; max-width:190px; height:auto; display:block; filter:drop-shadow(0 10px 18px rgba(0,0,0,.3)); } .banner-pollitas{ position:relative; overflow:hidden; background:linear-gradient(115deg,var(--verde-900) 0%,#2A7A38 46%,var(--lima-500) 128%); border-radius:var(--r-6); box-shadow:var(--s-3); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr); align-items:stretch; } .banner-pollitas::after{ content:''; position:absolute; right:28%; top:-40%; width:38%; aspect-ratio:1; background:rgba(255,255,255,.07); border-radius:50%; pointer-events:none; } @media (max-width:860px){ .banner-pollitas{ grid-template-columns:1fr; } } .bp-txt{ position:relative; padding:clamp(26px,4vw,48px); display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-3); } .bp-badge{ background:#fff; color:var(--verde-700); font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:var(--r-full); } .bp-txt h2{ color:#fff; font-size:clamp(23px,2.9vw,32px); line-height:1.15; letter-spacing:-.02em; } .bp-txt h2 em{ font-style:normal; color:var(--destacado); } .bp-vacunacion{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:#fff; background:rgba(255,255,255,.14); padding:8px 14px; border-radius:var(--r-full); } .bp-vacunacion svg{ flex:none; color:var(--lima-500); } .bp-etiqueta{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:var(--e-2); } .bp-fechas{ display:flex; flex-direction:column; gap:8px; } .bp-fecha{ display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.12); border-radius:var(--r-3); padding:9px 13px; font-size:12.5px; color:rgba(255,255,255,.85); } .bp-fecha svg{ flex:none; color:rgba(255,255,255,.45); transform:rotate(90deg); } @media (min-width:520px){ .bp-fecha svg{ transform:none; } } .bp-fecha-en{ font-weight:700; color:#fff; } .bp-minima{ font-size:12.5px; color:rgba(255,255,255,.65); } .bp-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-4); margin-top:var(--e-2); } .bp-precio{ font-size:27px; font-weight:800; letter-spacing:-.02em; color:#fff; } .bp-precio small{ font-size:13px; font-weight:600; color:rgba(255,255,255,.65); margin-left:4px; } .bp-precio .woocommerce-Price-amount{ font-weight:800; color:#fff; } .bp-link{ color:rgba(255,255,255,.85); font-size:13px; font-weight:600; text-decoration:underline; display:inline-flex; align-items:center; gap:5px; } .bp-link svg{ width:11px; height:11px; } .bp-fig{ position:relative; min-height:260px; } .bp-fig img{ width:100%; height:100%; object-fit:cover; display:block; } @media (max-width:860px){ .bp-fig{ min-height:220px; } } /* Pasos */ .pasos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,2.2vw,24px); } .paso{ background:var(--superficie); box-shadow:var(--s-2); border-radius:var(--r-4); padding:var(--e-6) var(--e-6) var(--e-7); } .paso-num{ width:36px; height:36px; display:grid; place-items:center; border-radius:var(--r-full); background:var(--accion); color:#fff; font-weight:700; font-size:15px; margin-bottom:var(--e-4); } .paso h3{ font-size:17px; font-weight:600; margin-bottom:var(--e-2); letter-spacing:-.022em; } .paso p{ font-size:14px; color:var(--texto-2); line-height:1.55; } /* Preguntas */ .dos-col{ display:grid; grid-template-columns:minmax(0,.6fr) minmax(0,1fr); gap:clamp(24px,4.5vw,58px); align-items:start; } @media (max-width:860px){ .dos-col{ grid-template-columns:1fr; } } .lista-preg{ display:flex; flex-direction:column; gap:var(--e-2); } .preg{ background:var(--fondo-alt); border-radius:var(--r-3); overflow:hidden; transition:background var(--dur-media) ease; } .preg[open]{ background:var(--marca-suave); } .preg summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-4); padding:var(--e-4) var(--e-5); font-weight:600; font-size:15px; letter-spacing:-.015em; cursor:pointer; list-style:none; min-height:var(--btn-alto-md); } .preg summary::-webkit-details-marker{ display:none; } .preg summary::after{ content:''; flex-shrink:0; width:20px; height:20px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--dur-media) ease; } .preg[open] summary::after{ transform:rotate(135deg); } .preg-cuerpo{ padding:0 var(--e-5) var(--e-5); font-size:14.5px; color:var(--texto-2); line-height:1.65; } /* Cierre */ .cierre-caja{ background:var(--marca-suave); border-radius:var(--r-6); padding:clamp(26px,4vw,52px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(22px,4vw,48px); align-items:center; } @media (max-width:820px){ .cierre-caja{ grid-template-columns:1fr; } } .cierre-caja h2{ font-size:clamp(24px,3.3vw,36px); line-height:1.1; letter-spacing:-.032em; margin-bottom:var(--e-3); max-width:18ch; } .cierre-caja > div > p{ color:var(--texto-2); font-size:15.5px; max-width:44ch; } .cierre-datos{ display:flex; flex-direction:column; gap:var(--e-3); } .dato-cont{ display:flex; align-items:center; gap:var(--e-4); background:var(--superficie); border-radius:var(--r-3); padding:var(--e-4) var(--e-5); text-decoration:none; font-weight:600; font-size:15px; box-shadow:var(--s-1); transition:transform var(--dur-media) ease, box-shadow var(--dur-media) ease; } .dato-cont:hover{ transform:translateX(4px); box-shadow:var(--s-2); } .dato-cont small{ display:block; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-3); font-weight:500; } .dato-cont .ico{ width:38px; height:38px; flex-shrink:0; display:grid; place-items:center; border-radius:var(--r-full); background:var(--marca-suave); color:var(--accion); } /* Artículos */ .art-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:clamp(16px,2.2vw,26px); } .art{ background:var(--superficie); border-radius:var(--r-4); box-shadow:var(--s-2); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--dur-media) var(--curva), box-shadow var(--dur-media) ease; } .art:hover{ transform:translateY(-6px); box-shadow:var(--s-3); } .art-fig{ height:154px; background:linear-gradient(160deg,#fff,var(--tono-pal) 60%); display:grid; place-items:center; overflow:hidden; } .art-fig svg{ height:100%; width:auto; max-width:76%; padding:var(--e-4); box-sizing:border-box; } .art-fig img{ width:100%; height:100%; object-fit:cover; display:block; } .art-cuerpo{ padding:var(--e-5); display:flex; flex-direction:column; gap:var(--e-2); flex:1; } .art-meta{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tono); } .art-cuerpo h3{ font-size:17px; font-weight:600; letter-spacing:-.022em; line-height:1.25; } .art-cuerpo h3 a{ text-decoration:none; } .art-cuerpo h3 a:hover{ color:var(--accion); } .art-cuerpo p{ font-size:13.5px; color:var(--texto-3); line-height:1.55; } .art-cuerpo .enlace{ margin-top:auto; padding-top:var(--e-2); font-size:13.5px; font-weight:600; color:var(--accion); text-decoration:none; display:inline-flex; align-items:center; gap:6px; } /* Prosa */ .articulo-foto{ width:100%; height:auto; border-radius:var(--r-5); box-shadow:var(--s-2); margin-bottom:var(--e-8); } .prosa{ max-width:68ch; } .prosa h2{ font-size:clamp(21px,2.6vw,28px); margin-block:var(--e-8) var(--e-3); letter-spacing:-.028em; } .prosa h2:first-child{ margin-top:0; } .prosa h3{ font-size:18px; margin-block:var(--e-6) var(--e-2); } .prosa p{ color:var(--texto-2); margin-bottom:var(--e-4); font-size:16px; } .prosa ul{ list-style:none; margin-bottom:var(--e-5); display:flex; flex-direction:column; gap:var(--e-2); } .prosa ul li{ position:relative; padding-left:var(--e-6); color:var(--texto-2); } .prosa ul li::before{ content:''; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:var(--r-full); background:var(--marca-viva); } .prosa blockquote{ margin:var(--e-6) 0; padding:var(--e-5) var(--e-6); background:var(--marca-suave); border-radius:var(--r-3); font-size:16px; color:var(--texto); } /* Cabecera de página interior */ .cab-pag{ padding-block:var(--e-6) var(--e-8); } .cab-pag h1{ font-size:clamp(29px,4.4vw,48px); letter-spacing:-.034em; margin-block:var(--e-3) var(--e-4); } /* ═══════════ COTIZACIÓN ═══════════ */ .cot-layout{ display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:clamp(20px,3vw,40px); align-items:start; padding-bottom:var(--seccion); } @media (max-width:900px){ .cot-layout{ grid-template-columns:1fr; } } .cot-linea{ display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:var(--e-4); align-items:center; background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-3); padding:var(--e-4); margin-bottom:var(--e-3); } @media (max-width:600px){ .cot-linea{ grid-template-columns:64px minmax(0,1fr); } .cot-linea .linea-ctrl{ grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center; } } .linea-fig{ width:84px; height:84px; display:grid; place-items:center; background:var(--tono-pal); border-radius:var(--r-2); overflow:hidden; flex-shrink:0; } .linea-fig svg{ width:52px; height:auto; } .linea-fig img{ width:100%; height:100%; object-fit:cover; display:block; } @media (max-width:600px){ .linea-fig{ width:64px; height:64px; } .linea-fig svg{ width:40px; } } .cot-linea h3{ font-size:15.5px; font-weight:600; letter-spacing:-.02em; } .cot-linea h3 a{ text-decoration:none; } .cot-linea .meta{ font-size:12.5px; color:var(--texto-3); margin-top:2px; } .linea-nota{ width:100%; margin-top:var(--e-2); padding:8px 12px; border:1px solid var(--borde); border-radius:var(--r-1); font-family:inherit; font-size:13px; color:var(--texto-2); background:var(--fondo-alt); resize:vertical; min-height:34px; } .linea-nota:focus{ outline:none; border-color:var(--accion); background:var(--superficie); } .linea-ctrl{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--e-2); } .quitar{ background:none; border:0; padding:4px; font-size:12.5px; color:var(--texto-3); text-decoration:underline; } .quitar:hover{ color:var(--error); } .resumen{ position:sticky; top:calc(var(--cabecera-alto) + var(--e-4)); background:var(--fondo-alt); border-radius:var(--r-4); padding:var(--e-6); } .resumen h2{ font-size:19px; letter-spacing:-.025em; margin-bottom:var(--e-4); } .resumen-fila{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--texto-2); padding-block:var(--e-2); } .resumen-fila b{ color:var(--texto); font-size:16px; } .resumen-fila b small, #panelTotalPrecio small{ font-size:11px; font-weight:600; color:var(--texto-3); margin-left:3px; } .resumen-nota{ margin-top:var(--e-4); padding-top:var(--e-4); border-top:1px solid var(--borde); font-size:12.5px; color:var(--texto-3); line-height:1.55; } .campos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-3); } .campo{ display:flex; flex-direction:column; gap:5px; min-width:0; } .campo[hidden]{ display:none; } .campo--ancho{ grid-column:1/-1; } .campo label{ font-size:12.5px; font-weight:600; color:var(--texto-2); } .campo label .opc{ font-weight:400; color:var(--texto-3); } .campo input,.campo textarea,.campo select{ width:100%; min-width:0; min-height:var(--campo-alto); padding:10px 14px; border:1.5px solid var(--borde); border-radius:var(--r-2); background:var(--superficie); color:var(--texto); font-family:inherit; font-size:15px; transition:border-color var(--dur-rapida) ease; } .campo input:focus,.campo textarea:focus,.campo select:focus{ border-color:var(--accion); } .campo textarea{ resize:vertical; min-height:76px; } .campo .ayuda{ font-size:12px; color:var(--texto-3); } .campo[data-error="si"] input,.campo[data-error="si"] select{ border-color:var(--error); background:var(--error-fondo); } .msg-error{ font-size:12.5px; color:var(--error); font-weight:500; display:flex; align-items:center; gap:5px; } .msg-error[hidden]{ display:none; } /* * Elementor's own base CSS gives every HTML-widget wrapper `position:relative`. * When that wrapper's only content is our own decorative, percentage-positioned * SVGs (`position:absolute; bottom:-2%` etc., meant to resolve against the much * taller `.hero-fondo`/`.hero-fig` ancestor), the wrapper — being closer and * newly positioned, and collapsed to height:0 since absolutely-positioned * children don't contribute to it — silently becomes the real containing * block instead, so every percentage resolves against zero and the SVG ends * up rendered far off in the wrong place. Forcing the wrapper back to static * lets positioning skip past it to the real, correctly-sized ancestor. */ .elementor-widget-html{ position:static !important; } /* * Elementor always wraps a Container's children in one intervening * `.e-con-inner` div, even when the container has no boxed-width need of its * own. That extra div is invisible visually but IS a real DOM node, so any * of our CSS Grid/Flex rules here that expect to lay out DIRECT children * (five .pilar cards, two .uva-grid columns, the hero's two-column .env...) * only ever see that one wrapper as their single grid/flex item instead of * the real content. `display:contents` unwraps it for layout purposes only * — the pilares/columns/etc. become direct grid items again — without * touching anything else Elementor relies on that div for. */ /* * Elementor's own global Kit ships default typography (Roboto, plus a gray * heading color) that silently wins over theme.css for anything rendered * inside `.elementor` — including raw

/

tags typed into a * text-editor widget's rich-text field, which have no per-widget setting to * override it with. Force our real font everywhere, and restore normal * color inheritance for any heading tag that isn't an actual Heading * widget (those already get an explicit, correct title_color per widget — * excluding .elementor-heading-title here keeps us from clobbering that). / .elementor, .elementor { font-family:var(--fuente) !important; } /* The Text Editor widget's own wrapper (not just bare h1-h6) carries the Kit's gray-text default, so any raw heading typed into its rich-text field inherits gray unless the wrapper itself is reset first. / .elementor .elementor-widget-text-editor, .elementor .elementor-widget-text-editor .elementor-widget-container{ color:inherit !important; } .hero > .e-con-inner, .env > .e-con-inner, .franja-caja > .e-con-inner, .banda-grid > .e-con-inner, .uva-grid > .e-con-inner, .banda-uva > .e-con-inner, .banda-durazno > .e-con-inner, .dos-col > .e-con-inner, .pasos > .e-con-inner, .cierre-caja > .e-con-inner, .cierre-datos > .e-con-inner{ display:contents; } .radio-grupo{ display:flex; flex-wrap:wrap; gap:var(--e-2); } .radio-op{ position:relative; flex:1 1 150px; } .radio-op input{ position:absolute; opacity:0; width:0; height:0; } .radio-op span{ display:flex; flex-direction:column; gap:2px; justify-content:center; min-height:var(--campo-alto); padding:10px 16px; border:1.5px solid var(--borde); border-radius:var(--r-2); font-size:14px; font-weight:600; cursor:pointer; transition:border-color var(--dur-rapida) ease, background var(--dur-rapida) ease; } .radio-op span small{ font-weight:400; font-size:12px; color:var(--texto-3); } .radio-op input:checked + span{ border-color:var(--accion); background:var(--marca-suave); } .radio-op input:focus-visible + span{ outline:3px solid var(--foco); outline-offset:2px; } / ═══════════ PANEL LATERAL ═══════════ / .velo{ position:fixed; inset:0; z-index:100; background:rgba(20,38,27,.44); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity var(--dur-lenta) ease, visibility var(--dur-lenta) ease; } .velo[data-abierto="si"]{ opacity:1; visibility:visible; } .panel{ position:fixed; top:0; right:0; bottom:0; z-index:110; width:min(440px,100%); background:var(--superficie); display:flex; flex-direction:column; transform:translateX(101%); transition:transform var(--dur-lenta) cubic-bezier(.4,0,.2,1); box-shadow:var(--s-4); } .panel[data-abierto="si"]{ transform:translateX(0); } .panel-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-4); padding:var(--e-5) var(--gutter); border-bottom:1px solid var(--borde); } .panel-cab h2{ font-size:21px; letter-spacing:-.03em; } .panel-cab p{ font-size:12.5px; color:var(--texto-3); margin-top:2px; } .cerrar{ width:var(--btn-alto-md); height:var(--btn-alto-md); flex-shrink:0; display:grid; place-items:center; background:var(--fondo-alt2); border:0; border-radius:var(--r-full); transition:background var(--dur-rapida) ease; } .cerrar:hover{ background:var(--borde); } .panel-lista{ flex:1; overflow-y:auto; padding:var(--e-4) var(--gutter); } .panel-pie{ border-top:1px solid var(--borde); padding:var(--e-4) var(--gutter) var(--e-5); background:var(--fondo-alt); display:flex; flex-direction:column; gap:var(--e-3); } .panel-pie[hidden]{ display:none; } .mini-linea{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:var(--e-3); align-items:center; background:var(--fondo-alt); border-radius:var(--r-3); padding:var(--e-3); margin-bottom:var(--e-2); } .mini-fig{ width:56px; height:56px; display:grid; place-items:center; background:var(--tono-pal); border-radius:var(--r-1); overflow:hidden; flex-shrink:0; } .mini-fig svg{ width:34px; height:auto; } .mini-fig img{ width:100%; height:100%; object-fit:cover; display:block; } .mini-linea h3{ font-size:14px; font-weight:600; line-height:1.25; letter-spacing:-.018em; } .mini-linea p{ font-size:12px; color:var(--texto-3); } .paso-cant--sm{ transform:scale(.86); transform-origin:right center; } / ═══════════ AVISO ═══════════ / .aviso{ position:fixed; left:50%; bottom:26px; z-index:130; transform:translate(-50%,150%); display:flex; align-items:center; gap:var(--e-3); background:var(--texto); color:#fff; padding:var(--e-4) var(--e-6); border-radius:var(--r-full); box-shadow:var(--s-4); font-size:14px; font-weight:500; max-width:calc(100vw - 32px); transition:transform var(--dur-lenta) var(--curva); } .aviso[data-visible="si"]{ transform:translate(-50%,0); } / ═══════════ FLOTANTE ═══════════ / .flotante{ position:fixed; right:20px; bottom:20px; z-index:70; display:inline-flex; align-items:center; gap:var(--e-3); min-height:var(--btn-alto-lg); padding:0 var(--e-5); background:var(--wa-500); color:#fff; border-radius:var(--r-full); font-weight:600; font-size:14.5px; text-decoration:none; box-shadow:0 12px 28px -8px rgba(15,127,57,.7); transition:transform var(--dur-media) ease; } .flotante:hover{ transform:translateY(-3px); } @media (max-width:560px){ .flotante span{ display:none; } .flotante{ padding:0; width:var(--btn-alto-lg); justify-content:center; } } / ═══════════ PIE ═══════════ */ .pie{ background:var(--verde-900); color:rgba(255,255,255,.78); padding-block:clamp(40px,5.5vw,64px) var(--e-6); margin-top:var(--seccion); } .pie-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,.8fr)); gap:clamp(22px,3.5vw,42px); padding-bottom:var(--e-8); } @media (max-width:860px){ .pie-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .pie-grid{ grid-template-columns:1fr; } } .pie-marca img{ height:58px; width:auto; margin-bottom:var(--e-4); display:block; } .pie-marca p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.6); max-width:32ch; } .pie h4{ font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--lima-500); margin-bottom:var(--e-4); } .pie li + li{ margin-top:var(--e-2); } .pie a{ text-decoration:none; font-size:14px; color:rgba(255,255,255,.72); transition:color var(--dur-rapida) ease; } .pie a:hover{ color:var(--lima-500); } .pie a.btn{ color:var(--accion); } .promo{ background:rgba(0,0,0,.28); border-radius:var(--r-3); padding:var(--e-5); } .promo h4{ margin-bottom:6px; } .promo p{ font-size:13px; color:rgba(255,255,255,.6); line-height:1.5; margin-bottom:var(--e-4); } .pie-legal{ display:flex; flex-wrap:wrap; gap:var(--e-3) var(--e-6); justify-content:space-between; align-items:center; padding-top:var(--e-5); border-top:1px solid rgba(255,255,255,.13); font-size:12px; color:rgba(255,255,255,.44); } .pie-legal a{ font-size:12px; color:rgba(255,255,255,.44); }