/* ==========================================================================
   FARMACIA PORTELIÑA — Design tokens
   Verde botica + ámbar de bote de farmacia + cruz de marca
   ========================================================================== */
@font-face{
  font-family:'Poppins';
  src:url('../fonts/Poppins-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('../fonts/Poppins-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('../fonts/Poppins-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('../fonts/Poppins-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
:root{
  /* Neutros dominantes */
  --negro:#0A0A0A;
  --negro-suave:#1A1A1A;
  --blanco:#FFFFFF;
  --gris-claro:#F4F4F2;
  --gris-claro-2:#E9E9E6;
  --tinta:#141414;
  --gris:#5B5B58;
  /* Acento de marca: verde oscuro */
  --verde-profundo:#0F332D;
  --verde-cruz:#1F5C4F;
  --verde-claro:#3C8670;
  --verde-acento:#1F5C4F;
  --verde-brillante:#6FBE9C;
  /* Alias de compatibilidad (mismos nombres, nueva paleta) */
  --menta:var(--gris-claro);
  --menta-2:var(--gris-claro-2);
  --ambar:var(--verde-acento);
  --ambar-claro:var(--verde-brillante);
  --linea:rgba(0,0,0,0.12);
  --radius-cross:30px 30px 30px 6px;
  --radius-cross-inv:6px 30px 30px 30px;
  --sombra: 0 20px 45px -20px rgba(0,0,0,0.35);
  --ff-display:'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --ff-body:'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --header-h: 92px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--ff-display); margin:0; font-weight:600; line-height:1.08; letter-spacing:0em;}
p{margin:0; line-height:1.65;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:3px solid var(--ambar); outline-offset:3px; border-radius:4px;}
.container{width:min(1180px, calc(100% - 64px)); margin-inline:auto;}
.eyebrow{
  font-family:var(--ff-mono); text-transform:uppercase; letter-spacing:0.03em; font-size:1rem;
  color:var(--verde-cruz); display:flex; align-items:center; gap:10px; margin-bottom:14px; font-weight:500;
}
.eyebrow .cruz-mini{width:14px; height:14px;}
.eyebrow .cruz-mini path{fill:var(--ambar);}

/* Stable content, including when scripts are unavailable. */
.reveal,.reveal-img{opacity:1;transform:none;}

/* ==================== HEADER ==================== */
.skip-link{position:absolute; left:-999px; top:0; background:var(--ambar); color:var(--tinta); padding:12px 18px; z-index:999; font-family:var(--ff-mono);}
.skip-link:focus{left:12px; top:12px;}

header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:600;
  background:rgba(0,0,0,0.94); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:box-shadow .3s ease;
  height:var(--header-h);
  display:flex; align-items:center;
}
header.site-header.scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,0.5);}
.header-inner{display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:14px;}
.brand .brand-cross{height:80px; width:auto;}
.brand .brand-wordmark{height:44px; width:auto;}

nav.main-nav{display:flex; align-items:center; gap:2px;}
nav.main-nav a{
  color:var(--menta-2); font-size:0.92rem; padding:10px 16px; border-radius:999px; position:relative; font-weight:500;
  transition:color .25s ease, background .25s ease;
}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--blanco); background:rgba(255,255,255,0.08);}

.header-cta{display:flex; align-items:center; gap:10px;}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:var(--radius-cross);
  font-weight:600; font-size:0.92rem; border:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-negro{background:var(--negro); color:var(--blanco); box-shadow:0 10px 24px -10px rgba(0,0,0,0.35);}
.btn-negro:hover{background:var(--negro-suave);}
.btn-blanco{background:var(--blanco); color:var(--negro); box-shadow:0 10px 24px -10px rgba(0,0,0,0.35);}
.btn-blanco:hover{background:var(--gris-claro);}
.btn-outline{background:transparent; color:var(--blanco); border:1.5px solid rgba(255,255,255,0.4);}
.btn-outline:hover{border-color:var(--blanco); background:rgba(255,255,255,0.08);}
.btn-verde{background:var(--verde-cruz); color:var(--blanco);}
.btn-verde:hover{background:var(--verde-claro);}
.btn-sm{padding:9px 16px; font-size:0.82rem;}

.burger{display:none; background:none; border:none; width:44px; height:44px; position:relative; z-index:700;}
.burger span{display:block; width:26px; height:2px; background:var(--blanco); margin:6px auto; transition:.3s;}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.nav-scrim{
  position:fixed; inset:0; background:rgba(6,18,15,0.55); z-index:590; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.nav-scrim.show{opacity:1; pointer-events:auto;}

/* ==================== PAGE HEADER (páginas internas) ==================== */
.page-hero{
  background:radial-gradient(120% 100% at 85% 0%, #14231F 0%, #0B0B0B 55%, #000000 100%);
  padding:calc(var(--header-h) + 70px) 0 70px;
  color:var(--blanco);
  position:relative; overflow:hidden;
}
.page-hero .hero-grain{position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px); background-size:22px 22px; pointer-events:none;}
.page-hero .eyebrow{color:var(--ambar-claro);}
.page-hero .eyebrow path{fill:var(--ambar-claro);}
.page-hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem); max-width:20ch; position:relative; z-index:1;}
.page-hero p:not(.eyebrow){color:var(--menta-2); font-size:1.08rem; max-width:56ch; margin-top:18px; position:relative; z-index:1;}
.breadcrumb{font-family:var(--ff-mono); font-size:0.72rem; color:var(--menta-2); text-transform:uppercase; letter-spacing:0.025em; margin-bottom:18px; position:relative; z-index:1;}
.breadcrumb a{color:var(--ambar-claro);}
.breadcrumb a:hover{text-decoration:underline;}

/* ==================== HERO (home) ==================== */
.hero{
  position:relative;
  min-height:100svh; min-height:100dvh;
  display:flex; align-items:center;
  background:radial-gradient(120% 90% at 80% 0%, #14231F 0%, #0B0B0B 55%, #000000 100%);
  overflow:hidden; padding-top:calc(var(--header-h) + 34px); padding-bottom:110px;
}
.hero-cross{
  position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:min(58vw, 780px); opacity:0.9;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(-50%) rotate(0deg);} 50%{transform:translateY(-53%) rotate(3deg);}}
.hero-cross path{fill:none; stroke:rgba(255,255,255,0.14); stroke-width:1.4;}
.hero-cross .fill{fill:rgba(255,255,255,0.05); stroke:none;}
.hero-grain{position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px); background-size:22px 22px; pointer-events:none;}
.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:end;}
.hero-copy .eyebrow{color:var(--ambar-claro);}
.hero-copy .eyebrow path{fill:var(--ambar-claro);}
.hero-copy h1{color:var(--blanco); font-size:clamp(2.2rem, 4.6vw, 4.1rem); max-width:14ch;}
.hero-copy h1 em{font-style:italic; color:var(--blanco);}
.hero-copy p:not(.eyebrow){color:var(--menta-2); font-size:1.1rem; max-width:46ch; margin-top:20px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px;}
.hero-badges{display:flex; gap:26px; margin-top:48px; flex-wrap:wrap;}
.hero-badges div{color:var(--menta-2); font-family:var(--ff-mono); font-size:0.78rem; display:flex; align-items:center; gap:8px;}
.hero-badges strong{color:var(--blanco); font-family:var(--ff-body); font-weight:600; display:block; font-size:0.95rem;}

.hero-side{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-cross);
  padding:22px; backdrop-filter:blur(6px);
}
.hero-side img{border-radius:var(--radius-cross-inv); width:100%; height:260px; object-fit:cover;}
.hero-side .cap{color:var(--menta-2); font-family:var(--ff-mono); font-size:0.75rem; margin-top:14px; display:flex; justify-content:space-between;}

.scroll-cue{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;}
.scroll-cue span{font-family:var(--ff-mono); font-size:0.68rem; color:var(--menta-2); letter-spacing:0.03em; text-transform:uppercase;}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--ambar), transparent); animation:pulse-line 1.8s ease-in-out infinite;}
@keyframes pulse-line{0%,100%{opacity:0.3;} 50%{opacity:1;}}

/* ==================== ONDA / DIVISOR RÍA ==================== */
.wave{display:block; width:100%; line-height:0;}
.wave svg{width:100%; height:60px; display:block;}

/* ==================== SECCIONES GENERALES ==================== */
section{position:relative;}
.section-pad{padding:100px 0;}
.bg-menta{background:var(--menta);}
.bg-verde{background:var(--negro); color:var(--blanco);}
.bg-blanco{background:var(--blanco);}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(1.9rem, 3.4vw, 2.7rem);}
.section-head p:not(.eyebrow){margin-top:16px; font-size:1.08rem; color:var(--gris);}
.bg-verde .section-head p:not(.eyebrow){color:var(--menta-2);}
.section-head.center{margin-inline:auto; text-align:center;}

/* ==================== NOSOTROS / TEASERS ==================== */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.about-imgs{position:relative; height:460px;}
.about-imgs img{position:absolute; border-radius:var(--radius-cross); object-fit:cover; box-shadow:var(--sombra);}
.about-imgs .img-a{width:78%; height:400px; top:0; left:0;}
.about-imgs .img-b{width:52%; height:230px; bottom:0; right:0; border:6px solid var(--blanco); border-radius:var(--radius-cross-inv);}
.about-copy p:not(.eyebrow){color:var(--gris); font-size:1.05rem; margin-top:18px;}
.about-copy p:first-of-type{margin-top:20px;}
.mini-stats{display:flex; gap:34px; margin-top:36px; flex-wrap:wrap;}
.mini-stats div strong{font-family:var(--ff-display); font-size:1.7rem; color:var(--verde-cruz); display:block;}
.mini-stats div span{font-family:var(--ff-mono); font-size:0.72rem; color:var(--gris); text-transform:uppercase; letter-spacing:0.025em;}

/* ==================== SERVICIOS ==================== */
.servicios-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;}
.servicios-grid.cols-2{grid-template-columns:repeat(2, 1fr); max-width:900px; margin-inline:auto;}
.servicio-card{
  background:var(--blanco); border-radius:var(--radius-cross); overflow:hidden; border:1px solid var(--linea);
  transition:transform .35s ease, box-shadow .35s ease; display:flex; flex-direction:column;
}
.servicio-card:hover{transform:translateY(-8px); box-shadow:var(--sombra);}
.servicio-card .img-wrap{height:190px; overflow:hidden;}
.servicio-card .img-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.servicio-card:hover .img-wrap img{transform:scale(1.08);}
.servicio-card .body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.servicio-card .num{font-family:var(--ff-mono); font-size:0.72rem; color:var(--ambar); letter-spacing:0.025em;}
.servicio-card h3{font-size:1.18rem; font-weight:600;}
.servicio-card p{color:var(--gris); font-size:0.94rem;}

/* ==================== PRODUCTOS / MARCAS ==================== */
.productos{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;}
.productos-img{border-radius:var(--radius-cross-inv); overflow:hidden; box-shadow:var(--sombra); height:520px;}
.productos-img img{width:100%; height:100%; object-fit:cover;}
.tag-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.tag-list span{
  font-family:var(--ff-mono); font-size:0.76rem; background:var(--menta); color:var(--verde-cruz); padding:8px 14px; border-radius:999px;
}

.marcas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.marca-card{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radius-cross); padding:0; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;
}
.marca-card:hover{transform:translateY(-6px); box-shadow:var(--sombra);}
.marca-card .marca-badge{
  height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:var(--negro); position:relative; overflow:hidden; padding:16px;
}
.marca-card .marca-badge::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size:16px 16px;}
.marca-card .marca-icon{position:relative; z-index:1; width:44px; height:44px; display:block;}
.marca-card .marca-icon svg{width:100%; height:100%;}
.marca-card .marca-icon svg *{stroke:var(--ambar-claro);}
.marca-card .marca-badge img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:0;}
.marca-card .marca-name{
  font-family:var(--ff-display); font-style:italic; font-weight:500; font-size:1.5rem; color:var(--blanco); position:relative; z-index:1; text-align:center; padding:0 16px; line-height:1.2;
}
.marca-card .body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1;}
.marca-card .marca-title{font-size:1.15rem; font-weight:600; color:var(--tinta);}
.marca-card .cat{font-family:var(--ff-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.025em; color:var(--ambar);}
.marca-card p{color:var(--gris); font-size:0.92rem;}

/* ==================== EQUIPO ==================== */
.equipo-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:30px 26px;}
.equipo-grid.teaser{grid-template-columns:1fr; max-width:640px; margin-inline:auto;}
.persona{text-align:left;}
.persona .foto{border-radius:var(--radius-cross); overflow:hidden; height:auto; aspect-ratio:1/1; box-shadow:var(--sombra); position:relative;}
.persona .foto img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.persona:hover .foto img{transform:scale(1.06);}
.persona .foto::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,51,45,0.55), transparent 45%);}
.persona h3{margin-top:18px; font-size:1.2rem;}
.persona .rol{font-family:var(--ff-mono); font-size:0.74rem; color:var(--ambar); text-transform:uppercase; letter-spacing:0.025em; margin-top:4px; display:block;}
.persona p{color:var(--gris); font-size:0.93rem; margin-top:10px;}

.equipo-teaser-block{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.equipo-teaser-img{border-radius:var(--radius-cross); overflow:hidden; box-shadow:var(--sombra); height:auto; aspect-ratio:4/3; background:var(--blanco);}
.equipo-teaser-img img{width:100%; height:100%; object-fit:cover; object-position:50% 60%;}

.filosofia{
  margin-top:80px; background:var(--negro); border-radius:var(--radius-cross); padding:56px; color:var(--blanco);
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; overflow:hidden; position:relative;
}
.filosofia::before{content:"\201C"; position:absolute; top:-10px; left:24px; font-family:var(--ff-display); font-size:9rem; color:rgba(255,255,255,0.06); line-height:1;}
.filosofia img{border-radius:var(--radius-cross-inv); height:320px; width:100%; object-fit:cover;}
.filosofia blockquote{font-family:var(--ff-display); font-size:1.5rem; font-weight:400; line-height:1.4; font-style:italic; margin:0;}
.filosofia figcaption{margin-top:20px; font-family:var(--ff-mono); font-size:0.78rem; color:var(--menta-2);}

/* ==================== NOTICIAS ==================== */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.blog-grid.teaser{grid-template-columns:repeat(2,1fr); max-width:820px; margin-inline:auto;}
.blog-card{display:block; border-radius:var(--radius-cross); overflow:hidden; border:1px solid var(--linea); background:var(--blanco); transition:transform .3s ease, box-shadow .3s ease;}
.blog-card:hover{transform:translateY(-6px); box-shadow:var(--sombra);}
.blog-card .img-wrap{height:170px; background:var(--menta-2); overflow:hidden; position:relative;}
.blog-card .img-wrap .img-bg{position:absolute; inset:-10px; background-size:cover; background-position:center; filter:blur(18px) brightness(0.92) saturate(1.1); transform:scale(1.15); z-index:0;}
.blog-card .img-wrap img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; transition:transform .6s ease;}
.blog-card:hover .img-wrap img{transform:scale(1.06);}
.blog-card .img-wrap svg{width:44px; height:44px;}
.blog-card .body{padding:22px;}
.blog-card .cat{font-family:var(--ff-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--verde-cruz);}
.blog-card h3{font-size:1.06rem; margin-top:10px; line-height:1.35;}
.blog-card p{font-size:0.9rem; color:var(--gris); margin-top:10px;}
.blog-card .leer{margin-top:16px; display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:0.88rem; color:var(--verde-cruz);}
.blog-card .leer svg{width:15px; height:15px; flex:none;}

/* ==================== CONFIANZA ==================== */
.confianza{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--radius-cross); overflow:hidden;}
.confianza div{background:var(--blanco); padding:34px 24px; text-align:center;}
.confianza svg{width:30px; height:30px; margin-inline:auto; margin-bottom:14px;}
.confianza svg path{stroke:var(--verde-cruz);}
.confianza strong{display:block; font-family:var(--ff-body); font-size:0.98rem; margin-bottom:4px;}
.confianza span{font-size:0.82rem; color:var(--gris);}

/* ==================== FAQ ==================== */
.faq-list{max-width:820px; margin-inline:auto;}
.faq-item{border-bottom:1px solid var(--linea);}
.faq-q{
  width:100%; background:none; border:none; text-align:left; padding:24px 4px; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--ff-display); font-size:1.1rem; font-weight:500; color:var(--tinta); gap:20px;
}
.faq-q .plus{width:22px; height:22px; flex:none; position:relative;}
.faq-q .plus::before, .faq-q .plus::after{content:""; position:absolute; background:var(--verde-cruz); border-radius:2px;}
.faq-q .plus::before{width:100%; height:2px; top:50%; left:0; transform:translateY(-50%);}
.faq-q .plus::after{width:2px; height:100%; left:50%; top:0; transform:translateX(-50%); transition:transform .3s ease;}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.faq-a p{padding:0 4px 24px; color:var(--gris);}

/* ==================== CONTACTO ==================== */
.contacto-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.form-card{background:var(--blanco); border-radius:var(--radius-cross); padding:36px; box-shadow:var(--sombra); border:1px solid var(--linea);}
.field{margin-bottom:18px;}
.field label{display:block; font-family:var(--ff-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.02em; color:var(--verde-cruz); margin-bottom:8px;}
.field input, .field textarea{
  width:100%; border:1.5px solid var(--linea); border-radius:12px; padding:13px 15px; font-family:var(--ff-body); font-size:0.98rem;
  background:var(--menta); transition:border-color .25s ease;
}
.field input:focus, .field textarea:focus{border-color:var(--verde-cruz); outline:none;}
.field textarea{resize:vertical; min-height:120px;}
.consent{display:flex; align-items:flex-start; gap:10px; font-size:0.82rem; color:var(--gris); margin-bottom:20px;}
.consent input{margin-top:3px;}
.hp-field{position:absolute; left:-9999px; top:-9999px;}

.info-card{background:var(--negro); color:var(--blanco); border-radius:var(--radius-cross-inv); padding:36px; margin-bottom:22px;}
.info-row{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.12);}
.info-row:last-child{border-bottom:none;}
.info-row svg{width:22px; height:22px; flex:none; margin-top:2px;}
.info-row svg path{stroke:var(--ambar-claro);}
.info-row svg circle{stroke:var(--ambar-claro);}
.info-row svg circle.pin-dot{fill:var(--ambar-claro); stroke:none;}
.info-row strong{display:block; font-size:0.95rem; margin-bottom:4px;}
.info-row span, .info-row a{color:var(--menta-2); font-size:0.92rem;}
.map-embed{border-radius:var(--radius-cross); overflow:hidden; height:280px; border:1px solid var(--linea); filter:grayscale(0.15);}
.map-embed iframe{width:100%; height:100%; border:0;}
.social-row{display:flex; gap:12px; margin-top:20px;}
.social-row a{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; transition:.25s;}
.social-row a:hover{background:var(--ambar); }
.social-row svg{width:18px; height:18px;}
.social-row svg path{fill:var(--blanco);}

/* ==================== GRACIAS / LEGAL PAGES ==================== */
.simple-page{padding:calc(var(--header-h) + 90px) 0 110px; min-height:70vh;}
.simple-page.center{text-align:center;}
.simple-page .icon-ok{width:74px; height:74px; margin-inline:auto 26px; border-radius:50%; background:var(--menta); display:flex; align-items:center; justify-content:center;}
.simple-page .icon-ok svg{width:34px; height:34px;}
.simple-page .icon-ok svg path{stroke:var(--verde-cruz);}
.legal-content{max-width:760px;}
.legal-content h2{font-size:1.7rem; margin-top:44px; margin-bottom:14px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--gris); margin-bottom:14px; font-size:1rem;}
.legal-updated{font-family:var(--ff-mono); font-size:0.78rem; color:var(--gris); margin-bottom:40px; display:block;}

/* ==================== FOOTER ==================== */
footer{background:var(--negro); color:var(--menta-2); padding:70px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.08);}
.footer-brand{display:flex; gap:14px; align-items:center; margin-bottom:16px;}
.footer-brand .brand-cross{height:52px; width:auto;}
.footer-brand .brand-wordmark{height:38px; width:auto;}
footer p.desc{font-size:0.9rem; max-width:32ch; line-height:1.6;}
footer h4{font-family:var(--ff-mono); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.03em; color:var(--ambar-claro); margin-bottom:18px;}
footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}
footer ul a{font-size:0.9rem; transition:color .2s;}
footer ul a:hover{color:var(--blanco);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:14px; font-size:0.8rem;}
.footer-bottom .legal-links{display:flex; gap:20px; flex-wrap:wrap;}
.footer-bottom .legal-links a, .footer-bottom .legal-links button{background:none; border:none; color:var(--menta-2); font-size:0.8rem; font-family:inherit; padding:0;}
.footer-bottom .legal-links a:hover, .footer-bottom .legal-links button:hover{color:var(--ambar-claro); text-decoration:underline;}

/* ==================== FLOTANTES ==================== */
.floaters{position:fixed; right:22px; bottom:22px; z-index:400; display:flex; flex-direction:column; gap:12px; align-items:flex-end; transition:opacity .2s ease;}
body.nav-open .floaters{opacity:0; pointer-events:none;}
.fab{
  width:56px; height:56px; border-radius:var(--radius-cross); display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -12px rgba(0,0,0,0.4); border:none; transition:transform .25s ease;
}
.fab:hover{transform:translateY(-3px) scale(1.04);}
.fab-whatsapp{background:#1F5C4F;}
.fab-whatsapp svg{width:26px; height:26px;}
.fab-top{background:var(--blanco); border:1px solid var(--linea); width:46px; height:46px; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .25s ease;}
.fab-top.show{opacity:1; pointer-events:auto;}
.fab-top svg{width:18px; height:18px;}

/* ==================== COOKIES ==================== */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:900; background:var(--negro); color:var(--blanco);
  padding:22px 0; box-shadow:0 -14px 40px -10px rgba(0,0,0,0.35); transform:translateY(120%); transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.cookie-banner.show{transform:translateY(0);}
.cookie-inner{display:flex; align-items:center; gap:30px; justify-content:space-between; flex-wrap:wrap;}
.cookie-inner p{font-size:0.88rem; color:var(--menta-2); max-width:60ch;}
.cookie-inner p a{color:var(--ambar-claro); text-decoration:underline;}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap;}

.modal-overlay{position:fixed; inset:0; background:rgba(10,20,17,0.6); backdrop-filter:blur(3px); z-index:950; display:none; align-items:center; justify-content:center; padding:24px;}
.modal-overlay.show{display:flex;}
.modal{background:var(--blanco); border-radius:var(--radius-cross); max-width:640px; width:100%; max-height:82vh; overflow:hidden; display:flex; flex-direction:column;}
.modal-head{padding:26px 30px; border-bottom:1px solid var(--linea); display:flex; justify-content:space-between; align-items:center;}
.modal-head h3{font-size:1.3rem;}
.modal-head button{background:none; border:none; font-size:1.4rem; color:var(--gris); line-height:1;}
.modal-body{padding:24px 30px; overflow-y:auto; font-size:0.92rem; color:var(--gris); line-height:1.7;}
.modal-body h4{font-family:var(--ff-body); font-weight:700; color:var(--tinta); margin:18px 0 6px; font-size:0.95rem;}
.modal-body p{margin-bottom:10px;}
.cookie-toggle{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--linea);}
.cookie-toggle strong{color:var(--tinta); font-size:0.92rem; display:block;}
.cookie-toggle small{color:var(--gris); font-size:0.8rem;}
.switch{position:relative; width:44px; height:24px; flex:none;}
.switch input{opacity:0; width:100%; height:100%; position:absolute; margin:0; cursor:pointer;}
.switch .track{position:absolute; inset:0; background:#c9c9c9; border-radius:999px; transition:.25s;}
.switch .track::before{content:""; position:absolute; width:18px; height:18px; background:var(--blanco); border-radius:50%; top:3px; left:3px; transition:.25s;}
.switch input:checked + .track{background:var(--verde-cruz);}
.switch input:checked + .track::before{transform:translateX(20px);}
.switch input:disabled + .track{background:var(--verde-claro); opacity:0.6;}
.modal-foot{padding:20px 30px; border-top:1px solid var(--linea); display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}

/* ==================== ARTÍCULO DE NOTICIA ==================== */
.article-wrap{max-width:760px; margin-inline:auto;}
.article-meta{display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-family:var(--ff-mono); font-size:0.78rem; color:var(--gris); margin-bottom:28px;}
.article-meta .cat-tag{background:var(--menta); color:var(--verde-cruz); padding:6px 14px; border-radius:999px; text-transform:uppercase; letter-spacing:0.02em;}
.article-hero-img{border-radius:var(--radius-cross); overflow:hidden; height:360px; margin-bottom:44px; box-shadow:var(--sombra); background:var(--menta); position:relative;}
.article-hero-img .img-bg{position:absolute; inset:-14px; background-size:cover; background-position:center; filter:blur(24px) brightness(0.92) saturate(1.1); transform:scale(1.15); z-index:0;}
.article-hero-img img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain;}
.article-body p{color:var(--tinta); font-size:1.05rem; margin-bottom:22px; line-height:1.75;}
.article-body p strong{color:var(--verde-cruz);}
.article-share{display:flex; flex-wrap:nowrap; align-items:center; gap:18px; margin:52px 0; padding:26px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);}
.article-share span{font-family:var(--ff-mono); font-size:0.76rem; color:var(--gris); text-transform:uppercase; letter-spacing:0.02em; margin-right:4px;}
.sensafarma-banner-wrap{padding:36px 0;}
@media (max-width:720px){
  .sensafarma-banner-wrap{padding:14px 0;}
}

.article-cta{background:var(--menta); border-radius:var(--radius-cross); padding:30px 32px; margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.article-cta p{color:var(--tinta); font-weight:500; margin:0;}
.otras-noticias{margin-top:90px;}
.otras-noticias h2{font-size:1.5rem; margin-bottom:30px;}

@media (max-width:720px){
  .article-cta{padding:16px; gap:10px; flex-direction:column; align-items:flex-start;}
  .article-cta p{font-size:0.88rem; line-height:1.4;}
  .article-cta .btn{width:100%; justify-content:center; padding:10px 18px;}
}

@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-side{order:-1; max-width:420px;}
  .about-grid, .productos, .filosofia, .contacto-grid, .equipo-teaser-block{grid-template-columns:1fr;}
  .productos-img{height:360px;}
  .servicios-grid{grid-template-columns:repeat(2,1fr);}
  .marcas-grid{grid-template-columns:repeat(2,1fr);}
  .equipo-grid{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .confianza{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .filosofia img{height:240px;}
  .about-imgs{height:380px;}
}

/* ==================== RESPONSIVE: MOBILE ==================== */
@media (max-width:720px){
  .container{width:min(1180px, calc(100% - 40px));}
  :root{ --header-h: 78px; }
  .brand .brand-cross{height:42px;}
  .brand .brand-wordmark{height:34px;}
  nav.main-nav{
    position:fixed; top:0; right:0; z-index:650; width:min(310px,84%);
    height:100vh; height:100dvh;
    background:rgba(0,0,0,0.98);
    flex-direction:column; align-items:flex-start; padding:100px 28px 28px; gap:2px;
    transform:translateX(100%); transition:transform .35s ease; box-shadow:-20px 0 40px rgba(0,0,0,0.35);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav a{width:100%; padding:15px 10px; font-size:1.04rem;}
  .header-cta .btn-outline{display:none;}
  .burger{display:block;}
  .hero{padding-top:calc(var(--header-h) + 26px); padding-bottom:150px;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-badges{gap:16px 24px;}
  .hero-cross{opacity:0.45; width:120vw; right:-35%;}
  .hero-side img{height:210px;}
  .page-hero{padding:calc(var(--header-h) + 22px) 0 22px;}
  .page-hero h1{font-size:clamp(1.7rem, 7vw, 2.3rem);}
  .page-hero p:not(.eyebrow){
    font-size:0.95rem; margin-top:10px; line-height:1.5;
  }
  .breadcrumb{margin-bottom:10px;}
  .section-pad{padding:44px 0;}
  .servicios-grid, .marcas-grid, .equipo-grid, .blog-grid, .blog-grid.teaser, .servicios-grid.cols-2{grid-template-columns:1fr;}
  .confianza{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr; padding-bottom:34px;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .filosofia{padding:32px 22px;}
  .filosofia blockquote{font-size:1.2rem;}
  .about-imgs{height:320px;}
  .form-card{padding:26px 20px;}
  .cookie-inner{flex-direction:column; align-items:flex-start;}
  .cookie-actions{width:100%;}
  .cookie-actions .btn{flex:1; justify-content:center;}
  .floaters{right:14px; bottom:14px;}
  .fab{width:50px; height:50px;}
}

/* ==================== AJUSTES SOLO MÓVIL (no afecta a escritorio) ==================== */
@media (max-width:720px){
  /* Foto de equipo completo del inicio: mostrarla entera, sin cortar a los de los lados,
     y que el recuadro se ajuste a la proporción real de la foto (sin sobrar blanco arriba/abajo) */
  .equipo-teaser-img{height:auto; aspect-ratio:3/4;}
  .equipo-teaser-img img{object-fit:cover;}

  /* Tarjeta "Marca propia": mostrar el logo entero, sin cortar por los lados */
  .marca-card .marca-badge img[src*="marca-propia.webp"]{
    object-fit:contain;
  }
  .marca-card:has(.marca-badge img[src*="marca-propia.webp"]) .marca-badge{
    background:var(--blanco);
  }
}

/* Cristina: align the face while preserving the original photograph. */
.persona .foto--cristina img{position:absolute; top:10%; width:100%; height:auto; min-height:150%; object-fit:cover; transform:translateY(-38.6%); transform-origin:50% 38.6%;}
.persona:hover .foto--cristina img{transform:translateY(-38.6%) scale(1.06);}

/* Revisión adaptable: fotos, navegación, lectura ampliada y preferencias. */
body{overflow-wrap:anywhere;}
main *,footer *{min-width:0;}
.btn{white-space:normal;max-width:100%;justify-content:center;text-align:center;}
.btn svg,.eyebrow svg{flex-shrink:0;}
.hero-side .cap,.article-share{flex-wrap:wrap;gap:12px;}
.faq-a{display:none;max-height:none!important;overflow:visible;}
.faq-item.open .faq-a{display:block;}
.fab-top{visibility:hidden;}
.fab-top.show{visibility:visible;}
body.nav-open .floaters{visibility:hidden;}
.cookie-banner{visibility:hidden;max-height:85dvh;overflow-y:auto;}
.cookie-banner.show{visibility:visible;}
.modal-overlay{padding:16px;}
.modal{max-height:calc(100dvh - 32px);overflow-y:auto;}
.modal-head,.modal-body,.modal-foot{flex-shrink:0;min-width:0;}
.modal-body{overflow:visible;}
.modal-head{gap:16px;}
.modal-head button{flex:none;min-width:32px;min-height:32px;}
.cookie-toggle{gap:18px;}
.cookie-toggle>div{min-width:0;}
.switch input{z-index:1;}
.switch .track{pointer-events:none;}
.switch input:focus-visible + .track{outline:3px solid var(--verde-cruz);outline-offset:4px;}
html.compact-nav .brand .brand-cross{height:42px;}
html.compact-nav .brand .brand-wordmark{height:34px;}
html.compact-nav .header-cta .btn{display:none;}
html.compact-nav .burger{display:block;flex:none;}
html.compact-nav nav.main-nav{
 position:fixed;top:0;right:0;z-index:650;width:min(360px,calc(100vw - 24px));
 height:100dvh;background:rgba(0,0,0,.98);flex-direction:column;align-items:flex-start;
 padding:100px 28px 28px;gap:2px;transform:translateX(100%);visibility:hidden;
 transition:transform .35s ease;box-shadow:-20px 0 40px rgba(0,0,0,.35);overflow-y:auto;
}
html.compact-nav nav.main-nav.open{transform:translateX(0);visibility:visible;}
html.compact-nav nav.main-nav a{width:100%;padding:15px 10px;font-size:1.04rem;flex-shrink:0;}
@media(max-width:720px){nav.main-nav:not(.open){visibility:hidden;}}
@media(max-width:400px){
 .modal-head,.modal-body,.modal-foot{padding:20px 18px;}
 .confianza{grid-template-columns:1fr;}
}
.btn svg{width:18px;height:18px;stroke:currentColor;}

/* Progressive enhancement: content and navigation work without scripts. */
.faq-a{display:block;}
.faq-ready .faq-a{display:none;}
.faq-ready.open .faq-a{display:block;}
html:not(.nav-ready) header.site-header{position:relative;height:auto;min-height:78px;}
html:not(.nav-ready) .header-inner{flex-wrap:wrap;gap:16px;padding-block:12px;}
html:not(.nav-ready) nav.main-nav{position:static;transform:none;visibility:visible;width:100%;height:auto;flex-direction:row;flex-wrap:wrap;padding:0;order:3;box-shadow:none;}
html:not(.nav-ready) nav.main-nav a{width:auto;}
html:not(.nav-ready) .burger{display:none;}
html:not(.nav-ready) .header-cta{display:none;}
html:not(.consent-ready) #reopenCookiePrefs{display:none;}
.map-embed{height:auto;min-height:280px;background:var(--gris-claro);filter:none;}
.map-placeholder{padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.map-placeholder p{font-size:.88rem;}
.map-placeholder a,.cookie-toggle a,.form-privacy-note a{color:var(--verde-cruz);text-decoration:underline;}
.map-frame:empty{display:none;}
.map-frame iframe{display:block;height:280px;width:100%;}
.map-placeholder[hidden],.map-load[hidden]{display:none;}
.form-privacy-note{font-size:.8rem;color:var(--gris);margin-bottom:18px;}
.cookie-actions #btnReject,.cookie-actions #btnAccept{min-width:130px;flex:1;}

/* Foto completa del equipo: conservar proporción y evitar recortes. */
.filosofia-equipo{margin-inline:0;}
.filosofia-equipo img{height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 52%;max-width:540px;justify-self:center;}

/* Formulario: aviso breve, consentimiento visible y errores accesibles. */
#contactForm .form-privacy-note{font-size:.85rem;line-height:1.55;margin:18px 0 12px;}
#contactForm .consent{padding:14px;border:1px solid var(--linea);border-radius:12px;background:var(--gris-claro);gap:12px;cursor:pointer;font-size:.92rem;line-height:1.5;margin-bottom:16px;min-height:52px;}
#contactForm .consent input{appearance:auto;accent-color:var(--verde-cruz);width:24px;height:24px;min-width:24px;flex:0 0 24px;margin:0;cursor:pointer;}
#contactForm .consent:focus-within{outline:2px solid var(--verde-cruz);outline-offset:3px;}
#contactForm [aria-invalid="true"]{border-color:#a52626;outline-color:#a52626;}
#contactForm .consent:has([aria-invalid="true"]){border-color:#a52626;}
.field-error{font-size:.85rem;line-height:1.5;color:#a52626;margin-top:7px;}
#consentCheck-error{margin:-8px 0 16px;}
.field-hint{font-size:.8rem;color:var(--gris);margin:0 0 8px;}
.field-error[hidden]{display:none;}