/* Corral Grande — landing de Equipos (módulos de postura)
   Misma paleta de marca que la landing de cursos: la del logo. */

:root{
  --rojo:#c0272d;          /* rojo granero — color principal */
  --rojo-d:#9b1d23;
  --dorado:#c98a2e;        /* ámbar de granja — segundo acento */
  --dorado-d:#a06c1f;
  --dorado-claro:#e9b96b;
  --cafe:#433322;
  --ink:#221610;
  --crema:#f7f2e6;
  --crema-2:#fbf8f1;
  --texto:#332a22;
  --suave:#6b6055;
  --linea:#e3dccc;
  --linea-2:#f0e9dd;
  --whats:#1fa855;         /* verde de WhatsApp, oscurecido para que aguante texto blanco */
  --whats-d:#178943;
  --radio:16px;
  --max:1120px;
  --sombra:0 10px 40px rgba(34,22,16,.10);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--texto);background:#fff;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}
.wrap.angosto{max-width:780px}

h1,h2,h3{line-height:1.15;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
h1{font-size:clamp(2rem,5.2vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.35rem)}
h3{font-size:1.15rem;font-weight:700}
.eyebrow{
  display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rojo);margin-bottom:14px;
}
.eyebrow.claro{color:var(--dorado-claro)}
.lead{font-size:clamp(1rem,1.7vw,1.13rem);color:var(--suave);max-width:62ch}
section{padding:clamp(56px,7vw,90px) 0}
.centro{text-align:center;margin-bottom:46px}
.centro .lead{margin-left:auto;margin-right:auto}

/* iconos */
.ic{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:800;font-size:1rem;padding:15px 28px;border-radius:100px;
  text-decoration:none;border:0;cursor:pointer;transition:.18s;
  font-family:inherit;text-align:center;
}
.btn-whats{background:var(--whats);color:#fff;box-shadow:0 8px 24px rgba(31,168,85,.30)}
.btn-whats:hover{background:var(--whats-d);transform:translateY(-2px)}
.btn-linea{background:transparent;color:var(--ink);border:2px solid var(--linea);}
.btn-linea:hover{border-color:var(--cafe);transform:translateY(-2px)}
.btn-bloque{width:100%}
.btn-chico{padding:10px 18px;font-size:.9rem}
.btn-grande{padding:18px 38px;font-size:1.08rem}

/* ---------- encabezado ---------- */
.cab{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea-2);
}
.cab-in{display:flex;align-items:center;gap:22px;height:68px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;color:var(--ink);font-size:.98rem}
.marca img{width:34px;height:34px;border-radius:9px;object-fit:cover}
.marca b{font-weight:800;color:var(--rojo)}
.cab-nav{display:flex;gap:22px;margin-left:auto;font-size:.92rem;font-weight:600;color:var(--suave)}
.cab-nav a{text-decoration:none}
.cab-nav a:hover{color:var(--rojo)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:clamp(60px,8vw,110px) 0}
.hero h1{color:#fff}
.hero .lead{color:rgba(255,255,255,.80)}
.hero-in{position:relative;z-index:2}
.hero-texto{max-width:640px}
.hero-foto{
  position:absolute;inset:0 0 0 42%;z-index:1;
  background:center/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%);
  mask-image:linear-gradient(to right,transparent 0,#000 38%);
  opacity:.85;
}
.hero-foto.vacio{display:none}
/* el video del encabezado llena el mismo hueco que la foto */
.hero-foto video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* botón de reserva: sale solo si el celular no dejó arrancar el video */
.hero-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:3;width:74px;height:74px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.75);background:rgba(34,22,16,.45);
  color:#fff;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);transition:.18s;
}
.hero-play:hover{background:rgba(34,22,16,.65);transform:translate(-50%,-50%) scale(1.06)}
.hero-play .ic{width:40px;height:40px;stroke-width:1.4}
.hero-botones{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 30px}
.hero .btn-linea{color:#fff;border-color:rgba(255,255,255,.35)}
.hero .btn-linea:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero-datos{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.95rem;color:rgba(255,255,255,.85)}
.hero-datos li{display:flex;align-items:center;gap:10px}
.hero-datos .ic{color:var(--dorado-claro)}

/* ---------- rejillas y tarjetas ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:760px;margin:0 auto}
.grid-modelos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px 22px}
.tarjeta h3{margin-bottom:8px}
.tarjeta p{font-size:.95rem;color:var(--suave)}
.icono{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;margin-bottom:14px;
  background:#fbeaea;color:var(--rojo);
}
.beneficios{background:var(--crema-2)}
.agua{background:var(--crema-2)}
.agua-card .icono{background:#eaf2fb;color:#2a5b9a}

/* ---------- modelos ---------- */
.modelo{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:.18s;
}
.modelo:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.modelo.destacado{border-color:var(--dorado);box-shadow:0 0 0 3px rgba(201,138,46,.16)}
.cinta{
  position:absolute;top:14px;right:14px;z-index:2;
  background:var(--dorado);color:#241710;font-size:.7rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:100px;
}
.modelo-foto{
  height:210px;background:#fff center/contain no-repeat;
  border-bottom:1px solid var(--linea-2);
}
.modelo-foto.falta{
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--suave);font-size:.82rem;padding:16px;background:var(--crema);
}
.modelo-cuerpo{padding:20px;display:flex;flex-direction:column;gap:11px;flex:1}
.modelo-cuerpo .tipo{
  font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dorado-d);margin-bottom:-8px;
}
.modelo-cuerpo h3{font-size:1.28rem}
.modelo-cuerpo > p{font-size:.95rem;color:var(--suave)}
.modelo-jaulas{
  display:flex;align-items:flex-start;gap:8px;font-size:.92rem;color:var(--cafe);
  background:var(--crema);border-radius:10px;padding:10px 12px;line-height:1.45;
}
.modelo-jaulas .ic{color:var(--dorado-d);width:18px;height:18px;margin-top:2px}
/* la capacidad va en su propio renglón, debajo de las jaulas */
.modelo-jaulas .aves:not(:empty){
  display:block;color:var(--suave);font-size:.86rem;margin-top:2px;
}

/* tabla de capacidad, dentro de las preguntas frecuentes */
.tabla-cap{
  width:100%;border-collapse:collapse;margin:4px 0 16px;font-size:.93rem;
}
.tabla-cap th,.tabla-cap td{
  padding:9px 12px;text-align:left;border-bottom:1px solid var(--linea);
}
.tabla-cap th{
  font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--suave);border-bottom:1.5px solid var(--linea);
}
.tabla-cap th:not(:first-child),.tabla-cap td:not(:first-child){
  text-align:right;width:5.5em;
}
.tabla-cap td{color:var(--texto)}
.tabla-cap td:not(:first-child){font-weight:700;color:var(--ink)}
.tabla-cap tbody tr:last-child td{border-bottom:0}
.palomitas{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.palomitas li{position:relative;padding-left:26px;color:var(--suave)}
.palomitas li::before{
  content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231fa855' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l4.8 4.8L19.5 7'/%3E%3C/svg%3E");
}
.palomitas.claro li{color:rgba(255,255,255,.82)}
.modelo .btn{margin-top:auto}
.nota-modelos{
  text-align:center;margin-top:34px;color:var(--suave);font-size:.98rem;
  max-width:56ch;margin-left:auto;margin-right:auto;
}

/* ---------- videos de entregas ---------- */
.entregas{background:var(--crema)}
.reproductor{max-width:860px;margin:0 auto}
.reproductor-caja{
  /* 16/9 es solo el punto de partida: el JS le pone al vuelo la forma
     real del video (los de celular son verticales y con una caja 16/9
     saldrían con franjas negras enormes a los lados).
     Ojo: se pone como estilo directo desde el JS, NO con var() aquí
     dentro — aspect-ratio no resuelve las variables en todos los
     navegadores y se quedaba siempre en 16/9. */
  position:relative;aspect-ratio:16/9;
  margin:0 auto;border-radius:var(--radio);overflow:hidden;
  background:var(--ink);box-shadow:var(--sombra);transition:width .2s;
}
.reproductor-caja video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.video-portada{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  background:var(--ink);display:block;
}
.video-portada img{width:100%;height:100%;object-fit:cover}
.video-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(34,22,16,.38);color:#fff;transition:.18s;
}
.video-portada:hover .video-play{background:rgba(34,22,16,.20)}
.video-play .ic{width:74px;height:74px;stroke-width:1.2}
.reproductor-info{
  display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  justify-content:space-between;padding:14px 4px 0;
}
.reproductor-titulo{font-weight:700;color:var(--ink)}
.reproductor-sig{font-size:.88rem;color:var(--suave)}

.lista-videos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:14px;max-width:860px;margin:26px auto 0;
}
.video-item{
  display:flex;flex-direction:column;gap:8px;padding:0;cursor:pointer;
  background:none;border:0;font-family:inherit;text-align:left;
}
.video-mini{
  position:relative;display:block;aspect-ratio:16/9;border-radius:11px;overflow:hidden;
  background:var(--cafe);border:2px solid transparent;transition:.18s;
}
.video-mini img{width:100%;height:100%;object-fit:cover}
.video-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:1.6rem;font-weight:800;color:rgba(255,255,255,.30);
}
.video-play-chico{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:.85;
}
.video-play-chico .ic{width:30px;height:30px;stroke-width:1.5}
.video-item:hover .video-mini{border-color:var(--dorado-claro)}
.video-item.activo .video-mini{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(192,39,45,.20)}
.video-nombre{font-size:.87rem;line-height:1.4;color:var(--suave);font-weight:600}
.video-item.activo .video-nombre{color:var(--ink)}

/* ---------- proceso ---------- */
.pasos{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pasos li{position:relative;padding-top:8px}
.pasos .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--rojo);color:#fff;
  font-weight:800;margin-bottom:14px;
}
.pasos h3{margin-bottom:6px}
.pasos p{font-size:.94rem;color:var(--suave)}

/* ---------- cotizador ---------- */
.cotiza{background:var(--ink);color:#fff}
.cotiza h2{color:#fff}
.cotiza-caja{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.cotiza-texto p{color:rgba(255,255,255,.78);margin:14px 0 20px;font-size:1rem}
.cotiza-form{background:#fff;border-radius:var(--radio);padding:26px;box-shadow:var(--sombra)}
.campo{margin-bottom:14px}
.campo-doble{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campo label{display:block;font-size:.84rem;font-weight:700;color:var(--cafe);margin-bottom:6px}
.opcional{font-weight:500;color:var(--suave)}
.campo input,.campo select,.campo textarea{
  width:100%;font-family:inherit;font-size:.98rem;color:var(--texto);
  background:var(--crema-2);border:1.5px solid var(--linea);border-radius:11px;
  padding:12px 14px;transition:.15s;
}
.campo textarea{resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--dorado);background:#fff;
  box-shadow:0 0 0 3px rgba(201,138,46,.18);
}
.cotiza-form .btn{margin-top:6px}
.micro{font-size:.78rem;color:var(--suave);text-align:center;margin-top:10px}
.aviso{
  margin-top:12px;background:#fbeaea;color:var(--rojo-d);border-radius:10px;
  padding:11px 13px;font-size:.86rem;font-weight:600;
}

/* ---------- dudas ---------- */
details{border-bottom:1px solid var(--linea);padding:4px 0}
summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  cursor:pointer;list-style:none;padding:18px 2px;font-weight:700;color:var(--ink);
  font-size:1.02rem;
}
summary::-webkit-details-marker{display:none}
summary .mas{color:var(--rojo);transition:.2s}
details[open] summary .mas{transform:rotate(45deg)}
details p{padding:0 2px 20px;color:var(--suave);font-size:.97rem;max-width:66ch}

/* ---------- cierre ---------- */
.cierre{background:var(--crema)}
.cierre .lead{margin:0 auto 26px}

/* ---------- pie ---------- */
.pie{background:var(--ink);color:rgba(255,255,255,.72);padding:48px 0 0}
.pie-in{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;justify-content:space-between;padding-bottom:32px}
.pie-marca{display:flex;align-items:center;gap:12px}
.pie-marca img{width:44px;height:44px;border-radius:11px;object-fit:cover}
.pie-marca b{display:block;color:#fff;font-size:1rem}
.pie-marca span{font-size:.88rem}
.pie-links{display:flex;flex-wrap:wrap;gap:18px;font-size:.9rem}
.pie-links a{text-decoration:none}
.pie-links a:hover{color:var(--dorado-claro)}
.pie-contacto{font-size:.9rem;display:flex;flex-direction:column;gap:6px}
.pie-contacto a{text-decoration:none}
.pie-contacto a:hover{color:var(--dorado-claro)}
.pie-legal{border-top:1px solid rgba(255,255,255,.12);padding:18px 22px;font-size:.8rem;opacity:.7}

/* ---------- botón flotante ---------- */
.flotante{
  position:fixed;right:18px;bottom:18px;z-index:50;
  width:56px;height:56px;border-radius:50%;background:var(--whats);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(31,168,85,.42);transition:.18s;
}
.flotante:hover{background:var(--whats-d);transform:scale(1.06)}
.flotante .ic{width:30px;height:30px}

/* ---------- responsivo ---------- */
@media (max-width:1040px){
  .grid-modelos{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media (max-width:980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .cotiza-caja{grid-template-columns:1fr;gap:30px}
  .cab-nav{display:none}
}
@media (max-width:760px){
  .hero{padding:0 0 44px}
  .hero-foto{
    position:relative;inset:auto;height:230px;margin:0 -22px 26px;
    -webkit-mask-image:none;mask-image:none;opacity:1;
  }
  .hero-in{padding-top:0}
  /* Si no hay foto de hero, el texto necesita su propio aire arriba. */
  .hero-foto.vacio + .hero-in{padding-top:40px}
  .hero-texto{max-width:none}
  .hero-botones .btn{width:100%}
  /* El nombre de la marca cabe en un renglón en pantallas chicas. */
  .marca{font-size:.9rem}
  .marca img{width:30px;height:30px}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr}
  .lista-videos{grid-template-columns:repeat(2,1fr);gap:12px}
  .grid-modelos{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .grid-2{grid-template-columns:1fr;max-width:420px}
  .pasos{grid-template-columns:1fr}
  .campo-doble{grid-template-columns:1fr}
  .pie-in{flex-direction:column}
}