/* Fotos reales del cultivo (sustituyen a la imagen genérica anterior).
   Se carga al final: ajusta recortes y posiciones para cada foto. */
:root { --foto: url("../img/fondo-cultivo.jpg"); }

/* Hero: marco en arco con la foto de tradición; círculo con el cultivo */
.photo-frame-img {
  background: url("../img/finca-tradicion.jpg") center 22% / cover no-repeat !important;
  animation: none;
}
.photo-inset-img {
  background: url("../img/finca-cultivo.jpg") center 62% / cover no-repeat !important;
}

/* Hero y secciones con foto de fondo: la franja del cultivo */
.hero { background-position: center, center, center 55% !important; }

/* Galería: cultivo, árbol con fruta y hojas */
.g-img { background-size: cover !important; background-repeat: no-repeat !important; }
.g1 { background-image: url("../img/fondo-cultivo.jpg") !important; background-position: 50% 60% !important; }
.g2 { background-image: url("../img/finca-arbol.jpg") !important; background-position: 50% 70% !important; }
.g3 { background-image: url("../img/finca-hojas.jpg") !important; background-position: 50% 78% !important; }

/* Tarjetas de nutrición */
.nutri-photo { background-size: cover !important; background-repeat: no-repeat !important; }
.np1 { background-image: url("../img/finca-arbol.jpg") !important; background-position: 50% 62% !important; }
.np2 { background-image: url("../img/finca-hojas.jpg") !important; background-position: 50% 75% !important; }
.np3 { background-image: url("../img/finca-tradicion.jpg") !important; background-position: 50% 78% !important; }

/* Historia y fincas */
.info-block::before { background-size: cover !important; background-repeat: no-repeat !important; background-image: url("../img/finca-tradicion.jpg") !important; background-position: 50% 30% !important; }
.info-block:nth-child(2)::before { background-image: url("../img/fondo-cultivo.jpg") !important; background-position: 50% 60% !important; }

/* ══ CINTA DE FRASES: debe correr igual en celular y en computador ══
   Antes se quedaba quieta en el celular por dos motivos:
   1) "reducir movimiento" (muy común en celulares con ahorro de batería)
      la apagaba por completo; ahora corre siempre, solo más lenta.
   2) :hover se queda "pegado" tras un toque en pantallas táctiles y
      pausaba la cinta; ahora solo pausa si hay mouse de verdad. */
.ticker-track {
  animation: ticker-scroll 42s linear infinite !important;
  will-change: transform;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.ticker-track:hover { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
  .ticker-track:hover { animation-play-state: paused; }
}
@media (max-width: 639px) {
  .ticker-track { animation-duration: 30s !important; }   /* pantalla chica: recorre más rápido */
  .ticker-item { font-size: 0.78rem; padding: 0.3rem 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation-duration: 70s !important; }   /* más suave, pero no se detiene */
}

/* ══ REDES SOCIALES: círculos, botones grandes y barra lateral ══ */
.red {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.red svg { width: 18px; height: 18px; }
.red:hover { transform: translateY(-3px) scale(1.08); border-color: transparent; }
.red-whatsapp:hover  { background: #25d366; box-shadow: 0 8px 20px rgba(37,211,102,0.55); }
.red-facebook:hover  { background: #1877f2; box-shadow: 0 8px 20px rgba(24,119,242,0.55); }
.red-instagram:hover { background: linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7); box-shadow: 0 8px 20px rgba(238,42,123,0.55); }
.red-tiktok:hover    { background: #000; box-shadow: 0 8px 20px rgba(0,0,0,0.55), -2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55; }
.topbar-icons { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; }
.topbar-icons .red { width: 32px; height: 32px; }
.topbar-icons .red svg { width: 16px; height: 16px; }
.topbar-info { margin-right: 0; }

/* Pie de página */
.footer-redes { display: flex; justify-content: center; gap: 0.8rem; margin: 1rem 0 1.2rem; }
.footer-redes .red { width: 44px; height: 44px; }
.footer-redes .red svg { width: 22px; height: 22px; }

/* Sección "Síguenos" */
.siguenos-section {
  background:
    radial-gradient(circle at 12% 20%, rgba(240,138,126,0.16), transparent 40%),
    radial-gradient(circle at 90% 85%, rgba(244,240,138,0.20), transparent 45%),
    #fff8f1;
}
.red-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 0.5rem; }
.red-btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1.6rem 0.85rem 1.2rem; border-radius: 999px;
  color: #fff; font-weight: 700; font-size: 0.98rem;
  box-shadow: 0 10px 26px rgba(20,48,26,0.22);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.red-btn svg { width: 26px; height: 26px; }
.red-btn:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(20,48,26,0.32); filter: brightness(1.06); }
.red-btn.red-whatsapp  { background: linear-gradient(135deg, #25d366, #128c4a); }
.red-btn.red-facebook  { background: linear-gradient(135deg, #2f8bff, #1456c8); }
.red-btn.red-instagram { background: linear-gradient(45deg, #f9a825, #ee2a7b 55%, #6228d7); }
.red-btn.red-tiktok    { background: linear-gradient(135deg, #1b1b1b, #000); box-shadow: 0 10px 26px rgba(0,0,0,0.3), -3px -3px 0 rgba(37,244,238,0.55), 3px 3px 0 rgba(254,44,85,0.55); }

/* Barra lateral fija (solo escritorio): acceso directo en todo momento */
.redes-lateral { display: none; }
@media (min-width: 1100px) {
  .redes-lateral {
    position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 150;
    display: flex; flex-direction: column; gap: 0.6rem; padding: 0.6rem 0.45rem;
    background: rgba(14,36,14,0.72); border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  }
  .redes-lateral .red { width: 40px; height: 40px; }
  .redes-lateral .red svg { width: 20px; height: 20px; }
}
@media (max-width: 639px) {
  .topbar-icons { margin: 0 auto; }
  .red-btn { flex: 1 1 100%; justify-content: center; }
}

/* Panel: los botones verdes llevan texto blanco (la regla del botón del sitio
   público, con texto verde, los dejaba ilegibles) */
.btn.btn-primary { color: #fff !important; }
.btn.btn-peligro { color: #c0392b; }
.btn.btn-peligro:hover { color: #fff; }

/* ══ COMPATIBILIDAD: Safari/iPhone, Android y pantallas táctiles ══ */
/* Vidrio esmerilado: Safari necesita el prefijo -webkit- */
.hero-label, .hero-chips li, .ticker-item, .regional-phrase-item, .photo-hero-badge,
.nav-links, .hero-label, .float-tag {
  -webkit-backdrop-filter: blur(8px);
}
/* iPhone: 100vh incluye la barra del navegador; dvh es la altura real visible */
.login-wrap { min-height: 100vh; min-height: 100dvh; }
/* En pantallas táctiles :hover queda "pegado" tras tocar: sin saltos ni zooms al tocar */
@media (hover: none) {
  .quality-card:hover, .timeline-step:hover, .features-list li:hover, .info-block:hover,
  .nutri-card:hover, .regional-phrase-item:hover, .g-tile:hover .g-img, .btn-primary:hover,
  .btn-ghost:hover, .btn-cta:hover, .nav-links .btn-contacto:hover, .red:hover, .brand:hover .brand-logo,
  .wa-float:hover { transform: none; }
  .g-tile:hover .g-img { transform: none; }
}

/* ══ CELULAR: nada se sale de la pantalla ══ */
html, body { max-width: 100%; overflow-x: clip; }
@media (max-width: 639px) {
  .features-list li { display: grid; grid-template-columns: 60px 1fr; column-gap: 0.9rem; align-items: start; }
  .feat-icon.ph { width: 60px; height: 60px; border-radius: 16px; }
  .feat-body { min-width: 0; }
  .feat-badge { grid-column: 2; justify-self: start; margin: 0.5rem 0 0; }
  .tl-dot.ph { width: 76px; height: 76px; }
  .nutri-icon-wrap.ph { width: 72px; height: 72px; }
  .regional-phrase-item .rp-icon.ph { width: 68px; height: 68px; }
  .float-tag { font-size: 0.68rem; padding: 0.35rem 0.7rem; }
  .float-tag.t1 { right: 2%; }
  .float-tag.t2 { left: 2%; }
}

/* ══ MARCA: logo y nombre con brillo y animación ══ */
.brand { gap: 1.1rem; text-decoration: none; }

/* Logo grande sobre disco blanco, con aro de luz giratorio y halo que respira */
.brand-logo {
  position: relative; flex-shrink: 0;
  width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center;
  animation: halo 3.4s ease-in-out infinite;
}
.brand-logo::before {                      /* aro de luz que gira */
  content: ''; position: absolute; inset: -5px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, #f08a7e, #f4f08a, #ffffff, #7bbb6e, #f08a7e);
  animation: girar 5s linear infinite;
  filter: blur(0.3px);
}
.brand-logo::after {                       /* disco blanco detrás del logo = más claridad */
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(20,48,26,0.08);
}
.brand-logo img {
  position: relative; z-index: 2;
  width: 100% !important; height: 100% !important;
  padding: 3px; border-radius: 50%; object-fit: contain !important;
  border: none !important; outline: none !important; background: #fff !important;
  box-shadow: none !important;
}
.brand-logo img.logo-placeholder { object-fit: cover !important; padding: 0; }
.brand:hover .brand-logo { animation-duration: 1.6s; }
.brand:hover .brand-logo::before { animation-duration: 1.8s; }

/* Nombre en blanco puro con destello que lo recorre y resplandor suave */
.brand-name h1 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 700; letter-spacing: 0.005em;
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 38%, #ffe9a8 50%, #ffffff 62%, #ffffff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.45)) drop-shadow(0 2px 8px rgba(0,0,0,0.55));
  animation: destello 4.2s ease-in-out infinite;
}
.brand-name span {
  color: #ffd2c8; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em;
  text-shadow: 0 0 12px rgba(240,138,126,0.7), 0 1px 4px rgba(0,0,0,0.6);
}
@keyframes girar   { to { transform: rotate(360deg); } }
@keyframes halo {
  0%, 100% { box-shadow: 0 0 14px 2px rgba(255,214,170,0.45), 0 0 34px 6px rgba(240,138,126,0.25); }
  50%      { box-shadow: 0 0 22px 6px rgba(255,236,170,0.75), 0 0 52px 14px rgba(240,138,126,0.40); }
}
@keyframes destello {
  0%, 12%  { background-position: 100% 0; }
  55%, 100% { background-position: 0% 0; }
}
@media (max-width: 639px) {
  .brand-logo { width: 58px; height: 58px; }
  .brand-name h1 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo, .brand-logo::before, .brand-name h1 { animation: none; }
}

/* ══ MARCA v2: logo en placa redondeada (no recortado) + nombre con luces ══ */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.site-header { padding-top: 0.7rem; padding-bottom: 0.7rem; transition: padding .35s ease; }
.brand { gap: 1.3rem; align-items: center; }

.brand-logo {
  width: 104px; height: 104px; border-radius: 26px;
  transition: width .35s ease, height .35s ease, border-radius .35s ease;
  animation: halo2 3.4s ease-in-out infinite;
}
/* Borde de luz que da la vuelta a la placa */
.brand-logo::before {
  inset: -4px; border-radius: 30px; filter: none; transform: none !important;
  background: conic-gradient(from var(--ang), #f08a7e, #f4f08a, #ffffff, #7bbb6e, #f08a7e);
  animation: ang 5s linear infinite;
}
/* Placa blanca: el logo se ve completo y limpio sobre cualquier fondo */
.brand-logo::after {
  inset: 0; border-radius: 24px; background: linear-gradient(180deg, #ffffff, #fbf7ef);
  box-shadow: inset 0 0 0 1px rgba(20,48,26,0.10), inset 0 -6px 14px rgba(20,48,26,0.06);
}
.brand-logo img {
  width: calc(100% - 10px) !important; height: calc(100% - 10px) !important;
  padding: 0; border-radius: 18px !important; object-fit: contain !important;
  background: transparent !important;
}
.brand-logo img.logo-placeholder { object-fit: cover !important; border-radius: 50% !important; }
.brand:hover .brand-logo { transform: scale(1.04); transition: transform .3s ease; }

/* Nombre: oro y blanco con destello, resplandor que pulsa y chispas */
.brand-name { position: relative; padding: 0.2rem 0.4rem; }
.brand-name h1 {
  font-size: clamp(1.5rem, 2.9vw, 2.15rem); line-height: 1.1; letter-spacing: 0.01em;
  background: linear-gradient(100deg, #ffffff 0%, #fff4c8 30%, #ffd98a 45%, #ffffff 55%, #fff4c8 70%, #ffffff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(255,236,170,0.65)) drop-shadow(0 3px 8px rgba(0,0,0,0.6));
  animation: destello2 3.6s ease-in-out infinite, brilloTexto 2.8s ease-in-out infinite;
}
.brand-name span {
  display: block; margin-top: 0.35rem; font-size: 0.74rem; letter-spacing: 0.15em; white-space: nowrap;
  color: #ffd9cf; text-shadow: 0 0 14px rgba(240,138,126,0.85), 0 1px 4px rgba(0,0,0,0.6);
}
/* Rayo de luz bajo el nombre */
.brand-name::after {
  content: ''; position: absolute; left: 0.4rem; right: 0.4rem; bottom: -4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #f4f08a, #ffffff, #f08a7e, transparent);
  background-size: 200% 100%; opacity: 0.9;
  box-shadow: 0 0 10px rgba(244,240,138,0.8);
  animation: rayo 3.2s linear infinite;
}
/* Chispas ✦ alrededor del nombre */
.brand-name::before {
  content: '✦'; position: absolute; right: -4px; top: -8px; font-size: 1rem; color: #fff6c8;
  text-shadow: 0 0 10px #ffe9a8, 0 0 20px #f4f08a;
  animation: chispa 2.4s ease-in-out infinite;
}
.brand-name h1::after {
  content: '✦'; position: absolute; left: 38%; top: -10px; font-size: 0.7rem; color: #ffffff;
  text-shadow: 0 0 8px #fff, 0 0 16px #f08a7e; -webkit-text-fill-color: #ffffff;
  animation: chispa 2.4s ease-in-out 1.1s infinite;
}
.brand-name h1 { position: relative; }

@keyframes ang { to { --ang: 360deg; } }
@keyframes halo2 {
  0%, 100% { box-shadow: 0 0 16px 2px rgba(255,214,170,0.45), 0 0 40px 8px rgba(240,138,126,0.28); }
  50%      { box-shadow: 0 0 26px 7px rgba(255,236,170,0.80), 0 0 64px 18px rgba(240,138,126,0.42); }
}
@keyframes destello2 { 0%, 10% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
@keyframes brilloTexto {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,236,170,0.45)) drop-shadow(0 3px 8px rgba(0,0,0,0.6)); }
  50%      { filter: drop-shadow(0 0 18px rgba(255,236,170,0.95)) drop-shadow(0 3px 8px rgba(0,0,0,0.6)); }
}
@keyframes rayo   { to { background-position: -200% 0; } }
@keyframes chispa { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(35deg); } }

/* Al bajar la página la cabecera se compacta (JS agrega .compacta) */
.site-header.compacta { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.site-header.compacta .brand-logo { width: 62px; height: 62px; border-radius: 18px; }
.site-header.compacta .brand-logo::before { border-radius: 21px; }
.site-header.compacta .brand-logo::after { border-radius: 16px; }
.site-header.compacta .brand-logo img { border-radius: 12px !important; }
.site-header.compacta .brand-name h1 { font-size: 1.35rem; }
.site-header.compacta .brand-name span { display: none; }

@media (min-width: 640px) {
  .nav-links { flex-wrap: nowrap; flex-shrink: 0; white-space: nowrap; }
  .brand { min-width: 0; }
}
/* Pantallas medianas (tablet / ventana angosta): todo en una sola fila */
@media (min-width: 640px) and (max-width: 1050px) {
  .nav-links { flex-wrap: nowrap; padding-left: 0.3rem; }
  .nav-links a:not(.btn-contacto) { padding: 0.4rem 0.55rem; font-size: 0.82rem; }
  .brand-logo { width: 84px; height: 84px; }
  .brand { gap: 0.9rem; min-width: 0; }
  .brand-name h1 { font-size: 1.35rem; }
  .brand-name span { font-size: 0.64rem; letter-spacing: 0.16em; }
  .site-header { gap: 0.6rem; }
}
@media (max-width: 639px) {
  .brand-logo { width: 72px; height: 72px; border-radius: 20px; }
  .brand-logo::before { border-radius: 24px; } .brand-logo::after { border-radius: 18px; }
  .brand-logo img { border-radius: 14px !important; }
  .brand { gap: 0.7rem; flex: 1 1 auto; min-width: 0; }
  .brand-name { padding: 0; }
  .brand-name h1 { font-size: 1.05rem; line-height: 1.15; }
  .brand-name span { display: none; }
  .nav-links .btn-contacto { padding: 0.5rem 0.85rem; font-size: 0.78rem; margin-left: 0; }
  .nav-links .btn-contacto svg { width: 16px; height: 16px; }
  .site-header { gap: 0.5rem; }
  .site-header.compacta .brand-logo { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo, .brand-logo::before, .brand-name h1, .brand-name::after, .brand-name::before, .brand-name h1::after { animation: none !important; }
  .brand-name::before, .brand-name h1::after { opacity: 0.8; }
}

/* ══ LOGO v3: sin placa ni fondo. El brillo sigue la forma del propio logo ══
   El espacio se adapta al logo (ancho automático), y el resplandor sale de
   su contorno, no de una caja detrás. */
.brand-logo {
  width: auto !important; height: auto !important;
  border-radius: 14px; overflow: hidden; background: none !important;
  display: inline-block; line-height: 0; position: relative;
  box-shadow: none !important;
  animation: contornoLogo 3.2s ease-in-out infinite !important;
  transition: transform .3s ease;
}
.brand-logo::before { display: none !important; }
.brand-logo::after {                               /* destello de luz que cruza el logo */
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.65) 50%, transparent 62%);
  background-size: 250% 100%; background-position: 160% 0;
  box-shadow: none !important; border-radius: inherit;
  animation: destelloLogo 4.5s ease-in-out infinite;
}
.brand-logo img {
  display: block; position: relative; z-index: 2;
  width: auto !important; height: 100px !important; max-width: 190px !important;
  padding: 0 !important; margin: 0; border: none !important; outline: none !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  object-fit: contain !important;
}
.brand-logo img.logo-placeholder { height: 78px !important; width: 78px !important; border-radius: 50% !important; object-fit: cover !important; }
.brand-logo:has(.logo-placeholder) { border-radius: 50%; }
.brand:hover .brand-logo { transform: scale(1.05); }

@keyframes contornoLogo {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,236,170,0.85)) drop-shadow(0 0 10px rgba(240,138,126,0.45)); }
  50%      { filter: drop-shadow(0 0 5px rgba(255,248,200,1)) drop-shadow(0 0 20px rgba(255,214,150,0.85)); }
}
@keyframes destelloLogo { 0%, 55% { background-position: 160% 0; } 90%, 100% { background-position: -60% 0; } }

.site-header.compacta .brand-logo { width: auto !important; height: auto !important; border-radius: 10px; }
.site-header.compacta .brand-logo img { height: 56px !important; max-width: 110px !important; border-radius: 0 !important; }
.site-header.compacta .brand-logo img.logo-placeholder { height: 52px !important; width: 52px !important; border-radius: 50% !important; }
@media (min-width: 640px) and (max-width: 1050px) {
  .brand-logo { width: auto !important; height: auto !important; }
  .brand-logo img { height: 72px !important; max-width: 120px !important; }
  .brand-name span { display: none; }                 /* cabecera baja: no 3 líneas de texto */
  .brand-name h1 { font-size: 1.25rem; }
  .nav-links a:not(.btn-contacto) { padding: 0.35rem 0.45rem; font-size: 0.78rem; }
  .nav-links .btn-contacto { padding: 0.5rem 0.9rem; font-size: 0.8rem; }
}
@media (max-width: 639px) {
  .brand-logo { width: auto !important; height: auto !important; border-radius: 10px; }
  .brand-logo img { height: 64px !important; max-width: 100px !important; }
  .site-header.compacta .brand-logo img { height: 46px !important; max-width: 80px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo, .brand-logo::after { animation: none !important; }
  .brand-logo { filter: drop-shadow(0 0 6px rgba(255,236,170,0.9)); }
}

/* Fondos con velo: encuadres para la franja del cultivo */
.quote-section { background-position: center, center 60% !important; }
.regional-banner { background-position: center, center 60% !important; }
.cta-section { background-position: center, center 70% !important; }