:root {
  --bg-dark: #0f1016;
  --card-bg: #f7f8fa;
  --radius: 18px;
  --shadow: 0 25px 60px -10px rgba(0,0,0,0.25);
  --text-dark: #1f2430;
  --muted: #6f7287;
  --accent: #FF6A00;
  --btn-bg: #FF6A00;
  --btn-color: #111;
  --naranja: #FF6A00;
  --blanco: #FAFAFA;
  --negro: #1E1E1E;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: auto;
  overflow-x: hidden;
  background-color: #1E1E1E;
}

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 15vh 5vw 0;
  color: white;
  background: var(--negro);
}
.hero-text {
  position: relative;
  margin-left: 6rem;
  z-index: 2; /* 👈 más alto que el fondo y logo */
}
.hero-intro {
    margin-top: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1.5s ease-out 0.8s forwards;
  color: #ff6a00;
  font-size: 1.8rem;
font-family: "Aldrich", sans-serif;
  font-weight: 500;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-text h1 {
  color: var(--blanco);
  font-size: 7.5rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: start;
  max-width: 1400px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
  font-style: normal;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  opacity: 0.06; /* Ajustá la intensidad */
  pointer-events: none;
  z-index: 1;
}


.video-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.video-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
  filter: brightness(0.6); /* oscurece un poco para legibilidad */
}


.subtitle {
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1.5s ease-out 0.8s forwards;
  color: #ff6a00;
  font-size: 1.8rem;
  font-family: "Aldrich", sans-serif;
  font-weight: 500;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* tu resaltado con subrayado (usa ::after) */
.resaltado{
  position: relative;
  background: linear-gradient(90deg,#ff6a00,#ff9900,#d1973b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Aldrich", sans-serif;
}
.resaltado::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-0.15em;              /* subrayado en la parte de ABAJO */
  height:2px;
  background: var(--naranja,#FF6A00);
  opacity:.9;
  pointer-events:none;
}


@keyframes shine {
  to {
    background-position: 200% center;
  }
}
@keyframes underlineSlide {
  from {
    width: 0%;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}
/* cursor del typewriter: ahora en ::before para no pisar el subrayado */
.type-js{
  display: inline-block;
  white-space: nowrap;
  padding-right: 0;
  vertical-align: baseline;
}

.type-js::before{ content: none !important; }

@keyframes caretBlink{ 50% { opacity: 0; } }




.cta-btn {
  display: inline-block;
  margin-top: 3rem;
  padding: 1.2rem 3rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--negro);
  background: linear-gradient(90deg, #ff6a00, #fcb045);
  border: none;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(255, 106, 0, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta-btn:hover {
  transform: scale(1.08);
  color: var(--blanco);
  box-shadow: 0 10px 30px rgba(255, 106, 0, 0.5);
}
.hero-logo-signature {
  position: absolute;
  bottom: 4rem;
  right: 5vw;
  display: block;
  z-index: 3;
}

.hero-logo-signature img {
  height: 5rem; /* ajustás según lo quieras de grande */
  width: auto;
  opacity: 1; /* si querés más sutil bajás a 0.8 o 0.6 */
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  transition: opacity .3s, transform .2s;
}

.hero-logo-signature:hover img {
  transform: scale(1.05);
}



/*SECCION 2 PORQUE DEBERIAS TRABAJAR CON NOSTROS*/
/* Sección */
.seccion-valor{
  background-image:url(fondoisotipoglass.png); border-radius:20px; padding:3rem 1rem;
  display:flex; flex-direction:column; align-items:center; gap:3.4rem;
  font-family: "Inter", sans-serif;
}

/* Títulos */
.titulo-valor{ max-width:1400px; width:100%; margin: 1rem auto;  }
.titulo-valor h2{ font-size: 1.1rem; color:var(--dark); margin:0 0 .5rem; }
.titulo-valor h3{ font-size:1.9rem; color:var(--accent); margin:0 0 1rem; 
  font-family: "Aldrich", sans-serif;}
.titulo-valor p { max-width:720px; color:var(--gray); line-height:1.4; }

/* Tarjeta con borde pro */
.card-valor{ max-width:1300px; width:100%; margin:0 auto; border-radius:18px; padding:2px;
  background: linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg, var(--accent), #E8CA84, #2F586E) border-box;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.contenedor-valor{
  display: grid;
  grid-template-columns: 320px 1fr;  /* links a la izq, img a la derecha */
  gap: 1.2rem;                       /* separación entre tarjetas */
  background: transparent;           /* sacamos fondo global */
  border-radius: 0;                  /* ya no hace falta */
  box-shadow: none;                  /* idem */
  border-radius: 14px;     /* mismo radio visual que la tarjeta */
  overflow: hidden;        /* recorta el fondo del hover */
  padding: 4px;            /* micro respiro interior (opcional) */

}
.links-valor{
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* los reparte en toda la altura */
  background: transparent;        /* sin color propio */
  box-shadow: none;               /* nada de sombra */
  border-radius: 0;               /* sin bordes */
  padding: 0;                     /* pegados al borde del contenedor */
  gap: 0;                         /* sin separación vertical */
}

/* Lista de links */
.links-valor .item-link{
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0 14px;
  border: 0; background: transparent; color: var(--dark);
  cursor: pointer;
  font-weight: 500;
  font-size: .85rem;

  /* transiciones suaves */
  transition:
    background .22s ease,
    transform  .14s ease,
    box-shadow .22s ease,
    color      .22s ease;
  will-change: background, transform;
  border-radius: 10px;   /* redondeo interno por si hay huecos entre items */
}
/* Hover: leve highlight + “saltito” */
.links-valor .item-link:hover{
  background: linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.06));
  transform: translateX(6px);           /* saltito */
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
/* Activo: un poco más marcado pero sin caja dura */
.links-valor .item-link.active{
  background: rgba(0,0,0,.08);
}
/* Flecha con movimiento en hover (sutil) */
.links-valor .item-link .flecha{
  width: 20px; height: 20px; flex: 0 0 20px;
  color: var(--accent);
  transition: transform .18s ease;
}
.links-valor .item-link:hover .flecha{
  transform: translateX(3px);
}
/* Accesibilidad: foco bonito sin romper bordes */
.links-valor .item-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,166,0,.25); /* acorde a tu acento */
}

.viewer {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);

  /* 🔒 mantiene altura estable aunque cambie la imagen */
  aspect-ratio: 16/9;   /* o el ratio que más te guste */
  height: 100%;
}

.image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* rellena el espacio sin deformarse */
  transition: transform .6s ease, opacity .35s ease;
}

.image-wrap:hover img,
.image-wrap:focus-visible img{ transform: scale(1.03); }

/* Crossfade */
.image-wrap img.fading{ opacity:0; }

/* Overlay que aparece al hover/tap */
.overlay{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.8) 100%);
  color:#fff; padding:1.2rem 1.2rem 1.4rem;
  transform: translateY(62%); opacity:.0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  will-change: transform, opacity;
}
.image-wrap:hover .overlay,
.image-wrap:focus-visible .overlay,
.image-wrap.show-overlay .overlay{ transform: translateY(0); opacity:1; }

.overlay h4{ margin:0 0 .35rem; font-size:1.15rem; }
.overlay p { margin:0 0 .8rem; font-size:.98rem; opacity:.95; }
.overlay-cta{
  display:inline-block; padding:.6rem .9rem; border-radius:10px;
  background: linear-gradient(135deg, var(--accent), #E8CA84);
  color:#111; text-decoration:none; font-weight:700;
  transition: transform .12s ease; 
}
.overlay-cta:hover{ transform: translateY(-1px); }

/* Carrusel negro dentro de sección clara */
.tools-carousel{
  background: #0b0b0b;
  border-radius: 16px;
  padding: 14px 0;
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}

/* fades en bordes para que el loop sea más suave visualmente */
.tools-carousel::before,
.tools-carousel::after{
  content:"";
  position:absolute; top:0; bottom:0; width:80px; z-index:2;
  pointer-events:none;
  /* usamos mask para desvanecer */
  background: linear-gradient(to right, #0b0b0b 0%, rgba(11,11,11,0) 100%);
}
.tools-carousel::after{
  right:0; transform: rotate(180deg);
}
.tools-carousel::before{ left:0; }

/* la pista que se mueve */
.tools-track{
  display:flex; align-items:center; gap: 36px;
  width: max-content;
  animation: tools-scroll 24s linear infinite;
}
.tools-carousel:hover .tools-track{ animation-play-state: paused; }

@keyframes tools-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); } /* porque duplicamos el set */
}

/* cada ítem */
.tool{
  display:flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 12px;
  text-decoration:none;
  color:#eaeaea;
  opacity:.9;
  transition: transform .18s ease, opacity .18s ease, background .18s ease, filter .18s ease;
}
.tool img{
  height: 36px; width:auto; display:block;
  filter: grayscale(100%) brightness(1.1);
}
.tool span{
  font-size: .95rem; letter-spacing:.2px; opacity:.85;
}

/* hover: un poquito de vida */
.tool:hover{
  transform: translateY(-2px);
  opacity:1;
  background: rgba(255,255,255,.06);
}
.tool:hover img{
  filter: grayscale(0%) brightness(1);
}

/* reduce motion: sin animación, scroll horizontal manual */
@media (prefers-reduced-motion: reduce){
  .tools-track{ animation: none; }
  .tools-carousel{ overflow-x: auto; }
}


/* SECCION PROCESOS DE TRABAJO */

/*ANIMACIONES GENERALES*/
.fade-section {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(10px);
  transition: opacity .8s ease-out, filter .8s ease-out, transform .6s ease-out;
  will-change: opacity, filter, transform;
  border-radius: 1rem;
}

/* cuando entra en vista */
.fade-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
/*FINAL ANIMACIONES GENERALES*/


.container-grilla {
  box-sizing: border-box;
  padding: 4rem 1rem; 
  background-color: #1E1E1E;
  
}

.container {
  position: relative;
  max-width: 1800px;
  margin: 0 auto; 
  min-height: 800px;
  box-shadow: 0 20px 15px #000000;
  border-radius: 16px;
  overflow: visible; /* que no recorte nada que flote */
}
.titulo-grilla {
  text-align: start;
  max-width: 1800px;
  margin: 0 auto 3rem auto;
  padding: 0 1rem;
}
.titulo-grilla h2 {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: .8rem;
  font-family: "Aldrich", sans-serif;
}
.titulo-grilla p {
  font-size: 1rem;
  color: var(--card-bg);
  line-height: 1.6;
  font-family: "Inter", sans-serif;
  max-width: 650px;
}


.container .slide .item{
    width: 200px;
    height: 340px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 20px;
    background-position: 50% 50%;
    background-size: cover;
    display: inline-block;
    transition: 0.5s;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    border-radius: 14px; /* mantiene estética */
}

.slide .item:nth-child(1),
.slide .item:nth-child(2){
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
}

.slide .item:nth-child(3){
    left: 50%;
}
.slide .item:nth-child(4){
    left: calc(50% + 220px);
}
.slide .item:nth-child(5){
    left: calc(50% + 440px);
}

/* here n = 0, 1, 2, 3,... */
.slide .item:nth-child(n + 6){
    left: calc(50% + 660px);
    opacity: 0;
}

.item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Oscurecer */
  background-color: rgba(0, 0, 0, 0.5); /* capa negra al 50% */
  background-blend-mode: darken; /* mezcla la imagen con la capa */
}


.item .content{
    position: absolute;
    top: 50%;
    left: 100px;
    width: 300px;
    text-align: left;
    color: #eee;
    transform: translate(0, -50%);
    font-family: system-ui;
    display: none;
    
}

.slide .item:nth-child(2) .content{
    display: block;
}

.content .name{
    font-size: 40px;
    text-transform: uppercase;
    
  font-family: "Aldrich", sans-serif;
    font-weight: bold;
    opacity: 0;
    animation: animate 1s ease-in-out 1 forwards;  
    text-shadow: 
    0 0 5px #c4a997,
    0 0 10px #837c75,
    0 0 20px #423f3b;
}

.content .des{
    margin-top: 10px;
    margin-bottom: 20px;
    opacity: 0;
    font-size: 1.1rem;
    font-weight: 600;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
      text-shadow: 
    0 0 8px #c4a997,
    0 0 10px #837c75,
    0 0 20px #423f3b;
}

.content button{
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    opacity: 0;
    animation: animate 1s ease-in-out 0.6s 1 forwards;
}


@keyframes animate {
    from{
        opacity: 0;
        transform: translate(0, 100px);
        filter: blur(33px);
    }

    to{
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
    }
}



.button{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
}

.button button{
    width: 40px;
    height: 35px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    margin: 0 5px;
    border: 1px solid #000;
    transition: 0.3s;
}

.button button:hover{
    background: #ababab;
    color: #fff;
}


/* SECCION QUE NECESITAS SABER ANTES DE EMPEZAR */

.edu-cards {
  background-color: #1E1E1E;
  padding: 5rem 2rem;
  color: var(--text-dark);
  font-family: "Inter", system-ui, sans-serif;
  border-radius: 1rem;
}
.edu-container {
  max-width: 1400px;
  margin: 0 auto;
}
.edu-title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: #fff;
  
  font-family: "Aldrich", sans-serif;
}
.edu-subtitle {
  font-size: 1rem;
  color: #c1c4d6;
  margin-bottom: 2rem;
  max-width: 800px;
}

/* Cards */
.edu-card {
  display: flex;
  flex-wrap: nowrap;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  gap: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
  align-items: center;
  position: relative;

  opacity: 0;
  will-change: transform, opacity;
    overflow: hidden;         /* recorta el blur */
  background: none;         /* aseguramos que no haya otro bg compitiendo */
  isolation: isolate;       /* capa propia para z-index */
}

/* ====== Layout pantalla completa (3 tarjetas llenan el alto) ====== */
.edu-cards.fullscreen {
  padding: 0;                 /* sin padding del section para encajar exacto */
  background: var(--bg-dark); /* tu fondo oscuro */
}
.edu-cards.fullscreen .edu-container {
  min-height: 100vh;          /* ocupan toda la pantalla */
  padding: 6vh 5vw;           /* respiro interno */
  display: flex;
  flex-direction: column;
  gap: 2vh;                   /* separación entre tarjetas */
}

/* ====== Tarjeta grande con fondo full ====== */
.edu-card.big {
  flex: 1 1 0;                /* las 3 reparten el alto en partes iguales */
  height: 20rem;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 2rem;
  color: #fff;

  /* Fondo full por variable inline */
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 50px 120px -10px rgba(0,0,0,0.6), 0 20px 60px -5px rgba(0,0,0,0.4);
}

/* Overlay para legibilidad del texto */
.edu-card.big::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg, none);
  background-size: cover;
  background-position: center;
  /* Ajustables por card (valores por defecto) */
  filter: blur(var(--blur, 5px)) brightness(var(--dim, 0.68));
  transform: scale(var(--zoom, 1.1));   /* evita bordes duros del blur */
  z-index: 0;
  will-change: transform, filter;
}
.edu-card.big > * { position: relative; z-index: 1; } /* eleva tu contenido */

.edu-card.big .edu-text h3 { font-size: 2rem; }
.edu-card.big .desc { color: #e9e9e9; }

/* Si querés la columna de botón a la derecha fija: */
.edu-card.big .edu-card-right { margin-left: auto; }

/* ====== Slide desde el BORDE de la pantalla ====== */
:root { --slide-distance: 50vw; }  /* podés pasar a 120vw si querés más “vuelo” */

.slide-left,
.slide-right {
  opacity: 0;
  will-change: transform, opacity;
  transition: transform .9s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
}

/* arrancan fuera de la pantalla */
.slide-left  { transform: translateX(calc(-1 * var(--slide-distance))); }
.slide-right { transform: translateX(var(--slide-distance)); }

/* cuando entran al viewport (tu JS ya agrega .in-view) */
.in-view {
  opacity: 1;
  transform: translateX(0);
}


.edu-card-left {
  display: flex;
  flex: 1;
  gap: 1rem;
  align-items: flex-start;
}
.edu-icon {
  font-size: 4.5rem;
  flex-shrink: 0;
}
.edu-text h3 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
}
.small-label {
  font-size: 0.9rem;
  font-weight: 600;
  font-family: "Aldrich", sans-serif;
 text-shadow: 
    0 0 2px #ff6a00b6,
    0 0 4px #8d8275,
    0 0 4px #000000;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 4px 0 6px;
  color: var(--accent);
}
.desc {
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
  color: #44475a;
}

/* Botón */
.edu-card-right {
  flex-shrink: 0;
}
.edu-btn {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  background: var(--btn-bg);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s, filter .2s;
  white-space: nowrap;
}
.edu-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* =========================== */
/*  ESTILOS SECCIÓN PAQUETES   */
/* =========================== */
.paquetes {
  background: var(--negro);
  padding: 4rem 2vw;
  color: var(--card-bg);
  max-width: 2440px;
}

.paquetes-intro {
  max-width: 2440px;
  margin: 0 auto 4rem;
  text-align: left;
  font-family: "Inter", sans-serif;
}
.paquetes-intro h2 {
  max-width: 1000px;
  font-size: 2.8rem;
  margin-bottom: 1rem;
  font-family: "Aldrich", sans-serif;
  color: var(--accent);
}
.paquetes-intro p {
  font-size: 1.1rem;
  color: var(--gris-claro);
  line-height: 1.6;
  max-width: 800px;
}

/* GRID DE CARDS */
.paquetes-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,2fr));
  gap:1.1rem;
  align-items:stretch;             /* estira todas las tarjetas */
}

/* CARD BASE */
.paquete-card {
  background: var(--gris-oscuro);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
  height:100%;
}
.paquete-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}
/* =============================== */
/* BORDE CON PULSO (sin rotación)  */
/* =============================== */

/* target: 2° y 3° card + las que tengan .destacado */
.paquetes-grid > article.paquete-card.destacado,
.paquetes-grid > article:nth-of-type(2),
.paquetes-grid > article:nth-of-type(3){
  position: relative;
  border-radius: 1rem;
}

/* anulamos cualquier animación previa de giro del anillo */
.paquetes-grid > article.paquete-card.destacado::after,
.paquetes-grid > article:nth-of-type(2)::after,
.paquetes-grid > article:nth-of-type(3)::after{
  /* anillo recortado (borde) */
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;                     /* grosor del borde */
  border-radius: inherit;

  /* borde estático (podés ajustar colores/ángulo) */
  background: linear-gradient(135deg,
              var(--naranja, #ff6a00) 0%,
              #E8CA84 50%,
              var(--blue, #2F586E) 100%);

  /* recorte para que solo se vea el aro */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  z-index: 2;               /* sobre el fondo de la card */
  pointer-events: none;

  /* 🔒 importante: SIN rotación */
  transform: none !important;
  animation: border-pulse 2.8s ease-in-out infinite !important; /* solo pulso */
  will-change: opacity, filter;
}

/* el contenido siempre por encima del anillo */
.paquete-card > *{ position: relative; z-index: 3; }

/* pulso de brillo (respira) */
@keyframes border-pulse{
  0%, 100%{
    opacity: .45;
    filter: brightness(1) drop-shadow(0 0 0 rgba(255,106,0,0));
  }
  50%{
    opacity: 1;
    filter: brightness(1.25) drop-shadow(0 0 14px rgba(255,106,0,.35));
  }
}

/* (opcional) suavizá el “destacado” viejo para que no se pelee con el pulso */
.paquete-card.destacado{
  border-color: transparent;
  box-shadow: 0 0 24px rgba(255,106,0,.16), 0 0 48px rgba(209,151,59,.10);
}


/* IMAGEN */
.mock{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;         /* o el ratio real de tu mockup */
  border-radius: 16px;
  overflow: hidden;
}
.mock-video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* llena sin deformarse */
}


/* CONTENIDO */
.paquete-content {
  padding: 1rem;
  min-height: 0;          /* evita overflow raro en flex */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: var(--intro-min, 9.5rem);
  font-family: "Inter", sans-serif;
  gap:.6rem;
}


.paquete-content h3 {
  margin-bottom: 0.1rem;
  font-size: 1.4rem;
}
.paquete-content p {
  flex: 0;
  margin-bottom: .7rem;
  color: var(--gris-claro);
  line-height: 1.5;
}
.paquete-content strong {
  color: var(--blanco);
}

/* BOTÓN */
.paquete-btn {
  display: inline-block;
  order: 2;
  margin: 0.5rem 0;
  padding: 0.8rem 1.8rem;
  background: var(--naranja);
  color: var(--negro);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s, transform 0.2s;
  align-self: flex-start;
}
.paquete-btn:hover {
  background: #ff7f1a;
  transform: translateY(-2px);
}

/* LISTA DE PAQUETES */
.paquete-features {
  list-style: none;
  padding: 0;
  order: 1;               /* viene antes que el botón aunque en el HTML esté después */
  flex: 1;                /* empuja el CTA hacia abajo */
  margin: 0;
  padding-left: 1.2rem;   /* el que vos uses */
  justify-content: flex-start;
  margin: 0.2rem 0 0;
}
.paquete-features li {
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  color: var(--gris-claro);
}
.paquete-features li::before {
  content: "✔";
  color: var(--naranja);
  margin-right: 0.6rem;
  font-size: 1rem;
}

/* Footer */
.site-footer {
  background-color: var(--negro);
  color: var(--blanco);
  font-family: "Inter", sans-serif;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rem 5vw;
  min-height: 40vh; 
}
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center; /* logo + contacto alineados a la izquierda */
}

.footer-contact {
  display: flex;
  flex-direction: column;
}

.footer-contact a {
  color: var(--blanco);
  text-decoration: none;
  font-size: 1rem;
  padding: 0.5rem;
  transition: color 0.3s;
}

.footer-contact a:hover {
  color: var(--naranja);
}



.footer-logo img {
  max-height: 90px;
  object-fit: contain;
}

.footer-links {
  text-align: center;
}
.footer-links h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: var(--naranja);
  
  font-family: "Aldrich", sans-serif;
}
.footer-links ul {
  list-style: none;
}
.footer-links li {
  margin-bottom: 0.6rem;
}
.footer-links a {
  color: var(--blanco);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-links a:hover {
  color: var(--naranja);
}

.footer-map iframe {
  width: 500px;
  height: 300px;
  border: 0;
  border-radius: 8px;
}

.footer-bottom {
  background-color: rgba(255, 255, 255, 0.05);
  text-align: center;
  padding: 1rem 0;
  font-size: 0.9rem;
}
/* ==== WhatsApp Float (limpio) ==== */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;

  width: 60px;
  height: 60px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  z-index: 999;

  /* animación hover */
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;

  /* por si tenías la animación bounce, mejor activarla con una clase aparte */
  /* animation: bounce 2s infinite; */
}

/* Icono PNG: que no se desborde del botón */
.whatsapp-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none; /* que el click siempre sea del <a> */
}

/* Hover/focus: agranda un toque y resalta */
@media (hover: hover) {
  .whatsapp-float:hover {
    transform: scale(1.08);
    filter: saturate(1.05);
    box-shadow: 0 10px 22px rgba(0,0,0,.45);
  }
}
/* Accesible: teclado/mobile tap (focus visible) */
.whatsapp-float:focus-visible {
  outline: 2px solid rgba(37, 211, 102, .5);
  outline-offset: 4px;
  transform: scale(1.06);
}

/* === Cartel/Pill con ::after (texto personalizable por data-tooltip) === */
.whatsapp-float::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);            /* aparece a la izquierda del botón */
  bottom: 50%;
  transform: translateY(50%) translateX(6px) scale(.98);
  transform-origin: right center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: #ffffff;
  color: #000000;
  font-size: 1.1rem;
  line-height: 1.2;
  padding: .6rem .8rem;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Flechita del cartel */
.whatsapp-float::before {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 50%;
  transform: translateY(50%);
  border: 7px solid transparent;
  border-right-color: #111;

  opacity: 0;
  transition: opacity .18s ease;
}

/* Mostrar cartel en hover (desktop) y focus (teclado/touch) */
@media (hover: hover) {
  .whatsapp-float:hover::after,
  .whatsapp-float:hover::before {
    opacity: 1;
    transform: translateY(50%) translateX(0) scale(1);
  }
}
.whatsapp-float:focus-visible::after,
.whatsapp-float:focus-visible::before {
  opacity: 1;
  transform: translateY(50%) translateX(0) scale(1);
}
/* =============================================== */
/* FAQS con look & feel de la sección 2 (links)   */
/* =============================================== */

/* — Fondo: SOLO imagen, sin gradientes extra — */
.faqs{
  /* ⬇️ Cambiá esta ruta a tu archivo real */
  --faq-bg: url('fondoisotipoglass.png');

  background-image: var(--faq-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-radius: 20px;
  padding: clamp(2.5rem, 4vw, 4rem) 1rem;
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* contenedor central */
.faqs-inner{
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

/* título */
.faqs-title{
  text-align:left;
  max-width: 800px;
}
.faqs-title h2{
  margin:0 0 .35rem;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--accent);
  font-family: "Aldrich", sans-serif;

}
.faqs-title p{
  margin:0;
  color: #000;
  opacity: .9;
}

/* lista en columna */
.faqs-list{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

/* ===== Ítem FAQ (mismo gesto que .item-link) ===== */
.faq{
  border: 0;
  background: transparent;
  border-radius: 12px;
}

/* sacamos el marcador nativo */
.faq-q::-webkit-details-marker{ display:none; }

.faq-q{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 14px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  color: #000000;

  /* transiciones como en sección 2 */
  transition:
    background .22s ease,
    transform  .14s ease,
    box-shadow .22s ease,
    color      .22s ease;
  will-change: background, transform;
  background: transparent; /* sin subrayados */
}

/* hover: highlight + saltito a la derecha */
.faq:hover .faq-q{
  background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.28));
  transform: translateX(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* activo/abierto: igual que .item-link.active */
.faq[open] .faq-q{
  background: rgba(0,0,0,.26);
}

/* flecha con pequeño empujón en hover y giro al abrir */
.faq .flecha{
  width: 20px; height: 20px; flex: 0 0 20px;
  color: var(--accent, #D1973B);
  transition: transform .18s ease;
}
.faq:hover .flecha{ transform: translateX(3px); }
.faq[open] .flecha{ transform: rotate(90deg); }

/* respuesta */
.faq .faq-a{
    padding: 0 16px 14px 18px;
  margin-top: .35rem;
  color: #000000;
  line-height: 1.55;
  border-left: 2px solid var(--accent, #D1973B);

}
.faq-a ul{ margin: .25rem 0 0 1rem; }

/* accesibilidad: foco lindo como en sección 2 */
.faq-q:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,166,0,.25);
  border-radius: 10px;
}


@media (max-width: 1600px){
    
.hero-text {
  position: relative;
  margin-left: 6rem;
  z-index: 2; /* 👈 más alto que el fondo y logo */
}
.hero-intro {
    margin-top: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1.5s ease-out 0.8s forwards;
  color: #ff6a00;
  font-size: 1.2rem;
font-family: "Aldrich", sans-serif;
  font-weight: 500;
}

/* tu resaltado con subrayado (usa ::after) */
.resaltado{
  position: relative;
  background: linear-gradient(90deg,#ff6a00,#ff9900,#d1973b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Aldrich", sans-serif;
}

.hero-text h1 {
  color: var(--blanco);
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: start;
  max-width: 1400px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
  font-style: normal;
}

.subtitle {
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1.5s ease-out 0.8s forwards;
  color: #ff6a00;
  font-size: 1.2rem;
  font-family: "Aldrich", sans-serif;
  font-weight: 500;
}

.hero-logo-signature img {
  height: 5rem; /* ajustás según lo quieras de grande */
  width: auto;
  opacity: 1; /* si querés más sutil bajás a 0.8 o 0.6 */
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  transition: opacity .3s, transform .2s;
}

/* SECCION PAQUETES 1600px */

/* GRID DE CARDS */
.paquetes-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,2fr));
  gap:1.1rem;
  align-items:stretch;             /* estira todas las tarjetas */
}
}

/* ==============================
   TABLET (≤ 1024px)
   ============================== */
@media (max-width: 1024px){
    .hero{
    min-height: 100svh;                 /* alto real en móviles/ Safari */
    padding: 12vh 4vw 6vh;
  }
  .hero-text{
    margin-left: 0;                      /* quita sangría que empuja el h1 */
    max-width: 80vw;
  }
  .hero-intro,
  .subtitle{
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    margin-top: 1rem;
  }
  .hero-text h1{
    font-size: clamp(3.6rem, 7vw, 6rem);
    line-height: 1.08;
    max-width: 92vw;
  }
  .cta-btn{
    margin-top: 2rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
  }
  .hero-logo-signature img{
    height: 4rem;
  }

  /* Tipografía un toque más contenida */
  h1{ font-size: clamp(2rem, 5vw, 2.6rem); }
  h2{ font-size: clamp(1.4rem, 3.6vw, 2rem); }
  h3{ font-size: clamp(1.1rem, 3vw, 1.4rem); }

  /* Sección: ¿Por qué deberíamos trabajar juntos? */
  .seccion-valor{ padding: 2.5rem 1rem; border-radius: 16px; gap: 1.2rem; }
  .titulo-valor{ max-width: 1100px; margin: 0 auto .6rem; }
  .titulo-valor p{ max-width: 760px; }

  /* Tarjeta (links + viewer) */
  .contenedor-valor{
    grid-template-columns: 280px 1fr;   /* angosta la columna de links */
    gap: 1rem;
    height: auto;                        /* que respire en tablet */
    align-items: stretch;
  }

  /* Columna de links: filas iguales, tap targets cómodos */
  .links-valor{
    grid-template-rows: repeat(6, minmax(48px, 1fr));
    border-radius: 12px;
  }
  .links-valor .item-link{
    padding: 0 12px;
  }

  /* Viewer */
  .viewer{ border-radius: 12px; }
  .image-wrap{ height: 100%; }
  .overlay{ transform: translateY(58%); } /* muestra un poco más el overlay */

  /* Carrusel de herramientas */
  .tools-carousel{ border-radius: 14px; padding: 10px 0; }
  .tools-track{ gap: 28px; }
  .tool img{ height: 32px; }
  .tool span{ font-size: .9rem; }

  /* Edu cards (Qué podemos construir) */
 /* contenedor sin grid raro, con aire lateral */
  .edu-container{
    display:block;
    padding: 0 16px;
  }

  /* cada tarjeta: bloque, sin solaparse */
  .edu-card{
    position: relative;
    margin: 20px 0;                  /* separa las tarjetas */
    border-radius: 16px;
    overflow: hidden;                 /* recorta contenido interno */
    isolation: isolate;               /* evita que sombras/overlays “sangren” */
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    transform: none !important;       /* neutraliza animaciones en tablet */
    opacity: 1 !important;
  }
  .edu-card.big{
    min-height: 420px;                /* 🔒 asegura espacio para textos + CTA */
    background-size: cover;
    background-position: center;
    background-image: var(--bg);      /* por si usás --bg inline */
  }

  /* lado izquierdo: icono + textos en filas prolijas */
  .edu-card-left{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 14px;
    padding: 18px;
    z-index: 1;
  }

  /* iconos PNG */
  .edu-icon{
    width: 156px; height: 156px;
    border-radius: 10px;
    display: grid; place-items: center;
    backdrop-filter: blur(2px);
    flex-shrink: 0;
  }
  .edu-icon img{ max-width:70%; max-height:70%; object-fit:contain; }

  /* tipografía a escala tablet */
  .edu-text h3{ font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.2; }
  .edu-text .small-label{ font-size: .95rem; }
  .edu-text .desc{ font-size: 1rem; }

  /* CTA siempre pegado abajo sin pisar la tarjeta de abajo */
  .edu-card-right{
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
  }
  .edu-btn{ padding: .7rem 1rem; border-radius: 10px; }

  /* overlays si usás .overlay dentro de la tarjeta */
  .overlay{
    transform: translateY(58%);
    padding: 1rem 1rem 1.2rem;
  }

  /* por si quedaba alguna animación que desplaza */
  .slide-left, .slide-right{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  /* Botón de WhatsApp flotante */

  .whatsapp-float img{ width: 80px; }

  /* SECCION PAQUETES TABLET */
/* SECCION PAQUETES 1024px */
  #paquetes.fade-section { 
    opacity: 1 !important; 
    filter: none !important; 
    transform: none !important; 
  }
/* GRID DE CARDS */
.paquetes-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,2fr));
  gap:1rem;
  align-items:stretch;             /* estira todas las tarjetas */
}
.paquete-card {
  max-height: 100%;

}
    
.footer-content{
    grid-template-columns: 1fr 1fr;   /* logo/contacto | links */
    gap: 1.5rem;
  }

  /* Mapa ocupa todo el ancho abajo, pero más CHICO de alto */
  .footer-map{
    grid-column: 1 / -1;
  }
  .footer-map iframe{
    width: 100%;
    height: clamp(220px, 26vw, 280px);  /* ↓ achica el mapa en tablet */
    border-radius: .8rem;
  }
}


/* ==============================
   MOBILE (≤ 680px)
   ============================== */
@media (max-width: 680px){
 .hero {
    padding: 17vh 1.5rem 18vh; /* más respiro arriba y costados */
    align-items: flex-start;
    text-align: left;
  }

  .hero-text {
    margin-left: 0; /* centrado en mobile */
    max-width: 80%;
  }

  .hero-intro {
    font-size: 1.1rem;
    margin-bottom: 2rem; /* más aire debajo */
  }

  .hero-text h1 {
    font-size: 3rem;
    line-height: 1.3;
    margin-bottom: 3rem; /* más espacio con los p */
  }

  .subtitle {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 2.5rem; /* que no quede pegado al botón */
  }

  .cta-btn {
    margin-top: 2rem; /* botón más abajo */
    font-size: 1.2rem;
    padding: 1rem 2rem;
  }

  .resaltado::after{ bottom: -.12em; height: 2px; } /* subrayado más fino */


  /* Logo firma: más chico y pegado al borde */
  .hero-logo-signature{ right: 12px; bottom: 4rem; }
  .hero-logo-signature img{ height: 4rem; opacity: .9; }

  /* Vídeo: que siempre cubra y no recorte raro */
  .video-bg video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%); /* mantiene centrado */
  }

  /* Espaciado general */
  section{ padding-left: 12px; padding-right: 12px; }

  /* Títulos */
  h1{ font-size: clamp(1.9rem, 8vw, 2.4rem); }
  h2{ font-size: clamp(1.25rem, 6vw, 1.8rem); }
  h3{ font-size: clamp(1.05rem, 5vw, 1.3rem); }

  /* ¿Por qué deberíamos trabajar juntos? */
  .seccion-valor{ padding: 1.8rem 12px; border-radius: 14px; gap: 1rem; }
  .titulo-valor{ width: 100%; max-width: 680px; margin: 0 auto .6rem; }
  .titulo-valor p{ font-size: 1rem; }

  /* Tarjeta: apilar links arriba, imagen abajo */
  .contenedor-valor{
    grid-template-columns: 1fr;
    gap: .8rem;
    height: auto;
  }

  /* Links ocupan ancho completo pero no toda la altura */
  .links-valor{
    grid-template-rows: repeat(6, auto);
    border-radius: 12px;
  }
  .links-valor .item-link{
    padding: .85rem 12px;
    min-height: 46px;
    transform: none !important;  /* evita “saltito” en pantallas chicas */
  }

  /* Viewer con ratio agradable */
  .viewer{
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;          /* imagen estable en mobile */
  }
  .image-wrap{ height: 100%; }
  .image-wrap img{ height: 100%; object-fit: cover; }
  .overlay{
    transform: translateY(62%);
    padding: .9rem .9rem 1rem;
  }
  .overlay h4{ font-size: 1rem; }
  .overlay p { font-size: .9rem; }

  /* Carrusel de herramientas */
  .tools-carousel{ border-radius: 12px; padding: 8px 0; }
  .tools-track{ gap: 20px; }
  .tool{ padding: 6px 10px; }
  .tool img{ height: 26px; }
  .tool span{ display:none; } /* dejá solo el icono en mobile si querés */

  /* Grilla paso a paso / slider */
  .container{ max-width: 100%; box-shadow: none; border-radius: 12px; }
  .item .content{ left: 18px; width: calc(100% - 36px); }
  .content .name{ font-size: 1.25rem; }
  .content .des{ font-size: .98rem; }

  /* Botón WhatsApp */
  .whatsapp-float{
    width: 52px; height: 52px; line-height: 52px; font-size: 26px;
    bottom: 14px; right: 14px;
  }
  .whatsapp-float img{ width: 60px; height: 60px; }
  

  /* SECCION GRILLA GUIA CON IMAGENES EN MINIATURA */

  /* SECCION SLIDES MOBILE*/
  
   .edu-cards{
    padding: .1rem 1vw;      /* menos padding lateral */
  }
  .edu-card.big{
    display: flex;
    flex-direction: column;   /* CTA pasa abajo */
    align-items: flex-start;
    padding: 1rem 0.95rem 1.1rem;
    min-height: 80vh;             /* ← quita 20rem de desktop */
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,.35);
  }

  /* 2) Columna izquierda más compacta */
  .edu-card-left{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    width: 100%;
  }

  .edu-icon img {
    width: 100px;
    padding: 0;
    margin: auto;
  }

  /* 3) Tipografías más legibles en chico */
  .edu-text h3{
    font-size: clamp(1.25rem, 4.8vw, 1.6rem);
    line-height: 1.15;
    margin: .2rem 0 .4rem;
  }
  .small-label{ font-size: .9rem; }
  .desc{
    font-size: .98rem;
    line-height: 1.55;
    color: #e9e9e9;           /* sobre imagen oscura */
  }

  /* 4) CTA abajo y ancho completo (se corta en tu captura) */
  .edu-card-right{
    margin-left: 0;
    width: 100%;
  }
  .edu-btn{
    display: block;
    width: 100%;
    text-align: center;
    margin: .9rem 1rem 1rem; /* arriba .9rem, centrado por ser full width */
    padding: .9rem 1rem;
    border-radius: .6rem;
    font-weight: 600;
  }

  /* 5) Fondo/overlay siguen bien encuadrados */
  .edu-card.big::before{
    transform: scale(1.08);   /* evita bordes duros por el blur */
  }

  /* 6) Desactivar el “slide-in” en móvil (evita que queden fuera) */
  .slide-left,
  .slide-right{
    transform: none !important;
    opacity: 1 !important;
  }

  /* SECCION PAQUETES MOBILE */
  
  .paquetes{ padding: 1rem 2vw; }

  /* 1 sola columna: cada card ocupa todo el ancho */
  .paquetes-grid{
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  /* Tarjeta en columna, sin saltos raros */
  .paquete-card{
    border-radius: .9rem;
    box-shadow: 0 10px 20px rgba(0,0,0,.35);
    transition: none;        /* evita “saltitos” en scroll */
  }
  .paquete-card:hover{ transform: none; }

  /* Media/top de la card */
  .mock{
    border-radius: .75rem .75rem 0 0;
    aspect-ratio: 16/9;
    overflow: hidden;
  }
  .mock-video{ width:100%; height:100%; object-fit: cover; }

  /* Contenido */
  .paquete-content{
    padding: 1rem .95rem 1.1rem;
    gap: .5rem;
    min-height: 0;
  }
  .paquete-content h3{
    font-size: clamp(1.15rem, 5vw, 1.35rem);
    margin-bottom: .4rem;
  }
  .paquete-content p{ font-size: .98rem; line-height: 1.55; }

  /* Lista y checks */
  .paquete-features{ margin-top: .6rem; padding-left: 1rem; }
  .paquete-features li{ font-size: .95rem; margin-bottom: .45rem; }

  /* CTA full width y centrado */
  .paquete-btn{
    display: block;
    width: 100%;
    text-align: center;
    padding: .9rem 1rem;
    font-weight: 600;
    border-radius: .6rem;
    margin-top: .9rem;
  }

  /* Efectos de borde “destacado”: apagalos en móvil para que no se vean líneas */
  .paquetes-grid > article.paquete-card.destacado::after,
  .paquetes-grid > article:nth-of-type(2)::after,
  .paquetes-grid > article:nth-of-type(3)::after{
    display: none !important;
  }



  /* GUIA COMO CONSTRUIMOS TU WEB */
  
.item .content{
    position: absolute;
    top: 20%;
    left: 10px;
    width: 300px;
    text-align: left;
    color: #eee;
    transform: translate(0, -50%);
    font-family: system-ui;
    display: none;
}



.content .name{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0;
    animation: animate 1s ease-in-out 1 forwards;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.content .des{
    margin-top: 10px;
    margin-bottom: 20px;
    opacity: 0;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.content button{
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    opacity: 0;
    animation: animate 1s ease-in-out 0.6s 1 forwards;
}




  /*FOOTER MOBILE*/
  .site-footer .footer-content{
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr !important; /* pisa desktop */
    gap: 1.1rem;
  }

  /* que ningún bloque “empuje” a otra columna o mantenga ancho raro */
  .site-footer .footer-content > *{
    min-width: 0;
    width: 100%;
  }

  /* Logo + contacto */
  .site-footer .footer-logo{
    display: grid;
    gap: .6rem;
    justify-items: center;
  }
  .site-footer .footer-contact a{
    width: 100%;
    justify-content: center;
    min-height: 44px;
    font-weight: 600;
  }

  /* Links */
  .site-footer .footer-links h3{ margin-top: .2rem; }
  .site-footer .footer-links a { font-size: .98rem; }

  /* Mapa responsivo (si lo usás en mobile) */
  .site-footer .footer-map{
    grid-column: 1 / -1; /* ocupa la fila completa */
  }
  .site-footer .footer-map iframe{
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    border: 0;
    border-radius: .8rem;
  }

  /* Padding del footer en mobile */
  .site-footer{
    padding: 2.2rem 5vw 1.6rem;
  }
  .footer-bottom{
    font-size: .9rem;
    padding-top: 1rem;
  }

  /* Botón toggle dentro de cada card */
.paquete-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  width: 100%;
  margin-top: .75rem;
  padding: .8rem 1rem;

  font-weight: 700;
  font-size: .98rem;
  border-radius: .6rem;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;

  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.paquete-toggle:active { transform: scale(.98); }
.paquete-toggle:hover { background: rgba(255,255,255,0.12); }

/* Etiquetas según estado (cerrado/abierto) */
.paquete-toggle .label-open { display: none; }
.paquete-features.is-open ~ .paquete-toggle .label-default { display: none; } /* (no aplica, el botón está antes) */

/* Como el botón está antes, controlamos por [aria-expanded] */
.paquete-toggle[aria-expanded="true"] .label-default { display: none; }
.paquete-toggle[aria-expanded="true"] .label-open { display: inline; }

/* Icono chevron */
.paquete-toggle .chevron{
  width: .9rem; height: .9rem; flex: 0 0 .9rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.paquete-toggle[aria-expanded="true"] .chevron{ transform: rotate(-135deg); }

/* Lista colapsable */
.paquete-features.is-collapsible{
  overflow: hidden;
  transition: max-height .28s ease;
  will-change: max-height;
  margin-top: .4rem;
  padding-left: 1rem; /* mantené tu identación */
}

/* Menos movimiento para usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
  .paquete-features.is-collapsible { transition: none; }
  .paquete-toggle { transition: none; }
}

  
}