/* =============================
   RESET + VARIABLES
   ============================= */
:root{
  --bg:#ffffff;
  --text:#222;
  --border:#e2e8f0;
  --primary:#007bff;
  --primary-contrast:#fff;
  --radius:14px;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* 👈 evita reescalado en iPad */
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-family: 'Montserrat', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
a:focus-visible,button:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }

/* =============================
   HEADER
   ============================= */
header {
  background: #f8f8f8;
  color: #222;
  padding: 0.3rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-bottom: 0;
}

.logo-container { display: flex; align-items: center; }
.logo-container img { width: 120px; margin-right: 1rem; }

/* NAV */
nav { display: flex; align-items: center; }
nav a {
  color: #222; margin-left: 5rem; text-decoration: none;
  font-weight: 500; font-size: 0.85rem; transition: color 0.3s;
}
nav a:hover { color: var(--primary); }
.menu-toggle { display:none; font-size:1.5rem; cursor:pointer; }

/* =============================
   HERO
   ============================= */
.hero {
  position: relative;
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  border-radius: 0 0 30px 30px;
}
.hero img {
  width: 100%; 
  height: 900px;
  object-fit: cover; 
  object-position: center 78%; /* ✅ foco base (desktop) */
}
.hero-text {
  position: absolute;
  top: 90%; left: 50%; transform: translate(-50%, -50%);
  color: #222; background: rgba(230, 230, 230, 0.7);
  padding: 1rem 2rem; border-radius: 12px; text-align: center;
  max-width: 90%;
}
.hero-text h2 { font-size: 3rem; margin-bottom:.5rem; font-weight:700; }

/* =============================
   SECCIONES
   ============================= */
.section{ padding:4rem 2rem; max-width:1200px; margin:auto; }
.section h3{ font-size:2rem; margin-bottom:2rem; text-align:center; }

/* VIDEO GRID */
.video-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2rem;
}
.video-grid iframe {
  width:100%; height:350px; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.1); border:none;
}
.video-item h4{
  text-align:center; margin-bottom:.5rem; font-size:1rem; color:var(--primary);
}

/* =============================
   PLANES (flip cards)
   ============================= */
.planes-container{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:1rem;
}
.plan{ perspective:1000px; width:300px; height:300px; }
.plan-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .6s;
}
.plan:hover .plan-inner{ transform:rotateY(180deg); }

.plan-front, .plan-back{
  position:absolute; width:100%; height:100%;
  backface-visibility:hidden;
  border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.1);
  padding:20px; display:flex; flex-direction:column;
  justify-content:center; align-items:center;
}
.plan-front{ background:#fff; }
.plan-front h4{ margin-bottom:10px; font-weight:700; font-size:1.2rem; }
.plan-back{
  background:#fff; color:#222; transform:rotateY(180deg);
  text-align:left; font-size:.95rem; padding:18px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.plan-back .plan-list{
  margin:0; padding-left:1.1rem; line-height:1.5;
  display:flex; flex-direction:column; gap:.35rem;
}
.plan-back .plan-list li{ margin:0; }

.cta-button{
  display:inline-block; margin-top:1.5rem;
  padding:1rem 2rem; background:#277920; color:#fff;
  font-weight:bold; border-radius:8px; text-decoration:none;
  transition:background .3s;
}
.cta-button:hover{ background:#0056b3; }

/* =============================
   REDES + FOOTER
   ============================= */
.redes-sociales{ text-align:center; margin-top:3rem; }
.iconos-redes{ display:flex; justify-content:center; gap:1.5rem; font-size:2rem; }
.iconos-redes a{ color:#3916e6; transition:color .3s; }
.iconos-redes a:hover{ color:var(--primary); }

footer{
  background:#ffffff;   /* negro sólido */
  color:#000000;        /* texto blanco */
  text-align:center;
  padding:20px;
  margin-top:40px;
  border-top:none;   /* sin franja gris */
  font-size:0.9rem;
}

/* =============================
   RESPONSIVE MEDIA QUERIES
   ============================= */

/* Tablet y móvil */
@media (max-width:768px){
  .logo-container img{ width:100px }
  nav{ display:none; flex-direction:column; background:#f8f8f8;
       position:absolute; top:60px; right:20px; width:200px;
       border:1px solid #ddd; padding:1rem; box-shadow:0 4px 12px rgba(0,0,0,.1); }
  nav.active{ display:flex }
  nav a{
    margin:.5rem 0;
    font-size:1rem;
    font-family:'Montserrat', system-ui, sans-serif;
    font-weight:700;
  }
  .menu-toggle{ display:block }
  .planes-container{ flex-direction:column; align-items:center }
  .plan{ width:100%; max-width:520px; height:340px }
}

/* Tablet horizontal (≥769px y ≤1024px) */
@media (min-width:769px) and (max-width:1024px){
  nav a{ font-size:1rem }
  .video-grid iframe{ height:300px }
  .hero-text h2{ font-size:2.4rem }
  .hero-text{
    top: 75%;
    padding: .6rem 1rem;
    max-width: 95%;
  }
  .hero-text h2{
    white-space: nowrap;
    line-height: 1;
    font-size: clamp(1.8rem, 3vw, 2.2rem);
  }
}

/* Desktop medio (1025px a 1299px) */
@media (min-width:1025px) and (max-width:1299px){
  nav a{ font-size:1rem }
  .section{ padding:3rem 1.5rem }
  .video-grid iframe{ height:320px }
}

/* Desktop grande (≥1300px) */
@media (min-width:1300px){
  .section{ max-width:1120px }
  .video-grid iframe{ height:400px }
}

/* Ultra wide (≥1440px) */
@media (min-width:1440px){
  .section{ max-width:1240px }
}

/* Super grande (≥1600px) */
@media (min-width:1600px){
  .section{ max-width:1360px }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important }
}

/* =============================
   HERO IMAGE POSITIONS POR DISPOSITIVO
   ============================= */

/* Celular (≤768px) */
@media (max-width:768px) {
  .hero { height: 420px; }
  .hero img {
    height: 100%;
    object-position: 70% 35%;
  }
}

/* Tablet (769px – 1024px) */
@media (min-width:769px) and (max-width:1024px) {
  .hero { height: 460px; }
  .hero img {
    height: 100%;
    object-position: 80% 60%;
  }
}

/* Texto del banner más pequeño en móvil */
@media (max-width:768px) {
  .hero-text h2 {
    font-size: 1.6rem;
    line-height: 1.3;
  }
  .hero-text {
    padding: 0.6rem 1rem;
  }
}

/* Flip por toque/clic (móvil) */
.plan.is-flipped .plan-inner{ transform: rotateY(180deg); }

/* Compatibilidad iOS/Safari */
.plan-inner{ -webkit-transform-style: preserve-3d; }
.plan-front, .plan-back{ -webkit-backface-visibility: hidden; }

/* =============================
   FORZAR SOLO UNA LÍNEA EN TABLET VERTICAL (ej. Galaxy Tab A16)
   ============================= */
@media (min-width:769px) and (max-width:850px) and (orientation:portrait){
  .hero-text{
    max-width:none;
    width:fit-content;
    display:inline-block;
    padding:0.2rem 0.6rem;
    box-sizing:border-box;
    left:50%;
    transform:translate(-50%, -50%);
  }
  .hero-text h2{
    white-space:nowrap;                /* ✅ fuerza una sola línea */
    font-size:clamp(1.2rem, 4vw, 1.5rem);
    line-height:1.1;
    margin:0;
    letter-spacing:-0.01em;
  }
}
.hero-text h2{
  white-space: nowrap !important;  /* fuerza una sola línea */
  overflow: hidden; 
  text-overflow: ellipsis;         /* por si algún día no cabe */
}
.footer-link {
  color: inherit;              /* mismo color del texto del footer */
  text-decoration: none;       /* sin subrayado normal */
  font-weight: 600;            /* un poco más destacado */
}

.footer-link:hover {
  color: #007bff;              /* azul al pasar el mouse */
  text-decoration: underline;  /* subrayado */
}