/* ==================== Base / tokens visuales ==================== */
:root{
  --green:#174b37; --green-2:#235f43; --green-3:#3f7457; --olive:#7e7d41;
  --cream:#fbf7ed; --cream-2:#f4efe3; --paper:#fffdf7; --ink:#173b2d; --text:#3e4741;
  --gold:#b98438; --brown:#6a4425; --line:#dfe4dc; --shadow:0 8px 22px rgba(39,55,45,.10);
  --radius:14px; --container:min(1140px,calc(100% - 48px));
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.45;overflow-x:hidden}body.menu-open,body.modal-open{overflow:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.container{width:var(--container);margin-inline:auto}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.skip-link{position:fixed;left:12px;top:-100px;z-index:999;background:#fff;color:#000;padding:10px 14px;border-radius:8px}.skip-link:focus{top:12px}.icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex:0 0 auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:10px 18px;border:1px solid transparent;border-radius:999px;font-weight:700;font-size:.92rem;transition:.18s ease;cursor:pointer}.btn:hover{transform:translateY(-1px)}.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #e6b868;outline-offset:3px}.btn-primary,.btn-whatsapp{background:var(--green-2);color:#fff;box-shadow:0 5px 14px rgba(23,75,55,.22)}.btn-primary:hover,.btn-whatsapp:hover{background:var(--green)}.btn-light{background:rgba(255,253,247,.96);color:#203d31;border-color:rgba(23,75,55,.14)}


/* ==================== Encabezado y navegación ==================== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,247,.98);border-bottom:1px solid rgba(43,73,56,.08);backdrop-filter:blur(12px)}.header-inner{height:72px;width:var(--container);margin:auto;display:flex;align-items:center;gap:14px}.brand{width:150px;height:62px;overflow:hidden;display:flex;align-items:center;justify-content:flex-start}.brand img{width:72px;height:72px;object-fit:contain}.desktop-nav{display:flex;align-items:center;justify-content:center;gap:26px;margin-left:auto;font-size:.82rem;color:#243b31}.desktop-nav a{padding:25px 0 20px;border-bottom:2px solid transparent}.desktop-nav a:hover,.desktop-nav a.active{color:var(--green);border-bottom-color:var(--green)}.header-buy-eggs{font-size:.82rem;padding:10px 16px;min-height:40px;white-space:nowrap}.header-note{font-family:"Segoe Print","Bradley Hand",cursive;font-size:.72rem;line-height:1.05;transform:rotate(-5deg);color:#31513f;white-space:nowrap}.menu-toggle{display:none;border:0;background:transparent;color:var(--green);padding:9px}.menu-toggle .icon{width:26px;height:26px}.mobile-menu{position:absolute;left:16px;right:16px;top:68px;background:#fffdf7;border:1px solid #e7e7df;border-radius:16px;padding:8px;box-shadow:0 16px 40px rgba(0,0,0,.16)}.mobile-menu a{display:block;padding:12px;border-radius:10px;font-weight:700}.mobile-menu a:hover{background:#f3f5ef}.floating-whatsapp{position:fixed;right:18px;bottom:18px;z-index:70;width:52px;height:52px;border-radius:999px;background:var(--green-2);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(23,75,55,.28)}.floating-whatsapp:hover{background:var(--green);transform:translateY(-1px)}.floating-whatsapp .icon{width:24px;height:24px}.floating-whatsapp:focus-visible{outline:3px solid #e6b868;outline-offset:4px}


/* ==================== Hero panorámico ==================== */
.hero{position:relative;aspect-ratio:1920/500;min-height:350px;max-height:500px;color:#fff;overflow:hidden;background:#274d39}.hero-picture{position:absolute;inset:0;display:block;width:100%;height:100%}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,34,24,.64) 0%,rgba(10,34,24,.40) 36%,rgba(10,34,24,.10) 64%,rgba(10,34,24,.04) 100%),linear-gradient(0deg,rgba(8,31,22,.55),transparent 32%)}.hero-content{position:relative;height:100%;display:flex;align-items:center}.hero-copy{width:59%;margin-top:-25px;text-shadow:0 2px 10px rgba(0,0,0,.24)}.hero-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.4rem,4vw,3.55rem);line-height:.94;margin:0 0 14px;letter-spacing:-.035em;color:#fff}.hero-copy p{font-size:1.13rem;line-height:1.25;max-width:560px;margin:0 0 20px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.wood-sign{position:absolute;right:8px;top:32px;width:132px;display:flex;flex-direction:column;gap:5px;transform:rotate(-3deg)}.wood-sign span{background:linear-gradient(#9b6a36,#79502b);border:1px solid rgba(58,37,17,.55);box-shadow:0 2px 5px rgba(0,0,0,.24);padding:5px 8px;text-align:center;color:#f8e5bd;font-family:Georgia,serif;font-size:.66rem}.hero-handnote{position:absolute;right:15px;bottom:54px;font-family:"Segoe Print","Bradley Hand",cursive;font-size:1rem;line-height:1.07;transform:rotate(-8deg);text-align:center}.hero-features{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;justify-content:center;align-items:center;gap:48px;padding:0 22px;background:linear-gradient(0deg,rgba(9,35,24,.62),rgba(9,35,24,.18))}.hero-features span{display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;white-space:nowrap}.hero-features .icon{width:24px;height:24px}


/* ==================== Secciones generales / experiencias ==================== */
.section{padding:18px 0}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px}.section h2,.panel-title h2,.contact-inner h2,.modal h2{font-family:Georgia,"Times New Roman",serif;color:#173d2e;letter-spacing:-.025em}.section-heading h2{font-size:2rem;line-height:1;margin:0}.section-heading h2::after,.story-copy h2::after,.panel-title h2::after{content:"";display:inline-block;width:38px;height:1px;background:#537964;margin-left:12px;vertical-align:middle}.section-heading p,.panel-title p{margin:5px 0 0;font-size:.82rem}.text-link{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;color:#264c3a;border-bottom:1px solid #6c927e;padding-bottom:3px}.experience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.experience-card{background:#fffdf8;border:1px solid #e7e6de;border-radius:8px;box-shadow:0 4px 12px rgba(61,72,63,.08);overflow:hidden;min-width:0}.experience-photo{position:relative;display:block;width:100%;aspect-ratio:2.45/1;border:0;padding:0;background:#ddd;cursor:zoom-in;overflow:hidden}.experience-photo img{width:100%;height:100%;object-fit:cover;image-rendering:auto}.experience-card:hover .experience-photo img{transform:none}.status-badge{position:absolute;right:8px;top:8px;background:var(--green);color:white;border-radius:999px;padding:5px 8px;font-size:.62rem;font-weight:800}.experience-body{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:0 11px 10px;min-height:74px}.experience-icon{width:44px;height:44px;border-radius:50%;border:1px solid #c6924e;background:#fffdf8;color:#a66e28;display:grid;place-items:center;margin-top:-17px;position:relative}.experience-icon .icon{width:25px;height:25px}.experience-body h3{font-family:Georgia,"Times New Roman",serif;color:#202d27;font-size:.91rem;line-height:1.08;margin:7px 0 3px}.experience-body p{font-size:.69rem;line-height:1.25;margin:0;color:#566058}


/* ==================== Historia y collage ==================== */
.farm-story{padding-top:10px;position:relative}.ornament{position:absolute;opacity:.75;pointer-events:none}.ornament-left{width:76px;left:max(0px,calc(50% - 650px));bottom:18px}.story-grid{display:grid;grid-template-columns:40% 60%;align-items:center;gap:22px}.story-copy h2{font-size:2rem;margin:0;line-height:1}.story-copy .lead{font-size:.91rem;margin:6px 0 10px}.story-copy p:not(.lead){font-size:.77rem;line-height:1.45;margin:0 0 8px}.story-copy .btn{margin-top:5px}.story-collage{height:185px;position:relative}.story-collage .photo{position:absolute;border:5px solid #fffdf8;box-shadow:0 6px 15px rgba(40,58,45,.18);object-fit:cover;cursor:zoom-in}.p1{width:28%;height:43%;left:11%;top:1%;transform:rotate(-2deg)}.p2{width:40%;height:60%;right:7%;top:1%;transform:rotate(2deg)}.p3{width:24%;height:43%;left:44%;bottom:0;transform:rotate(-7deg)}.p4{width:35%;height:45%;left:20%;bottom:4%;transform:rotate(1deg)}.paper-note{position:absolute;background:#f7f0df url('../images/fondos/textura-papel.webp');background-size:240px;border:1px solid #e7dfcf;padding:10px 12px;font-family:"Segoe Print","Bradley Hand",cursive;color:#31463a;box-shadow:0 4px 10px rgba(0,0,0,.08);font-size:.72rem;line-height:1.15}.note-a{left:2%;bottom:4%;transform:rotate(-8deg)}.note-b{right:-2%;bottom:10%;transform:rotate(4deg);font-size:.68rem;text-align:center}


/* ==================== Huevos Alegre / Próximamente ==================== */
.twin-panels{padding-top:10px;padding-bottom:12px}.twin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.feature-panel{position:relative;border:1px solid #e4e3da;border-radius:10px;background:#fffdf8;box-shadow:0 5px 16px rgba(50,65,56,.08);padding:14px;overflow:hidden;min-height:190px}.panel-title h2{font-size:1.9rem;line-height:1;margin:0}.panel-title p{font-size:.76rem}.eggs-layout{display:grid;grid-template-columns:160px 120px 1fr;grid-template-rows:auto auto;gap:7px 12px;align-items:center;margin-top:9px}.product-photo{width:160px;height:128px;object-fit:cover;border-radius:7px;grid-row:1/3}.eggs-logo{width:120px;height:105px;object-fit:contain;grid-row:1/3}.eggs-layout ul{list-style:none;padding:0;margin:0}.eggs-layout li{position:relative;padding-left:18px;font-size:.68rem;margin:5px 0}.eggs-layout li::before{content:"";position:absolute;left:0;top:3px;width:9px;height:9px;border-radius:8px 2px 8px 2px;background:#71945e;transform:rotate(-25deg)}.eggs-layout .btn{justify-self:start;min-height:34px;padding:6px 14px;font-size:.72rem}.panel-note{left:128px;bottom:10px;transform:rotate(-8deg);font-size:.61rem;padding:6px 8px}.upcoming-panel{padding-right:95px}.bungalow-card{position:relative;margin-top:9px;border-radius:8px;overflow:hidden;height:137px;background:#eee}.bungalow-card>img{width:100%;height:100%;object-fit:cover;filter:saturate(.86)}.bungalow-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 35%,rgba(249,245,235,.9) 58%,rgba(249,245,235,.98) 100%)}.coming-pill{position:absolute;z-index:2;left:47%;top:16px;background:var(--green-2);color:white;border-radius:999px;padding:7px 13px;font-size:.64rem;font-weight:800;transform:rotate(-3deg)}.bungalow-copy{position:absolute;z-index:2;right:12px;bottom:12px;width:45%;font-size:.69rem;color:#30483c}.bungalow-copy strong{font-family:Georgia,serif;font-size:.78rem}.bungalow-copy p{font-size:.64rem;margin:4px 0}.upcoming-side{position:absolute;right:9px;top:56px;width:75px;text-align:center;font-family:"Segoe Print","Bradley Hand",cursive;color:#425b4c;font-size:.68rem;transform:rotate(4deg)}.upcoming-side img{margin:6px auto;width:70px}.upcoming-side small{font-size:.58rem}


/* ==================== Banda final de contacto ==================== */
.contact-band{position:relative;height:82px;overflow:hidden;color:white}.contact-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 53%}.contact-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,42,29,.74),rgba(13,51,34,.42))}.contact-inner{position:relative;height:100%;display:grid;grid-template-columns:1.2fr auto 120px;gap:24px;align-items:center}.contact-inner h2{margin:0;color:white;font-size:1.75rem;line-height:1}.contact-inner p{font-size:.72rem;margin:7px 0 0}.contact-actions{display:flex;gap:11px}.contact-actions .btn{font-size:.72rem;min-height:37px;padding:7px 13px}.contact-note{font-family:"Segoe Print","Bradley Hand",cursive;transform:rotate(-7deg);font-size:.8rem;text-align:center}


/* ==================== Footer ==================== */
.site-footer{background:#134632;color:#fff;padding:7px 0 6px}.footer-main{display:grid;grid-template-columns:180px 1.2fr 1fr 1fr auto 175px 110px;align-items:center;gap:16px}.footer-brand{display:flex;align-items:center;gap:8px}.footer-brand img{width:46px;height:46px;object-fit:contain;border-radius:50%;background:#fff}.footer-brand span{font-size:.6rem;line-height:1.2;color:#d8e3dc}.footer-item{display:flex;align-items:center;gap:7px;font-size:.67rem;color:#eef5f1}.footer-social{display:flex;gap:8px}.footer-social a{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.22)}.complaints img{width:138px;height:auto}.footer-note{font-family:"Segoe Print","Bradley Hand",cursive;font-size:.67rem;text-align:center;transform:rotate(-4deg)}.footer-bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:6px;padding-top:5px;border-top:1px solid rgba(255,255,255,.12);font-size:.58rem;color:#d7e4dd}.footer-bottom nav{display:flex;gap:13px;flex-wrap:wrap;justify-content:flex-end}.footer-bottom a:hover{text-decoration:underline}


/* ==================== Diálogos / galería ==================== */
.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:100;background:rgba(8,24,17,.78);display:grid;place-items:center;padding:20px}.modal-card{position:relative;width:min(960px,96vw);max-height:90dvh;overflow:auto;background:#fffdf8;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.36)}.modal-close{position:absolute;right:12px;top:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.95);display:grid;place-items:center;color:var(--green);box-shadow:0 3px 10px rgba(0,0,0,.15);cursor:pointer}.gallery-modal>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#111;image-rendering:auto}.modal-copy,.history-modal{padding:22px}.modal-copy h2,.history-modal h2{font-size:2rem;margin:0 0 8px}.modal-copy p,.history-modal p{font-size:.92rem}.history-modal{max-width:650px}


/* ==================== Responsive ==================== */
@media (max-width:1000px){
  :root{--container:min(94%,920px)}.desktop-nav{gap:16px}.header-note{display:none}.hero-features{gap:24px}.story-grid{grid-template-columns:43% 57%}.footer-main{grid-template-columns:150px 1fr 1fr auto 150px}.footer-social{display:none}.footer-note{display:none}
}
@media (max-width:900px){
  .header-inner{height:64px}.brand{width:auto}.brand img{width:58px;height:58px}.desktop-nav,.header-buy-eggs{display:none}.menu-toggle{display:block;margin-left:auto}.hero{height:500px;aspect-ratio:auto;min-height:500px;max-height:none}.hero-bg{object-position:center center}.hero-overlay{background:linear-gradient(90deg,rgba(8,32,22,.78),rgba(8,32,22,.24)),linear-gradient(0deg,rgba(8,32,22,.68),transparent 48%)}.hero-content{align-items:flex-start;padding-top:76px}.hero-copy{width:75%;margin:0}.wood-sign{right:18px;top:40px;transform:scale(.88) rotate(-3deg);transform-origin:top right}.hero-handnote{bottom:74px;right:20px}.hero-features{height:64px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:30px}.hero-features::-webkit-scrollbar{display:none}.experience-grid{grid-template-columns:repeat(2,1fr)}.story-grid{grid-template-columns:1fr;gap:6px}.story-copy{max-width:650px}.story-collage{height:340px}.note-b{right:0}.twin-grid{grid-template-columns:1fr}.contact-inner{grid-template-columns:1fr auto}.contact-note{display:none}.footer-main{grid-template-columns:160px 1fr 1fr 160px}.footer-social,.footer-note{display:none}.footer-bottom{flex-direction:column;align-items:flex-start}.footer-bottom nav{justify-content:flex-start}.ornament-left{display:none}
}
@media (max-width:620px){
  :root{--container:calc(100% - 28px)}.site-header{position:sticky}.hero{height:510px;aspect-ratio:auto;min-height:510px;max-height:none}.hero-bg{object-position:center center;transform:none}.hero-content{padding-top:48px}.hero-copy{width:100%;padding-right:10px}.hero-copy h1{font-size:2.7rem;max-width:340px}.hero-copy p{font-size:1rem;max-width:330px}.hero-actions{gap:8px}.hero-actions .btn{min-height:40px;padding:8px 14px;font-size:.8rem}.wood-sign{display:none}.hero-handnote{right:18px;bottom:80px;font-size:.82rem}.hero-features{gap:26px;padding-inline:16px}.hero-features span{font-size:.66rem}.section{padding:15px 0}.section-heading{align-items:flex-start}.section-heading h2{font-size:1.7rem}.section-heading .text-link{font-size:.66rem;white-space:nowrap;margin-top:6px}.experience-grid{grid-template-columns:1fr;gap:10px}.experience-card{display:grid;grid-template-columns:42% 58%;min-height:118px}.experience-photo{aspect-ratio:auto;height:100%}.experience-body{grid-template-columns:40px 1fr;min-height:auto;padding:8px 10px 8px 0}.experience-icon{width:40px;height:40px;margin:3px 0 0 -19px}.experience-icon .icon{width:22px}.experience-body h3{font-size:.88rem;margin:3px 0 5px}.experience-body p{font-size:.68rem}.story-copy h2{font-size:1.75rem}.story-copy p:not(.lead){font-size:.75rem}.story-collage{height:315px;margin-top:8px}.p1{width:39%;left:2%;height:38%}.p2{width:48%;right:1%;height:43%}.p3{width:31%;left:52%;height:35%}.p4{width:47%;left:17%;height:38%}.note-a{font-size:.62rem;left:1%}.note-b{font-size:.58rem;right:-1%;bottom:4%}.feature-panel{padding:12px;min-height:unset}.panel-title h2{font-size:1.65rem}.eggs-layout{grid-template-columns:118px 98px 1fr;gap:7px}.product-photo{width:118px;height:118px}.eggs-logo{width:92px;height:92px}.eggs-layout li{font-size:.61rem;padding-left:14px}.eggs-layout .btn{grid-column:2/4}.panel-note{left:86px;bottom:12px}.upcoming-panel{padding-right:12px}.upcoming-side{display:none}.bungalow-card{height:160px}.bungalow-card::after{background:linear-gradient(0deg,rgba(249,245,235,.98),rgba(249,245,235,.1) 62%)}.coming-pill{left:auto;right:12px;top:12px}.bungalow-copy{left:12px;right:auto;bottom:10px;width:76%}.contact-band{height:185px}.contact-inner{grid-template-columns:1fr;gap:10px;align-content:center}.contact-inner h2{font-size:1.7rem}.contact-actions{flex-wrap:wrap}.footer-main{grid-template-columns:1fr 1fr;gap:12px}.footer-brand{grid-column:1/3}.complaints{justify-self:start}.footer-bottom{font-size:.6rem}.footer-bottom nav{gap:10px}.modal{padding:10px}.modal-card{width:100%;border-radius:13px}
}
@media (max-width:420px){
  .hero-copy h1{font-size:2.35rem}.section-heading{display:block}.section-heading .text-link{display:inline-flex;margin-top:9px}.experience-card{grid-template-columns:39% 61%}.story-collage{height:290px}.eggs-layout{grid-template-columns:110px 1fr}.eggs-logo{grid-row:auto;width:84px;height:84px}.product-photo{grid-row:1/4}.eggs-layout ul{grid-column:2}.eggs-layout .btn{grid-column:2}.panel-note{display:none}.footer-main{grid-template-columns:1fr}.footer-brand{grid-column:auto}.complaints{justify-self:start}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.btn:hover{transform:none}.experience-card:hover img{transform:none}}

/* Ajustes finales de fidelidad móvil */
@media (max-width:620px){
  .eggs-layout{grid-template-columns:42% 58%;grid-template-areas:"photo logo" "photo list" "photo button";align-items:start;column-gap:10px;row-gap:6px}
  .eggs-layout .product-photo{grid-area:photo;width:100%;height:150px;align-self:stretch}
  .eggs-layout .eggs-logo{grid-area:logo;width:92px;height:82px;justify-self:center;margin-top:-3px}
  .eggs-layout ul{grid-area:list;margin-top:-4px}
  .eggs-layout .btn{grid-area:button;justify-self:start}
  .bungalow-card::after{background:linear-gradient(0deg,rgba(249,245,235,.94) 0 37%,rgba(249,245,235,.12) 72%,transparent 100%)}
  .bungalow-card>img{filter:saturate(.95) brightness(.98)}
}
@media (max-width:420px){
  .eggs-layout{grid-template-columns:43% 57%;grid-template-areas:"photo logo" "photo list" "photo button"}
  .eggs-layout .product-photo{grid-row:auto;height:150px}
  .eggs-layout .eggs-logo{grid-row:auto;width:86px;height:76px}
  .eggs-layout ul{grid-column:auto}.eggs-layout .btn{grid-column:auto}
}


/* Controles discretos de galería; solo aparecen dentro del modal. */
.gallery-controls{display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 14px 0}.gallery-controls button{width:36px;height:36px;border-radius:50%;border:1px solid #d8ded8;background:#fff;color:var(--green);font-size:1.4rem;line-height:1;cursor:pointer}.gallery-controls button:hover,.gallery-controls button:focus-visible{background:var(--cream);outline:2px solid var(--green);outline-offset:2px}.gallery-controls span{min-width:44px;text-align:center;font-size:.72rem;color:var(--muted)}
.status-consult{font-size:.56rem;max-width:120px;text-align:center}


/* ==========================================================================\n   V1.07 · IMAGEN REALMENTE RESPONSIVE\n   Cada breakpoint usa un raster cuya relación coincide con su caja.\n   No se fuerza un asset vertical dentro de una franja panorámica.\n   ========================================================================== */
.hero{height:auto;min-height:0;aspect-ratio:1920/500}
.hero-picture,.hero-bg{width:100%;height:100%}
.hero-bg{object-fit:cover;object-position:center center;image-rendering:auto}

/* Tarjetas: el asset limpio es 1280x610 (~2.10:1). Evitamos recortarlo de nuevo. */
.experience-card .image-wrap{height:auto;aspect-ratio:1280/610;background:#e8e2d5;overflow:hidden}
.experience-card .image-wrap img{width:100%;height:100%;object-fit:cover;object-position:center center;transform:none!important;filter:none!important}

/* El modal ya no agranda una miniatura hasta casi 1000 px. */
.gallery-modal{width:min(820px,calc(100% - 28px));max-height:calc(100dvh - 30px)}
.gallery-modal>img{display:block;width:100%;height:auto;max-height:58dvh;object-fit:contain;object-position:center;background:#18281f}
.gallery-modal .modal-copy{padding-top:18px}

@media (min-width:768px) and (max-width:1399px){
  .hero{aspect-ratio:20/7;min-height:0;max-height:none}
  .hero-copy{width:min(540px,58%);padding-top:0}
  .hero-copy h1{font-size:clamp(38px,4.2vw,60px);line-height:.98}
  .hero-copy p{font-size:clamp(15px,1.65vw,20px);max-width:620px}
  .wood-sign{right:5%;top:10%;transform:rotate(-2deg) scale(.88);transform-origin:top right}
  .hero-handnote{right:6%;bottom:23%;font-size:18px}
  .hero-features{gap:clamp(18px,3vw,42px);font-size:12px;padding-inline:24px}
}

@media (max-width:767px){
  .hero{aspect-ratio:800/992;min-height:0;height:auto;max-height:none}
  .hero-bg{object-position:center center}
  .hero-overlay{background:linear-gradient(180deg,rgba(7,25,18,.22),rgba(7,25,18,.34) 45%,rgba(7,25,18,.62) 100%)}
  .hero-content{align-items:flex-start;padding-top:clamp(54px,17vw,82px);padding-bottom:82px}
  .hero-copy{width:100%;max-width:360px}
  .hero-copy h1{font-size:clamp(38px,11vw,52px);line-height:.94}
  .hero-copy p{font-size:16px;line-height:1.25;max-width:330px}
  .hero-actions{gap:10px;align-items:flex-start}
  .hero-actions .btn{min-height:44px}
  .wood-sign{display:none}
  .hero-handnote{display:none}
  .hero-features{justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:12px 18px;gap:24px}
  .hero-features::-webkit-scrollbar{display:none}
  .hero-features span{flex:0 0 auto;font-size:11px}
  .experience-card .image-wrap{aspect-ratio:2/1}
  .gallery-modal{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
  .gallery-modal>img{max-height:46dvh}
}

/* V1.07 final QA: relación exacta del raster desktop y zoom limitado a resolución útil. */
@media (min-width:1400px){
  .hero{aspect-ratio:1920/600}
}
.gallery-modal{width:min(640px,calc(100% - 28px))}
.gallery-modal>img{width:100%;height:auto;max-height:56dvh;object-fit:contain}
@media (max-width:767px){
  .gallery-modal{width:calc(100% - 20px)}
  .gallery-modal>img{max-height:42dvh}
}

/* ==========================================================================\n   V1.08 · FIDELIDAD / FULL-BLEED / COMPOSICIÓN RESPONSIVE\n   - Fuerza el hero a ocupar siempre todo el viewport, incluso si un ancestro\n     adquiere un ancho limitado por una versión anterior de CSS.\n   - Amplía el contenedor de escritorio para recuperar la densidad de la\n     referencia original.\n   - Cada breakpoint usa un raster art-directed diferente.\n   ========================================================================== */
html,body{width:100%;max-width:none}main#contenido{width:100%;max-width:none;margin:0;overflow:visible}
body:not(.menu-open,.modal-open){overflow-x:clip}
@media (min-width:1001px){:root{--container:min(1560px,calc(100% - 96px))}}
.hero{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  aspect-ratio:auto!important;
  height:clamp(495px,41vw,780px)!important;
  min-height:470px!important;
  max-height:780px!important;
}
.hero-picture,.hero-bg{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important}
.hero-bg{object-fit:cover!important;object-position:center 25%!important}
.hero-content{width:min(1600px,calc(100% - 120px));margin-inline:auto}
.hero-copy{width:min(650px,48%);margin-top:-12px}
.hero-copy h1{font-size:clamp(3rem,3.55vw,4.25rem);line-height:.95}
.hero-copy p{max-width:610px;font-size:clamp(1rem,1.15vw,1.28rem)}
.wood-sign{right:2.5%;top:10%;width:145px}
.hero-handnote{right:3.2%;bottom:17%;font-size:1.08rem}
.hero-features{height:56px;gap:clamp(32px,4vw,68px)}
.hero-features span{font-size:.79rem}
.hero-features .icon,.hero-actions .btn-primary .icon{filter:brightness(0) invert(1)}
.section-heading h2{font-size:2.18rem}
.experience-grid{gap:16px}
.experience-body h3{font-size:1rem}
.experience-body p{font-size:.72rem}

@media (min-width:1001px) and (max-width:1399px){
  :root{--container:min(1240px,calc(100% - 64px))}
  .hero{height:clamp(430px,39.5vw,555px)!important;min-height:430px!important;max-height:555px!important}
  .hero-content{width:min(1240px,calc(100% - 72px))}
  .hero-copy{width:min(570px,52%)}
  .hero-copy h1{font-size:clamp(2.65rem,4.2vw,3.7rem)}
  .wood-sign{right:3%;top:8%}
  .hero-handnote{right:4%;bottom:19%}
}

@media (min-width:768px) and (max-width:1000px){
  :root{--container:min(94%,920px)}
  .hero{height:450px!important;min-height:450px!important;max-height:450px!important}
  .hero-content{width:calc(100% - 54px);padding-top:0!important;align-items:center!important}
  .hero-copy{width:58%;margin-top:-10px}
  .hero-copy h1{font-size:clamp(2.45rem,5vw,3.15rem)}
  .hero-copy p{font-size:clamp(.94rem,1.7vw,1.08rem)}
  .wood-sign{display:flex;right:3%;top:8%;transform:scale(.82) rotate(-2deg)}
  .hero-handnote{display:block;right:4%;bottom:20%;font-size:.9rem}
  .hero-features{height:58px;gap:24px;padding-inline:18px;overflow-x:auto;justify-content:flex-start}
  .experience-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:767px){
  .hero{width:100%!important;height:clamp(560px,112vw,690px)!important;min-height:560px!important;max-height:690px!important;aspect-ratio:auto!important}
  .hero-overlay{background:linear-gradient(180deg,rgba(8,30,21,.70),rgba(8,30,21,.58) 31%,rgba(8,30,21,.10) 63%,transparent 78%)}
  .hero-content{width:calc(100% - 32px);padding-top:56px!important;padding-bottom:86px!important;align-items:flex-start!important}
  .hero-copy{width:100%;max-width:390px;margin:0}
  .hero-copy h1{font-size:clamp(2.45rem,10.7vw,3.3rem);max-width:365px}
  .hero-copy p{font-size:clamp(.96rem,4.2vw,1.08rem);max-width:350px}
  .hero-actions{max-width:350px}
  .wood-sign,.hero-handnote{display:none!important}
  .hero-features{height:64px;padding:10px 16px;gap:24px;justify-content:flex-start;overflow-x:auto}
  .section-heading h2{font-size:clamp(1.75rem,7vw,2.15rem)}
}

@media (max-width:420px){
  .hero{height:610px!important;min-height:610px!important;max-height:610px!important}
  .hero-content{padding-top:50px!important}
  .hero-copy h1{font-size:2.55rem}
}
/* QA V1.08: evita desborde horizontal de la nota del collage en pantallas intermedias. */
@media (min-width:901px) and (max-width:1100px){.note-b{right:0}}

/* ========================================================================== 
   V1.09 · GALERÍA / MODAL / CALIDAD RESPONSIVE
   - Tarjetas: recorte controlado, foco individual por experiencia.
   - Modal: fotografía completa, nunca object-fit:cover y sin altura fija.
   - No se amplía más allá del área útil; en móvil el ancho manda y la altura
     se deriva de la relación real de la imagen.
   ========================================================================== */
.experience-photo{
  aspect-ratio:16/9!important;
  background:#e8e2d5;
}
.experience-photo img{
  width:100%;height:100%;object-fit:cover!important;
  transform:none!important;filter:none!important;
  image-rendering:auto;
}
.modal{padding:18px!important;overflow:auto!important;align-items:center!important}
.gallery-modal{
  width:min(980px,calc(100vw - 36px))!important;
  max-height:calc(100dvh - 36px)!important;
  overflow:auto!important;
  background:var(--paper)!important;
  border-radius:18px!important;
}
.gallery-modal>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  border-radius:18px 18px 0 0;
}
.gallery-modal .gallery-controls{padding:10px 16px 0}
.gallery-modal .modal-copy{padding:18px 24px 22px!important}
.gallery-modal .modal-copy h2{margin-top:0}

@media (max-width:767px){
  .modal{padding:8px!important;align-items:flex-start!important}
  .gallery-modal{
    width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    margin:0!important;
    border-radius:14px!important;
  }
  .gallery-modal>img{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    border-radius:14px 14px 0 0;
  }
  .gallery-modal .modal-copy{padding:14px 16px 20px!important}
  .gallery-modal .modal-copy h2{font-size:1.65rem;line-height:1.05}
  .gallery-controls{padding-top:8px}
  .modal-close{top:10px!important;right:10px!important}
}

/* V1.09.1 QA final: respeta la proporción nativa del raster en el modal. */
.gallery-modal{width:min(760px,calc(100vw - 36px))!important}
.gallery-modal>img{aspect-ratio:auto!important}
@media (max-width:767px){
  .experience-card{display:block!important;min-height:0!important}
  .experience-photo{height:auto!important;aspect-ratio:16/9!important}
  .experience-body{grid-template-columns:44px 1fr!important;padding:0 12px 12px!important;min-height:78px!important}
  .experience-icon{width:44px!important;height:44px!important;margin-top:-18px!important;margin-left:0!important}
  .experience-body h3{font-size:1rem!important;margin:7px 0 4px!important}
  .experience-body p{font-size:.72rem!important}
  .gallery-modal{width:calc(100vw - 16px)!important}
  .gallery-modal>img{aspect-ratio:auto!important}
}


/* ==========================================================================\n   V1.10 · GALERÍA FOTOGRÁFICA REHECHA\n   --------------------------------------------------------------------------\n   - Las tarjetas usan assets 16:9 dedicados, sin recortes CSS adicionales.\n   - El modal usa un archivo separado de mayor calidad.\n   - Nunca se fuerza object-fit:cover en el modal.\n   - En móvil el modal respeta el ancho útil del viewport y mantiene el raster\n     completo.\n   ========================================================================== */
.experience-photo{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:#e9e2d5;
  overflow:hidden;
  aspect-ratio:16/9;
  cursor:pointer;
}
.experience-photo img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  filter:none !important;
}
.gallery-modal{
  width:min(680px,calc(100vw - 32px)) !important;
  max-height:calc(100dvh - 28px) !important;
  overflow:auto !important;
}
.gallery-modal>img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  aspect-ratio:16/9 !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#13291f !important;
}
.gallery-modal .modal-copy{
  padding:16px 22px 22px !important;
}
.gallery-modal .modal-copy p{
  margin-bottom:0;
}
@media (max-width:767px){
  .experience-card{display:block !important;min-height:0 !important;}
  .experience-photo{aspect-ratio:16/9 !important;}
  .experience-photo img{aspect-ratio:16/9 !important;object-fit:contain !important;}
  .gallery-modal{
    width:calc(100vw - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
    border-radius:14px !important;
  }
  .gallery-modal>img{
    width:100% !important;
    aspect-ratio:16/9 !important;
    max-height:none !important;
  }
  .gallery-modal .gallery-controls{padding-top:8px !important;}
  .gallery-modal .modal-copy{padding:12px 14px 18px !important;}
  .gallery-modal .modal-copy h2{font-size:1.5rem !important;line-height:1.08 !important;}
}

/* ==========================================================================\n   V1.14 · HEADER DE MARCA INTEGRADO\n   --------------------------------------------------------------------------\n   El encabezado usa el lettering EXTRAÍDO del logo oficial, sin reescribirlo.\n   El fondo exterior es transparente para integrarse con el header crema.\n   ========================================================================== */
.header-inner{height:72px}
.brand{
  width:220px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:visible;
  flex:0 0 auto;
}
.brand img{
  display:block;
  width:208px;
  height:auto;
  max-height:52px;
  object-fit:contain;
  object-position:left center;
  background:transparent;
  border:0;
  border-radius:0;
}
.footer-brand img{
  background:transparent!important;
  border-radius:0!important;
}
@media (max-width:1100px){
  .brand{width:178px;height:60px}
  .brand img{width:168px;max-height:44px}
}
@media (max-width:767px){
  .header-inner{height:64px}
  .brand{width:158px;height:54px}
  .brand img{width:150px;max-height:40px}
}
@media (max-width:380px){
  .brand{width:142px}
  .brand img{width:136px}
}

/* V1.15 · CTA comercial Huevos Alegre */
.eggs-actions-v115{display:flex;align-items:center;gap:14px;flex-wrap:wrap;grid-column:2/-1}.eggs-actions-v115 .text-link{font-size:.88rem;white-space:nowrap}
@media(max-width:767px){.eggs-actions-v115{grid-column:1/-1;align-items:stretch;gap:10px}.eggs-actions-v115 .btn{justify-content:center}.eggs-actions-v115 .text-link{justify-content:center}}


/* Pack BD V1.01 · Huevos Alegre: CTA comercial equilibrado y versión discreta */
.eggs-actions-v115{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:100%;align-items:stretch}
.eggs-actions-v115 .btn{width:100%;min-height:38px;justify-content:center;text-align:center;white-space:nowrap;grid-area:auto!important;justify-self:stretch!important}
.eggs-actions-v115 .eggs-whatsapp-btn{background:#5f693f;border-color:#5f693f}
.eggs-actions-v115 .eggs-whatsapp-btn:hover{background:#4f5934;border-color:#4f5934}
.footer-zip-version{display:inline-block;margin-left:7px;font-size:.52rem;font-weight:600;letter-spacing:.04em;opacity:.48}
@media(max-width:767px){.eggs-actions-v115{grid-template-columns:1fr}.eggs-actions-v115 .btn{white-space:normal}.footer-zip-version{display:block;margin:4px 0 0}}

@media(max-width:1100px){.header-buy-eggs{padding:9px 14px;font-size:.78rem}.header-buy-eggs .icon{display:none}}
@media(max-width:640px){.floating-whatsapp{right:14px;bottom:14px;width:48px;height:48px}}

/* V1.21 · Huevos Alegre: el producto se muestra con un encuadre propio y legible. */
.eggs-panel .eggs-layout{grid-template-columns:minmax(190px,38%) minmax(0,1fr);grid-template-areas:"photo logo" "photo list" "photo actions";column-gap:16px;row-gap:3px;align-items:start}
.eggs-panel .product-photo{grid-area:photo;align-self:center;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:contain;border-radius:10px;box-shadow:0 5px 13px rgba(46,57,43,.12)}
.eggs-panel .eggs-logo{grid-area:logo;width:108px;height:72px;justify-self:start;align-self:center}
.eggs-panel .eggs-layout ul{grid-area:list;margin:0;align-self:start}
.eggs-panel .eggs-actions-v115{grid-area:actions;grid-column:auto;grid-template-columns:minmax(170px,240px);width:100%;max-width:240px;align-self:end}
@media(max-width:767px){.eggs-panel .eggs-actions-v115{grid-template-columns:1fr;max-width:none}}
@media(max-width:620px){.eggs-panel .eggs-layout{grid-template-columns:minmax(130px,42%) minmax(0,1fr);grid-template-areas:"photo logo" "photo list" "photo actions";column-gap:12px;row-gap:5px}.eggs-panel .eggs-logo{width:94px;height:70px}.eggs-panel .eggs-actions-v115{width:100%;max-width:none}}