:root{
  --bg:#def0df;
  --ink:#1c352d;
  --leaf:#2e8f5e;
  --text:#1c352d;
  --muted:#555;
  --card:#fff;
  --border:rgba(0,0,0,.08);
  --header-h:64px;
  --panel:#fff;
  --panel-alt:#eef7ef;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h)}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  background:var(--bg); color:var(--text);
  scroll-snap-type:y mandatory; overflow-y:auto;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:auto;padding:0 20px}

/* NAV */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(0,0,0,.06)
}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:40px}
nav.menu{display:flex;gap:1.5rem;align-items:center}
.menu a{opacity:.9;line-height:1}
.cta{
  background:var(--leaf); color:#fff; padding:.6rem 1rem; border-radius:999px;
  font-weight:700; border:1px solid #7dd3a7;
  display:flex; align-items:center; justify-content:center; height:38px
}
.cta:hover{transform:translateY(-1px)}
.burger{display:none; appearance:none; background:none; border:none; padding:.4rem; margin:0; cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#333;margin:5px 0;border-radius:2px}
@media (max-width:900px){
  nav.menu{display:none;position:absolute;top:var(--header-h);left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:12px 20px}
  .menu.open{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
  .burger{display:block}
  .cta{height:auto}
}

/* SECCIONES */
section{
  scroll-margin-top:var(--header-h);
  scroll-snap-align:start; scroll-snap-stop:always;
  position:relative; overflow:visible; border:0;
  display:grid; place-items:center;
}
section.full{min-height:calc(100vh - var(--header-h))}
section > .wrap{width:100%}
main > section:nth-of-type(odd){background:var(--panel)}
main > section:nth-of-type(even){background:var(--panel-alt)}
.section-pad{padding:48px 0}

/* HERO */
.hero{background:radial-gradient(80% 120% at 50% 0%, rgba(28,53,45,.08), transparent 60%)}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.kicker{color:var(--muted);text-transform:uppercase;font-size:.85rem;letter-spacing:.18em}
h1{font-size:clamp(2rem,6vw,3.2rem);line-height:1.05;margin:.4rem 0 .8rem;color:var(--ink)}
.lead{color:var(--muted);font-size:1.05rem;max-width:60ch}
.badges{display:flex;gap:.5rem;flex-wrap:wrap;margin:18px 0}
.badge{border:1px solid rgba(0,0,0,.1);background:var(--card);padding:.45rem .7rem;border-radius:999px;color:var(--muted);font-size:.9rem}
.hero-cta{display:flex;gap:.6rem;margin-top:18px;flex-wrap:wrap}

.hero-visual{position:relative}
.hero-frame{
  border-radius:16px; overflow:hidden; background:var(--card);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  aspect-ratio:16/10; max-height:560px; margin:0;
}
.hero-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:translateZ(0) scale(1.015); will-change:transform;
}

/* TITULARES / TARJETAS */
h2{font-size:1.8rem;margin:0 0 1.2rem;color:var(--ink)}
.muted{color:var(--muted)}
.grid{display:grid;gap:18px}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:16px}
.pill{display:inline-block;background:rgba(55,161,106,.1);border:1px solid rgba(125,211,167,.25);color:var(--ink);padding:.3rem .6rem;border-radius:999px;font-size:.85rem}
.flow>*+*{margin-top:.6rem}

/* Títulos centrados y más grandes */
#servicios h2, #especies h2, #contacto h2, #catalogo h2{
  text-align:center; font-size:clamp(2rem,6vw,3rem); line-height:1.1; margin-bottom:1rem;
}
#especies h2 + .muted{ text-align:center; font-size:1.05rem; margin:.25rem 0 1.25rem }

/* Aire secciones fullscreen */
section.full > .wrap{padding:28px 20px 72px}
/* Desktop: “Qué ofrecemos” arriba */
#servicios.full > .wrap{padding-top:0; padding-bottom:104px}

/* GALERÍA */
.gallery{
  display:grid; grid-template-columns:repeat(4,minmax(260px,1fr));
  gap:28px; align-items:start; justify-items:center;
}
figure.tile{margin:0;width:100%}
.imgwrap{
  width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden;
  border:1px solid var(--border); background:var(--card);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  will-change:transform; transition:transform .35s ease, box-shadow .35s ease;
}
.imgwrap img{
  width:100%; height:100%; object-fit:cover;
  transform:translateZ(0) scale(1.002);
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
@media (hover:hover){
  .tile:hover .imgwrap{transform:translateY(-4px) scale(1.02); box-shadow:0 12px 32px rgba(0,0,0,.20)}
  .tile:hover .imgwrap img{transform:scale(1.04)}
}
.tile figcaption{text-align:center;margin-top:.6rem;line-height:1.25}
.tile figcaption strong{display:block}
.tile figcaption small{display:block;color:var(--muted);font-size:.92rem}

/* Nota bajo la galería */
.gallery-note{ text-align:center; font-weight:700; margin:20px 0 24px }
.gallery-note a{ color:var(--leaf); text-decoration:underline }

/* CATALOGO - 2 imágenes arriba, texto abajo */
.catalogo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}
.catalogo-grid .visual .frame{
  border-radius:16px; overflow:hidden; background:var(--card);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  aspect-ratio:3/4;
  margin:0;
}
.catalogo-grid .visual .frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:translateZ(0) scale(1.005);
}
.catalogo-copy{
  grid-column:1 / -1;
  text-align:center;
}

/* FORM */
form.card label{display:block}

/* Campos de texto */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea{
  width:100%;
  padding:.7rem;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  background:transparent;
  color:var(--text);
}

/* Checkbox */
input[type="checkbox"]{
  width:auto;            /* no ocupar 100% */
  padding:0;             /* sin padding */
  margin:0;              /* sin empuje raro */
  border-radius:4px;
  accent-color: var(--leaf); /* color del check en navegadores modernos */
}

/* Alineado del checkbox con el texto */
.consent{
  display:flex;
  align-items:center;    /* centra verticalmente */
  gap:.5rem;
  font-size:.9rem;
  color:var(--muted);
  flex-wrap:wrap;        /* si el texto es largo en móvil, que parta bien */
}


/* FOOTER */
footer{padding:32px 0;color:var(--muted);text-align:center;background:#fff}
footer a{color:var(--leaf); text-decoration:underline}

/* Accesibilidad: foco visible */
:focus-visible{
  outline: 3px solid #2e8f5e;
  outline-offset: 2px;
  border-radius: 6px;
}
.menu a:focus-visible, .cta:focus-visible { outline-offset: 4px; }

/* RESPONSIVE */
@media (max-width:1100px){
  .gallery{grid-template-columns:repeat(3,minmax(220px,1fr))}
}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .cols-3,.cols-2{grid-template-columns:1fr}
  .catalogo-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
  body{scroll-snap-type:none}
  section{scroll-snap-align:none; scroll-snap-stop:normal}
  section.full{min-height:auto}
  #servicios h2, #especies h2, #contacto h2, #catalogo h2{font-size:clamp(1.9rem,7.5vw,2.4rem)}
  .hero-visual{padding-inline:12px}
  .hero-frame{aspect-ratio:4/3; max-height:360px}
  #servicios.full > .wrap{padding-top:20px; padding-bottom:88px}
}
@media (max-width:480px){
  h1{font-size:clamp(1.8rem,8vw,2.2rem)}
  .badge{font-size:.82rem;padding:.35rem .55rem}
  .hero-cta a{width:100%;text-align:center}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
}

/* accesibilidad extra */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

.btn-catalogo {
  display: inline-block;
  width: auto;
  padding: .5rem 1rem;      /* ajustar aquí el grosor */
  border-radius: 999px;
  background: var(--leaf);
  color: #fff;
  font-weight: 700;
  border: 1px solid #7dd3a7;
  text-align: center;
}
.btn-catalogo:hover {
  transform: translateY(-1px);
}

/* Corrección alineado checkbox + texto */
.consent {
  display: flex;
  align-items: center;  /* antes estaba flex-start */
  gap: .5rem;
  font-size: .9rem;
  color: var(--muted);
}

.consent input {
  margin: 0;  /* elimina el margin-top raro */
}

.badge {
  display: inline-block;
  cursor: pointer;   /* da feedback de que se puede clicar */
  text-decoration: none; /* sin subrayado */
}
.badge:hover {
  background: rgba(55,161,106,.15); /* efecto hover suave */
}