:root{ --verde-oscuro:#2C3A1E; --turquesa:#20403E; --verde-producto:#3E5C34; --verde-calido:#55663D; --verde-oliva:#5B6E3E; --tierra:#B8804A; --tierra-oscura:#8C5E33; --crema:#F6F2E7; --crema-oscura:#EDE6D6; --dorado:#C9A227; --pistacho:#9CB380; --ambar:#EFD9A0; --dorado-texto:#B8860B; --tinta:#25281F; --cafe:#5C3A21; --cobre-logo:#A5501E; --borde:#DAD2BC; --hero-poster:url("/wp-content/themes/cortijo-abuelo-pio/assets/img/img-215fcb9e3c.jpg"); --sombra: 0 20px 60px -20px rgba(44,58,30,0.35); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Karla', sans-serif; color:var(--tinta); background:var(--crema); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; color:var(--verde-oscuro); } a{color:inherit; text-decoration:none;} /* Los sin href no reciben el cursor de mano por defecto del navegador (solo se lo da a enlaces con href real) -- se fuerza aqui de forma global para toda la botonera, CTAs y similares. */ [role="button"]{cursor:pointer;} img,video{max-width:100%; display:block;} .wrap{max-width:1180px; margin:0 auto; padding:0 32px;} @media(max-width:640px){ .wrap{padding:0 20px;} } /* ---------- NAV ---------- */ header.nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; /* Vuelve a transparente al cargar (sobre el vídeo), como estaba SIEMPRE antes de tocar nada — el usuario lo pidió explícitamente tras ver el turquesa aplicado también aquí. Se conserva solo la altura reducida (22px -> 10/14px de aire), que sí gustó. El turquesa vive ahora SOLO en header.nav.scrolled, sustituyendo al crema que había antes. */ padding:10px 40px 14px; background:transparent; transition:background .35s ease, padding .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; } header.nav.scrolled{ /* El turquesa (antes activo siempre) se queda SOLO aquí, sustituyendo al crema que tenía el sitio originalmente. Altura reducida igual que la base. El usuario probó el cobre sobre este fondo (contraste 2.60:1, por debajo del mínimo recomendado) y no le convenció visualmente — el texto se queda en blanco/crema (igual que en el estado transparente de arriba), sin cambio de color al hacer scroll. */ padding:8px 40px 10px; background:rgba(32,64,62,.88); backdrop-filter:blur(18px); box-shadow:0 8px 24px -12px rgba(0,0,0,.45); } .brand{ display:flex; align-items:center; gap:12px; /* Vidaloka (Google Fonts, licencia OFL, 100% libre para web — a diferencia de Bookman Old Style, se descarga para TODAS las visitas sin depender de que el sistema operativo del visitante la tenga instalada). Se identificó buscando una familia libre con el mismo remate en bola de la J que tiene el logo real. Peso regular (Vidaloka no trae negrita real; pedir 700 daría negrita sintética del navegador) y tamaño reducido a petición del usuario. */ font-family:'Vidaloka', serif; font-weight:400; font-size:1.0rem; color:#EEEEEE; letter-spacing:0.03em; text-transform:uppercase; } .brand .marca-anio{ font-family:'Karla', sans-serif; font-weight:600; font-size:0.72rem; letter-spacing:0.18em; opacity:.75; display:block; margin-top:2px; } .brand-mark{ width:100px; height:100px; position:relative; flex-shrink:0; } .brand-mark img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .3s ease; } .brand-mark .logo-blanco{opacity:1;} .brand-mark .logo-cobre{opacity:0;} nav.links{display:flex; gap:34px; align-items:center;} nav.links a{ /* Vidaloka, peso regular (el usuario probó la negrita sintética y no le convenció). Vidaloka solo trae este peso real de todos modos. */ font-family:'Vidaloka', serif; font-size:1.0rem; font-weight:400; letter-spacing:0.03em; color:#fff; opacity:.92; position:relative; display:inline-flex; align-items:center; line-height:1; } nav.links a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1.5px; background:currentColor; transition:width .25s ease; } nav.links a:hover::after{width:100%;} .nav-cta{ background:linear-gradient(180deg,#DDBA45,var(--dorado)); color:var(--verde-oscuro)!important; padding:11px 24px; border-radius:999px; font-weight:700; font-size:1.0rem; line-height:1; align-self:center; display:inline-flex; align-items:center; gap:8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px -7px rgba(32,64,62,.55); transition:box-shadow .2s ease, transform .2s ease; } .nav-cta:hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 9px 18px -6px rgba(32,64,62,.6);} .nav-cta svg{width:17px; height:17px; flex-shrink:0;} .nav-cta::after{display:none;} /* ---------- MENU MOVIL (hamburguesa) ---------- */ .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; z-index:200; } .nav-toggle span{ display:block; width:100%; height:2px; background:#fff; transition:transform .3s ease, opacity .3s ease, background .3s ease; } .nav-toggle.open span{background:var(--turquesa)!important;} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-toggle.open span:nth-child(2){opacity:0;} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media(max-width:860px){ .nav-toggle{display:flex;} nav.links{ position:fixed; inset:0; z-index:150; background:var(--crema); flex-direction:column; justify-content:center; align-items:flex-start; gap:8px; padding:40px; transform:translateX(100%); transition:transform .35s ease; } nav.links.open{transform:translateX(0);} nav.links a{ color:var(--verde-oscuro)!important; font-size:1.6rem; font-family:'Fraunces', serif; font-weight:600; padding:14px 0; width:100%; border-bottom:1px solid var(--borde); } nav.links a::after{display:none;} .nav-cta{ margin-top:20px; text-align:center; border-bottom:none!important; font-family:'Karla', sans-serif; font-size:1rem; } } /* ---------- HERO CON VIDEO ---------- */ .hero{ position:relative; height:100vh; min-height:640px; display:flex; align-items:flex-start; overflow:hidden; background:var(--turquesa); /* Anula el padding-top:120px heredado de la regla global `section{padding: 120px 0;}`: .hero-content es position:relative (a diferencia de .cx-hero-in en Conócenos, que es absolute e ignora el padding del padre), así que ese 120px se sumaba a su propio padding-top y descuadraba la altura pedida por el usuario (mismo patrón que la Ronda 22 con .ficha-producto). */ padding-top:0; } .hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .hero::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,26,12,0.35) 0%, rgba(20,26,12,0.15) 40%, rgba(20,26,12,0.85) 100%); } .hero::after{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(120% 90% at 15% 100%, rgba(201,162,39,0.18), transparent 60%); } .hero-content{ position:relative; z-index:2; width:100%; /* Misma altura EXACTA que el bloque de texto de Conócenos (.cx-hero-in usa este mismo clamp) — a petición del usuario. */ padding:clamp(172px,20vh,250px) 40px 40px; } @media(max-width:640px){ .hero-content{padding:100px 24px 40px;} } @media(max-width:640px) and (max-height:700px){ .hero{min-height:780px;} } .hero-eyebrow{ /* Mismo formato que .cx-hero .cx-eyebrow de Conócenos (tamaño, tracking, color, sombra) — a petición del usuario. Se conserva la estructura flex + la rayita decorativa (::before), que Conócenos no tiene pero que no se pidió quitar aquí. Tamaño subido otra vez (0.84->0.92rem) a petición del usuario, en los dos sitios a la vez para que sigan coincidiendo. */ color:var(--dorado); font-weight:700; font-size:1.0rem; letter-spacing:0.3em; text-transform:uppercase; margin-bottom:26px; text-shadow:0 2px 12px rgba(10,16,6,.75); display:flex; align-items:center; gap:12px; } .hero-eyebrow::before{content:""; width:34px; height:1px; background:var(--ambar);} h1.hero-title{ /* Mismo formato que .cx-hero-title de Conócenos: sin negrita (300, no 600), mismo letter-spacing y sombra — el tamaño ya coincidía de la ronda anterior. */ color:#fff; font-size:clamp(2.2rem, 4.6vw, 3.9rem); line-height:1.08; font-weight:300; letter-spacing:-0.02em; max-width:none; text-shadow:0 3px 22px rgba(10,16,6,.6), 0 1px 3px rgba(10,16,6,.45); } h1.hero-title em{ font-style:italic; font-weight:300; color:var(--dorado); } .hero-sub{ color:rgba(255,255,255,0.86); font-size:1.08rem; max-width:58ch; margin-top:22px; font-weight:400; text-align:justify; } .hero-actions{display:flex; gap:16px; margin-top:30px; flex-wrap:wrap;} .btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 30px; font-weight:700; font-size:0.98rem; letter-spacing:0.02em; border-radius:999px; border:none; transition:transform .2s ease, background .25s ease, box-shadow .25s ease; } .btn-primary{ background:linear-gradient(180deg,#DDBA45,var(--dorado)); color:var(--verde-oscuro); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px -9px rgba(32,64,62,.5); } .btn-primary:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 12px 22px -8px rgba(32,64,62,.6);} .btn-ghost{ background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1.5px rgba(255,255,255,.5); color:#fff; } .btn-ghost:hover{background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1.5px #fff;} .hero-scroll{ position:absolute; right:40px; bottom:74px; z-index:2; writing-mode:vertical-rl; color:rgba(255,255,255,0.7); font-size:0.72rem; letter-spacing:0.2em; display:flex; align-items:center; gap:14px; } .hero-scroll::after{content:""; width:1px; height:50px; background:rgba(255,255,255,0.5);} @media(max-width:780px){ .hero-scroll{display:none;} } /* ---------- MARCA DE AGUA / FRANJA ---------- */ .franja{ /* Mismo efecto visual que la cabecera turquesa, pero horneado como imagen: la franja va DEBAJO del vídeo en el flujo normal de la página, así que al verla el vídeo ya ha quedado fuera de pantalla — no hay nada real que "backdrop-filter" pueda desenfocar aquí (a diferencia de la cabecera, que es fixed y sí se superpone al vídeo). Se usa la misma foto del vídeo, recortada y desenfocada de antemano, con el velo turquesa encima. */ background: linear-gradient(rgba(32,64,62,.82), rgba(32,64,62,.82)), url(/wp-content/themes/cortijo-abuelo-pio/assets/img/img-7ff80e8793.jpg); background-size:cover; background-position:center; color:#fff; padding:22px 0; overflow:hidden; white-space:nowrap; position:relative; } .franja-track{ display:inline-flex; gap:48px; animation:desfile 32s linear infinite; } .franja span{ /* Vidaloka (la misma tipografía de la cabecera) en blanco, sin cursiva — antes era Fraunces cursiva en dorado. */ font-family:'Vidaloka', serif; font-style:normal; font-size:1.15rem; color:#fff; opacity:1; } /* Aviso de zonas de envío especiales, en la última etiqueta de la franja */ .franja-envios{ cursor:pointer; /* Toda la frase es el area de clic (no solo el asterisco): la franja esta en movimiento continuo y acertar en un solo caracter era tedioso, asi que se amplia el objetivo a "Envios a toda Espana" completo. */ } .franja-envios:hover{text-decoration:underline;} .franja-asterisco{ padding:0 0 0 2px; color:#fff; font-family:inherit; font-size:1em; line-height:1; vertical-align:super; } .franja-popup{ /* Mismo formato que la cabecera al hacer scroll: turquesa translucido con desenfoque y texto blanco. */ display:none; position:fixed; z-index:500; max-width:280px; background:rgba(32,64,62,.88); backdrop-filter:blur(18px); color:#fff; font-family:'Karla', sans-serif; font-size:0.85rem; line-height:1.5; padding:14px 16px; border-radius:6px; box-shadow:0 8px 24px -12px rgba(0,0,0,.45); } .franja-popup a{color:#fff; text-decoration:underline;} /* «Envíos a toda España*» de la franja final del inicio: subrayado, con el mismo aviso que la franja dinamica (al pasar el cursor) */ .envios-aviso{ cursor:help; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:rgba(246,242,231,.85); } .envios-aviso:hover, .envios-aviso:focus-visible{ text-decoration-color:var(--dorado); outline:none; } .envios-asterisco{ padding:0 0 0 2px; font-size:1em; line-height:1; vertical-align:super; text-decoration:none; display:inline-block; } @keyframes desfile{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* ---------- SECCION GENERICA ---------- */ section{padding:120px 0;} @media(max-width:780px){ section{padding:76px 0;} } .eyebrow{ font-weight:700; font-size:0.92rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--ambar); margin-bottom:16px; display:flex; align-items:center; gap:12px; } .eyebrow::before{content:""; width:28px; height:1px; background:var(--ambar);} .cta-final-eyebrow::after{content:""; width:28px; height:1px; background:var(--ambar);} /* En secciones de fondo CREMA el champán no se lee: usamos un dorado con cuerpo */ .historia .eyebrow, .productos .eyebrow, .testimonios .eyebrow{ color:var(--dorado-texto); } .historia .eyebrow::before, .productos .eyebrow::before, .testimonios .eyebrow::before{ background:var(--dorado-texto); } h2.titulo-seccion{font-size:clamp(2rem, 3.6vw, 3rem); max-width:16ch; line-height:1.05;} /* Encabezados sobre fondo crema en café tostado */ .historia .titulo-seccion, .productos .titulo-seccion, .testimonios .titulo-seccion{ color:var(--cafe); } .lead{font-size:1.15rem; color:#4A4C3E; max-width:56ch; margin-top:20px; text-align:justify;} /* ---------- HISTORIA ---------- */ .historia{ background:var(--crema); position:relative; overflow:hidden; } /* Cenefa inferior: silueta del olivar a pincel, sutil, a lo ancho */ .historia::after{ content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:url("/wp-content/themes/cortijo-abuelo-pio/assets/img/img-04b9d7ad13.png") no-repeat center center; background-size:cover; opacity:0.30; pointer-events:none; z-index:0; } .historia .wrap{ position:relative; z-index:1; max-width:1440px; } @media(max-width:900px){ .historia::after{opacity:0.22;} } /* Texto claro sobre el fondo de la chimenea (aclarado) con sombra para legibilidad */ .historia .historia-texto p:first-of-type::first-letter{color:var(--dorado);} .historia-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:64px; } @media(max-width:900px){ .historia-grid{grid-template-columns:1fr; gap:36px;} } .hist-col{display:flex; flex-direction:column; gap:38px;} .hist-img{ margin:0; position:relative; border-radius:14px; padding:0; } /* Imagen 1: esquinas recortadas (café) */ .hist-img-1{ } .hist-img-1 img{ display:block; width:100%; height:auto; position:relative; z-index:1; aspect-ratio:4/3; object-fit:cover; border-radius:3px; box-shadow:0 20px 44px -20px rgba(44,58,30,0.5); } .hist-img-1::before, .hist-img-1::after{ content:""; position:absolute; width:38px; height:38px; z-index:2; border:2.5px solid var(--cafe); pointer-events:none; } .hist-img-1::before{ top:-9px; left:-9px; border-right:none; border-bottom:none; border-top-left-radius:4px; } .hist-img-1::after{ bottom:-9px; right:-9px; border-left:none; border-top:none; border-bottom-right-radius:4px; } /* Imagen 2: marco flotante fino (café) */ .hist-img-2{ display:flex; padding:10px; border:1.5px solid var(--cafe); border-radius:16px; margin-top:-36px; } .hist-img-2 .img-wrap{ position:relative; width:100%; overflow:hidden; border-radius:9px; z-index:1; box-shadow:0 16px 34px -18px rgba(44,58,30,0.45); } .hist-img-2 img{width:100%; height:100%; object-fit:cover; display:block;} .hist-img-2 .img-wrap::after{ content:""; position:absolute; inset:0; border-radius:9px; background:linear-gradient(180deg, rgba(20,26,12,0) 45%, rgba(20,26,12,0.82) 100%); } .cita-img{ position:absolute; left:24px; right:24px; bottom:22px; z-index:2; color:#fff; font-family:'Fraunces', serif; font-style:italic; font-size:1.12rem; line-height:1.4; } .historia-texto{ position:relative; z-index:1; background:rgba(246,242,231,0.72); border-radius:8px; padding:2px 14px; } .historia-texto p{margin-bottom:20px; color:#2A2C22; font-size:1.02rem; text-align:justify;} .historia-texto p:first-of-type::first-letter{ font-family:'Fraunces', serif; font-size:3.1em; font-weight:600; float:left; line-height:0.82; margin:0.06em 0.10em 0 0; color:var(--tierra-oscura); } .firma-block{ margin-top:36px; padding-top:24px; border-top:1px solid var(--borde); display:flex; gap:16px; align-items:center; } .firma-nombre{font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem;} .firma-cargo{font-size:0.82rem; color:#6B6D5C;} /* ---------- HISTORIA: maqueta editorial (fotos solapadas + texto justificado en dos columnas) ---------- */ .historia-editorial{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; margin-top:54px; } .td-fotos{ position:relative; aspect-ratio:558/760; } .td-fotos .f1{ position:absolute; left:0; top:0; width:72%; aspect-ratio:4/5; height:auto; object-fit:cover; border-radius:4px; box-shadow:0 26px 50px -24px rgba(44,58,30,.6); z-index:1; } .td-fotos .f2{ position:absolute; right:0; bottom:0; width:56%; aspect-ratio:1/1; height:auto; object-fit:cover; border-radius:4px; box-shadow:0 26px 50px -24px rgba(44,58,30,.6); z-index:2; } /* sin marco blanco */ .td-fotos::before{ content:""; position:absolute; left:22px; top:22px; width:72%; aspect-ratio:4/5; border:1.5px solid var(--cobre-logo); z-index:0; } .td-cita{ position:absolute; left:4%; bottom:0; width:36%; font-family:'Fraunces',serif; font-style:italic; font-size:1.08rem; line-height:1.4; color:var(--cafe); } .td-cita::before{ content:"\201C"; display:block; font-size:4rem; line-height:.6; color:var(--cobre-logo); font-style:normal; } .td-texto{ column-count:2; column-gap:44px; padding-top:8px; } .td-texto p{ margin:0 0 16px; font-size:1rem; line-height:1.7; text-align:justify; hyphens:auto; -webkit-hyphens:auto; color:#2A2C22; } .td-texto p:first-child::first-letter{ font-family:'Fraunces',serif; font-size:4.2em; font-weight:600; float:left; line-height:.78; margin:.05em .08em 0 0; color:var(--cobre-logo); } @media(max-width:1000px){ .historia-editorial{ grid-template-columns:1fr; gap:40px; } .td-fotos{ max-width:560px; width:100%; margin:0 auto; } } @media(max-width:700px){ .td-texto{ column-count:1; } .td-cita{ font-size:.95rem; width:38%; } } /* ---------- COMARCA / MAPA ---------- */ .comarca{ position:relative; border-top:1px solid var(--borde); border-bottom:1px solid var(--borde); background-image: linear-gradient(180deg, rgba(30,36,20,0.72) 0%, rgba(35,32,20,0.55) 45%, rgba(30,36,20,0.82) 100%), url(/wp-content/themes/cortijo-abuelo-pio/assets/img/img-12ac63f0c8.jpg); background-size:cover; background-position:center 35%; background-repeat:no-repeat; background-attachment:scroll; } .comarca .eyebrow{color:var(--ambar);} .comarca .titulo-seccion{color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.5);} .comarca .lead{color:#FFFFFF; text-shadow:0 1px 10px rgba(0,0,0,0.55);} .comarca-item{border-top-color:rgba(246,242,231,0.22) !important;} .comarca-item:last-child{border-bottom-color:rgba(246,242,231,0.22) !important;} .comarca-item h3{color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.5);} .comarca-item p{color:rgba(255,255,255,0.95) !important; text-shadow:0 1px 8px rgba(0,0,0,0.5);} .comarca-num{color:#DDBA45 !important;} .comarca .wrap{ max-width:1700px; } .comarca-grid{display:grid; grid-template-columns:1fr 1.25fr; gap:60px; align-items:start; margin-top:56px;} @media(max-width:900px){ .comarca-grid{grid-template-columns:1fr;} } .comarca-lista{display:flex; flex-direction:column; margin-top:12px;} .comarca-item{ display:flex; gap:22px; padding:26px 0; border-top:1px solid var(--borde); } .comarca-item:last-child{border-bottom:1px solid var(--borde);} .comarca-num{font-family:'Fraunces', serif; font-size:1.1rem; color:var(--tierra-oscura); font-weight:600; min-width:28px;} .comarca-item h3{font-size:1.15rem; margin-bottom:6px;} .comarca-item p{color:#5C5E4E; font-size:0.96rem;} .comarca-mapa{ background:var(--turquesa); border-radius:6px; padding:44px 36px; color:var(--crema); position:sticky; top:110px; margin-top:20px; border:1px solid rgba(201,162,39,0.55); box-shadow:0 24px 50px -24px rgba(0,0,0,0.55); } .comarca-mapa::before{ content:""; position:absolute; inset:7px; border-radius:3px; border:1px solid rgba(246,242,231,0.16); pointer-events:none; } .comarca-mapa .etiqueta{font-size:0.95rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--dorado); font-weight:700;} .comarca-mapa h3{color:#fff; font-size:2.1rem; margin-top:14px; white-space:nowrap;} .comarca-mapa p{color:rgba(246,242,231,0.82); margin-top:14px; font-size:0.95rem; text-align:justify;} .comarca-stat-row{display:flex; flex-wrap:wrap; justify-content:center; gap:20px 24px; margin-top:30px; padding-top:26px; border-top:1px solid rgba(246,242,231,0.2);} .comarca-stat{display:flex; align-items:center; gap:14px;} .comarca-stat .stat-ico{flex-shrink:0; width:52px; height:52px; color:var(--dorado);} .comarca-stat .stat-ico svg{width:100%; height:100%; display:block;} .comarca-stat .stat-ico-img img{width:100%; height:100%; object-fit:contain; display:block;} .comarca-stat:first-child .stat-ico{width:78px; height:58px;} .comarca-stat .stat-txt b{display:block; font-family:'Fraunces', serif; font-size:2rem; color:var(--dorado); line-height:1;} .comarca-stat .stat-txt span{font-size:0.88rem; color:var(--dorado); font-weight:600;} /* A anchos de portátil habituales (1366-1535px, entre el corte a 1 columna a 1000px y el punto en que la caja ya es lo bastante ancha) el 3er dato ("Almazaras familiares") bajaba a una 2ª línea. En vez de estrechar la columna de texto de la izquierda (lo que el usuario pidió mantener ancho) o el ancho total de la caja, se reduce un poco el tamaño de iconos/números SOLO en este rango — a partir de 1536px se mantienen los tamaños grandes de siempre. */ @media(min-width:1001px) and (max-width:1535px){ .comarca-stat{gap:9px;} .comarca-stat-row{gap:16px 12px;} .comarca-stat .stat-ico{width:40px; height:40px;} .comarca-stat:first-child .stat-ico{width:56px; height:42px;} .comarca-stat .stat-txt b{font-size:1.55rem;} .comarca-stat .stat-txt span{font-size:0.75rem;} } /* ---------- «Origen verificado» sin caja: sello circular + texto suelto sobre la foto + datos en fila ---------- */ .comarca-mapa{ background:none; border:none; box-shadow:none; border-radius:0; padding:0; isolation:isolate; text-align:center; display:flex; flex-direction:column; align-items:center; margin-top:0; /* sube el bloque entero 20 px (~0,5 cm) respecto a antes (20 px) */ } .comarca-mapa::before{ /* difuminado oscuro y suave detras del texto (sin bordes) para que se lea sobre las ramas */ z-index:-1; inset:-46px -34px -38px; border:none; border-radius:0; background:radial-gradient(ellipse 62% 58% at 50% 46%, rgba(9,20,19,.70) 0%, rgba(9,20,19,.46) 55%, rgba(9,20,19,0) 100%); } .comarca-mapa .etiqueta{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* el sello ya dice «Origen verificado» */ .comarca-mapa .sello{ width:172px; height:172px; margin:0 0 6px; filter:drop-shadow(0 14px 26px rgba(0,0,0,.45)); } .comarca-mapa h3{ margin-top:8px; font-size:2.4rem; text-shadow:0 2px 16px rgba(0,0,0,.55); } .comarca-mapa p{ text-align:center; color:#fff; font-size:1rem; max-width:44ch; text-shadow:0 1px 3px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.55); } .comarca-mapa .comarca-stat-row{ flex-wrap:nowrap; gap:0; margin-top:26px; padding-top:22px; border-top:1px solid rgba(246,242,231,.35); width:100%; justify-content:center; } .comarca-mapa .comarca-stat{ display:block; flex:1 1 0; min-width:0; text-align:center; padding:0 12px; } .comarca-mapa .comarca-stat + .comarca-stat{ border-left:1px solid rgba(246,242,231,.35); } .comarca-mapa .comarca-stat .stat-txt b{ font-size:2.1rem; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5); } .comarca-mapa .comarca-stat .stat-txt span{ display:block; margin-top:6px; font-size:.78rem; letter-spacing:.06em; color:#DDBA45; text-shadow:0 1px 8px rgba(0,0,0,.6); } @media(min-width:1001px) and (max-width:1535px){ .comarca-mapa .comarca-stat{ padding:0 8px; } .comarca-mapa .comarca-stat .stat-txt b{ font-size:1.6rem; } .comarca-mapa .comarca-stat .stat-txt span{ font-size:.72rem; letter-spacing:.03em; } .comarca-mapa h3{ font-size:2.1rem; } } @media(max-width:560px){ .comarca-mapa .sello{ width:140px; height:140px; } .comarca-mapa h3{ font-size:1.9rem; } .comarca-mapa .comarca-stat{ padding:0 6px; } .comarca-mapa .comarca-stat .stat-txt b{ font-size:1.3rem; } .comarca-mapa .comarca-stat .stat-txt span{ font-size:.66rem; letter-spacing:0; } } /* ---------- PRODUCTOS ---------- */ .productos{background:var(--crema);} .productos-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;} /* Cabecera de campaña sobre cada fila de fichas del catálogo (22 sep 2026): cuando llegue la campaña 26/27 se añade una segunda fila duplicando este mismo bloque + un nuevo .producto-grid; el margen superior lo pone esta cabecera, no la rejilla, para que las filas se apilen solas. */ .producto-grupo-campana{ display:flex; align-items:center; gap:16px; margin-top:60px; font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cobre-logo); } .producto-grupo-campana::after{content:""; flex:1 1 auto; height:1px; background:var(--cobre-logo); opacity:.35;} .producto-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; margin-top:28px; } @media(max-width:1000px){ .producto-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:560px){ .producto-grid{grid-template-columns:1fr;} } .producto-card{ background:var(--crema); padding:34px 26px; position:relative; border:1px solid var(--borde); border-radius:22px; display:flex; flex-direction:column; color:inherit; text-decoration:none; cursor:pointer; transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .producto-card::after{ content:"Ver producto →"; position:absolute; left:26px; bottom:-2px; opacity:0; font-size:0.8rem; font-weight:700; letter-spacing:0.04em; color:var(--cobre-logo); transition:opacity .3s ease, bottom .3s ease; } .producto-card:hover::after{opacity:1; bottom:14px;} .producto-card:hover{padding-bottom:52px;} .producto-card:hover{ background:#fff; border-color:var(--tierra-oscura); box-shadow:0 16px 32px rgba(44,58,30,0.10); transform:translateY(-3px); } .producto-tag{ display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--tierra-oscura); border:1px solid var(--tierra-oscura); padding:5px 11px; border-radius:20px; margin-bottom:22px; align-self:flex-start; } .producto-visual{ height:260px; border-radius:16px; margin-bottom:24px; position:relative; overflow:hidden; background:linear-gradient(160deg, var(--crema-oscura), #E4DCC6); display:flex; align-items:center; justify-content:center; } .producto-visual img{ max-width:78%; max-height:82%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 14px 18px rgba(44,58,30,0.16)); transition:transform .4s ease; } .producto-card:hover .producto-visual img{transform:scale(1.04);} .producto-card h3{font-size:1.2rem; margin-bottom:10px;} .producto-card p{color:#5C5E4E; font-size:0.92rem; margin-bottom:22px; text-align:justify;} .producto-precio{ display:flex; justify-content:space-between; align-items:baseline; padding-top:18px; border-top:1px solid var(--borde); margin-top:auto; } .producto-precio b{font-family:'Fraunces', serif; font-size:1.4rem; color:var(--verde-oscuro);} .producto-precio span{font-size:0.8rem; color:#8A8C78;} /* ---------- PROCESO ---------- */ .proceso{background:var(--turquesa); color:var(--crema);} .proceso .eyebrow{color:var(--ambar);} .proceso .titulo-seccion{color:#fff;} .proceso .lead{color:rgba(246,242,231,0.78);} /* Alineado con la seccion Historia: misma anchura maxima y por tanto mismo margen izquierdo. container-type permite calcular (en cqw) el hueco real entre ventanas para la linea que las une. */ .proceso .wrap{ max-width:1440px; container-type:inline-size; } /* Ventanas con el tamaño original (261x280); lo que sobra de ancho se reparte ENTRE ventanas (la primera queda en el margen izquierdo de la seccion y la ultima en el derecho). */ .proceso-grid{ --n:4; --w:min(235px, calc((100cqw - 3 * 28px) / 4)); --enlace:calc((100cqw - var(--n) * var(--w)) / (var(--n) - 1) + var(--w)); display:grid; grid-template-columns:repeat(var(--n), var(--w)); justify-content:space-between; row-gap:64px; margin-top:64px; } @media(max-width:900px){ .proceso-grid{ --n:2; --w:min(235px, calc((100cqw - 32px) / 2)); } } @media(max-width:560px){ .proceso-grid{ --n:1; --w:100cqw; grid-template-columns:minmax(0,1fr); } } .proceso-step{ display:flex; flex-direction:column; outline:none; } /* Titulo fuera de la imagen, centrado encima de la ventana y subrayado */ .paso-titulo{ margin:0 0 22px; color:#fff; font-size:clamp(1.1rem, 1.5vw, 1.3rem); line-height:1.15; display:flex; align-items:flex-end; justify-content:center; text-align:center; } .paso-titulo span{ text-decoration:underline; text-decoration-color:#DDBA45; text-decoration-thickness:2px; text-underline-offset:9px; } .paso-titulo .paso-n{ color:#DDBA45; } @media(min-width:901px){ .paso-titulo{ white-space:nowrap; } } /* Carta que se da la vuelta */ .paso-carta{ position:relative; width:var(--w); aspect-ratio:261/280; perspective:1400px; cursor:pointer; } @media(max-width:560px){ .paso-carta{ aspect-ratio:auto; height:250px; } } /* Linea desde el centro de esta ventana hasta el centro de la siguiente (queda oculta bajo las ventanas) */ .paso-carta::before{ content:""; position:absolute; z-index:0; left:50%; top:50%; height:1px; transform:translateZ(-2px); width:calc(var(--w) + 60px); background:rgba(221,186,69,0.7); } @supports (width:1cqw){ .paso-carta::before{ width:var(--enlace); } } .proceso-step:last-child .paso-carta::before{ display:none; } @media(max-width:900px){ .proceso-step:nth-child(even) .paso-carta::before{ display:none; } } @media(max-width:560px){ .paso-carta::before{ display:none; } } .paso-inner{ position:absolute; z-index:1; inset:0; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.4,.2,.2,1); } .paso-cara{ position:absolute; inset:0; border-radius:20px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:1px solid var(--pistacho); } /* Foto real (antes era background-image en .paso-cara, sin alt: mala para SEO/accesibilidad). object-fit:cover reproduce el mismo encuadre que tenía background-size:cover. */ .paso-foto{ width:100%; height:100%; object-fit:cover; display:block; } .paso-dorso{ transform:rotateY(180deg); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:26px 24px; } .paso-dorso::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,44,42,0.90), rgba(14,32,30,0.95)); } .paso-dorso::after{ content:""; position:relative; z-index:1; order:-1; width:38px; height:2px; background:#DDBA45; margin-bottom:18px; } .paso-dorso p{ position:relative; z-index:1; margin:0; color:rgba(246,242,231,0.94); font-size:.97rem; line-height:1.6; text-align:center; } @media(hover:hover){ .paso-carta:hover .paso-inner{ transform:rotateY(180deg); } } .proceso-step:focus-visible .paso-inner, .proceso-step.abierto .paso-inner{ transform:rotateY(180deg); } .proceso-step:focus-visible .paso-carta{ outline:2px solid #DDBA45; outline-offset:6px; border-radius:22px; } @media(prefers-reduced-motion: reduce){ .paso-inner{ transition:none; } } /* ---------- TESTIMONIOS ---------- */ .testimonios{background:var(--crema); overflow:hidden;} /* Misma anchura maxima (y margen izquierdo) que Historia y Proceso */ .testimonios .wrap{ max-width:1440px; } .testimonios-head{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;} /* Valoracion de Google: insignia redonda. 5 estrellas (2 arriba, 3 abajo), «5/5» y «Reseñas de Google» */ .testimonios-rating{ width:196px; height:196px; border-radius:50%; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at 50% 35%, #fff 0%, var(--crema-oscura) 100%); border:2px solid rgba(201,162,39,0.55); box-shadow:0 0 0 7px rgba(201,162,39,0.10), 0 18px 34px -18px rgba(32,64,62,0.45); } .rating-estrellas{ color:var(--dorado); font-size:1.4rem; line-height:1.05; letter-spacing:5px; } .rating-estrellas span{ display:block; padding-left:5px; } .rating-nota{ font-family:'Fraunces', serif; font-weight:600; font-size:2.1rem; line-height:1; color:var(--verde-oscuro); margin-top:9px; } .rating-fuente{ font-size:0.74rem; color:#6B6D5C; margin-top:5px; letter-spacing:.02em; } @media(max-width:700px){ .testimonios-rating{ width:170px; height:170px; margin:0 auto; } .rating-estrellas{ font-size:1.2rem; } .rating-nota{ font-size:1.8rem; } } /* Opiniones en anillo: la del centro va grande y las demas quedan detras, mas pequeñas, en triangulo. La posicion de cada tarjeta la calcula el script (transform); aqui solo el escenario y la tarjeta. */ .opiniones{ margin-top:36px; } .opiniones-anillo{ display:grid; justify-items:center; position:relative; touch-action:pan-y; padding-top:110px; padding-bottom:26px; } .testimonio-card{padding:40px 38px; display:flex; flex-direction:column; border:1px solid var(--borde); border-radius:18px;} .opiniones-anillo .testimonio-card{ grid-area:1 / 1; width:min(560px, 100%); box-sizing:border-box; background:#FFFDF8; cursor:pointer; user-select:none; box-shadow:0 14px 30px -20px rgba(32,64,62,0.45); transition:transform .85s cubic-bezier(.22,.8,.24,1), filter .85s ease, box-shadow .85s ease; will-change:transform; } .opiniones-anillo .testimonio-card.activa{ cursor:default; box-shadow:0 30px 60px -26px rgba(32,64,62,0.5); } .opiniones-controles{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:8px; } .opiniones-flecha{ width:46px; height:46px; border-radius:50%; cursor:pointer; border:1.5px solid rgba(201,162,39,0.75); background:transparent; color:var(--verde-oscuro); display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease; } .opiniones-flecha:hover{ background:var(--dorado); color:var(--turquesa); } .opiniones-flecha svg{ width:20px; height:20px; } .opiniones-puntos{ display:flex; gap:10px; } .opiniones-puntos button{ width:10px; height:10px; border-radius:50%; padding:0; cursor:pointer; border:none; background:rgba(32,64,62,0.22); transition:background .2s ease, transform .2s ease; } .opiniones-puntos button.activo{ background:var(--dorado); transform:scale(1.3); } @media(prefers-reduced-motion: reduce){ .opiniones-anillo .testimonio-card{ transition:none; } } @media(max-width:640px){ .opiniones-anillo .testimonio-card{ padding:30px 24px; } } .testimonio-estrellas{color:var(--dorado); font-size:0.95rem; letter-spacing:2px; margin-bottom:18px;} .testimonio-texto{ font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem; line-height:1.55; color:#3A3C2E; flex-grow:1; } .testimonio-autor{ display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:20px; border-top:1px solid var(--borde); } .testimonio-avatar{ width:42px; height:42px; border-radius:50%; background:var(--turquesa); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:600; font-size:0.95rem; flex-shrink:0; } .testimonio-nombre{font-weight:700; font-size:0.92rem; color:var(--verde-oscuro);} .testimonio-fuente{font-size:0.78rem; color:#8A8C78;} /* ---------- CTA FINAL ---------- */ .cta-final{ position:relative; background-image: linear-gradient(180deg, rgba(10,8,4,0.55) 0%, rgba(10,8,4,0.35) 40%, rgba(8,6,3,0.82) 100%), none; background-size:cover; background-position:center 38%; color:#fff; text-align:center; overflow:hidden; padding-top:140px; padding-bottom:140px; } .cta-final h2{color:#fff; max-width:none;} .cta-final p{color:rgba(255,255,255,0.9); max-width:48ch; margin:20px auto 0;} .cta-actions{display:flex; justify-content:center; gap:16px; margin-top:38px; flex-wrap:wrap;} .cta-final .btn-primary{background:linear-gradient(180deg,#DDBA45,var(--dorado)); color:var(--verde-oscuro);} .cta-final .btn-ghost{box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1.5px rgba(255,255,255,.7);} /* ---------- FOOTER ---------- */ footer{background:var(--turquesa); color:rgba(246,242,231,0.65); padding:64px 0 32px;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; align-items:baseline;} @media(max-width:780px){ .footer-grid{grid-template-columns:1fr; gap:36px;} } .footer-grid h4{color:#fff; font-family:'Karla',sans-serif; font-size:0.92rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:16px; line-height:1.2;} .footer-grid a, .footer-grid p{font-size:1.02rem; color:rgba(246,242,231,0.65); display:block; margin-bottom:10px;} .footer-brand{font-family:'Fraunces', serif; font-size:1.5rem; color:#fff; margin-bottom:16px; line-height:1.2;} .footer-bottom{ margin-top:56px; padding-top:26px; border-top:1px solid rgba(246,242,231,0.15); display:flex; justify-content:space-between; font-size:0.8rem; flex-wrap:wrap; gap:10px; } /* ---------- REVEAL ---------- IMPORTANTE: el contenido es VISIBLE por defecto. La animación de aparición SOLO se activa si el JavaScript añade la clase 'js-anim' al . Así, si el JS no se ejecuta o el navegador (p. ej. Safari iOS) no coopera, el contenido se ve igualmente. */ .reveal{opacity:1; transform:none;} html.js-anim .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; } html.js-anim .reveal.in{opacity:1; transform:translateY(0);} @media (prefers-reduced-motion: reduce){ html.js-anim .reveal{opacity:1; transform:none; transition:none;} .franja-track{animation:none;} html{scroll-behavior:auto;} } /* ========================================================= CORRECCIONES EXCLUSIVAS PARA SAFARI EN iOS (iPhone/iPad) Todo lo de aquí se activa SOLO con la clase .ios-safari que añade el JavaScript al detectar Safari sobre iOS. Android, Chrome y escritorio NO entran aquí: se quedan exactamente igual que antes. ========================================================= */ /* (0) Evita scroll horizontal por la franja animada, solo iOS */ html.ios-safari, html.ios-safari body{ overflow-x:hidden; } /* ===== CORRECCIONES RESPONSIVE GLOBALES (evitar margen/scroll horizontal) ===== */ html, body{ overflow-x:hidden; max-width:100%; } *{ min-width:0; } img{ max-width:100%; height:auto; } /* La tarjeta "Origen verificado" no debe quedar sticky ni desbordar en pantallas medianas/pequeñas (tablet y móvil), en TODOS los navegadores, no solo iOS. */ @media(max-width:1000px){ .comarca-grid{ grid-template-columns:1fr !important; gap:40px; } .comarca-mapa{ position:static !important; top:auto !important; margin-top:24px; } .prod-hero-grid{ grid-template-columns:1fr !important; gap:40px; } .zig-grid{ grid-template-columns:1fr !important; gap:32px; } .zig.rev .zig-visual, .zig.rev .zig-texto{ order:0 !important; } .historia-grid{ grid-template-columns:1fr !important; gap:36px; } .ficha-grid{ grid-template-columns:repeat(2,1fr) !important; } .footer-grid{ grid-template-columns:1fr !important; gap:30px; } } @media(max-width:560px){ .wrap{ padding-left:20px; padding-right:20px; } .ficha-grid{ grid-template-columns:1fr !important; } .news-input-row{ flex-direction:column; } } /* (1) Altura real del hero en Safari iOS. En iOS 100vh no descuenta la barra del navegador. */ html.ios-safari .hero{ height:100svh; height:-webkit-fill-available; min-height:-webkit-fill-available; } /* (2) Fallback del vídeo del hero: Safari iOS NO reproduce vídeo desde data: URI, así que ocultamos el