/* Membresías - page-specific styles that work with your base.css */
:root{
  --gris:#444e56;
  --turquesa:#55c9cc;
  --bg:#f9f6f1;
}

*{ box-sizing: border-box; }

/* HERO */
.titulopro{ background: var(--bg); padding: 40px 0; }
.titulopro-content{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto; gap:60px; padding: 0 50px;
}
.titulopro-text{ flex:1; min-width:320px; }
.titulopro-text .etiqueta{
  font-size:1rem; font-weight:700; letter-spacing:.5px; color:var(--turquesa);
  text-transform:uppercase; margin:0 0 8px 0;
}
.titulopro-text h1{
  font-size:3.2rem; font-weight:400; color:var(--gris);
  line-height:1.15; margin:0 0 10px;
}
.titulopro-text h1 span{
  font-family:'Playfair Display', serif; font-style:italic; color:var(--turquesa); font-size:3.6rem;
}
.titulopro-text .intro{ color:#555; max-width:640px; margin:0; }
.titulopro-image{ flex:1; min-width:320px; display:flex; justify-content:center; }
.titulopro-image img{
  width:100%; max-width:520px; border-radius:10px; box-shadow:0 20px 40px rgba(0,0,0,.1); object-fit:cover;
}

/* PLANES */
.planes{
  max-width:1600px; margin: 24px auto 64px; padding: 0 24px;
}
.planes h2{
  text-align:center; color:var(--gris); font-size:3rem; font-weight:400; margin: 8px 0 24px;
}

/* Cards estilo Salas: dos columnas, altura tope (desktop) */
.plan{
  position: relative;             /* stacking context for layering */
  display:flex; gap:24px; background:#fff; border-radius:12px;
  padding:20px; margin: 0 auto 24px;
  align-items:stretch; max-height:660px; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.06); border:1px solid #eee;

  /* slightly smaller on desktop */
  width:100%;
  max-width: 1600px;
}
.plan:last-child{ margin-bottom:0; }

/* Columna izquierda: texto (usa botones de base.css) */
.texto-plan{
  position: relative; z-index: 2; /* above the graphic panel */
  display: flex; flex-direction: column;

  flex: 0 1 640px; max-width:640px; min-width:280px;
  min-height:0; overflow:auto; padding: 4px 8px;

  /* ensure sticky CTA has room at the bottom while scrolling */
  padding-bottom: 72px;
}
.texto-plan .etiqueta{
  font-size:.9rem; font-weight:700; letter-spacing:.5px; color:var(--turquesa); text-transform:uppercase; margin:0 0 6px;
}
.texto-plan h3{ margin:0 0 8px; color:var(--gris); font-size:1.9rem; font-weight:800; }
.texto-plan h4{ margin:16px 0 8px; color:var(--turquesa); font-size:1.05rem; font-weight:700; }
.texto-plan .beneficios{ color:#686868; font-size:1.02rem; line-height:1.6; margin:0 0 10px; }

/* Lista con checks */
.lista-plan{ list-style:none; padding:0; margin:0; }
.lista-plan li{
  display:flex; align-items:flex-start; gap:10px;
  color:#444; line-height:1.6; font-size:1.02rem;
  margin: 6px 0;
}
.lista-plan img{ width:18px; height:18px; margin-top:3px; flex-shrink:0; }

/* CTA: smaller size and keep visible inside scrollable text column */
.texto-plan .btn{
  /* smaller than base.css */
  padding: 8px 16px;
  font-size: 0.9rem;
  border-radius: 999px;

  bottom: 0;
  z-index: 3;
  margin-top: 12px;
}

/* Columna derecha: panel con número y precio */
.panel-plan{
  position: relative; z-index: 1;
  flex: 1 1 38%; min-width:300px;
  display:grid; grid-template-rows: 1fr 120px;
  border-radius:12px; overflow:hidden;
}
.panel-plan .panel-top{ position:relative; display:flex; align-items:center; justify-content:center; color:#fff; }
.panel-plan .numero{ font-size:5.4rem; font-weight:800; letter-spacing:2px; opacity:.22; }
.panel-plan .panel-bottom{ display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.panel-plan .precio{ font-size:2.6rem; font-weight:800; color:#fff; text-shadow:0 3px 10px rgba(0,0,0,.25); }

/* Variantes */
.plan--ruby .panel-plan{
  background: radial-gradient(120% 120% at 80% 10%, #ffb199 0%, #ff0844 45%, #a72e02 100%);
}
.plan--zafiro .panel-plan{
  background: radial-gradient(120% 120% at 80% 10%, #9bc6ff 0%, #555dcc 38%, #04035d 100%);
}
.plan--platinum .panel-plan{
  background: radial-gradient(120% 120% at 80% 10%, #e0e0e0 0%, #9ea7b3 45%, #444e56 100%);
}

/* Desktop medium tweak (between small laptop and large screens) */
@media (min-width: 1024px) and (max-width: 1360px){
  .plan{ max-width: 1000px; }
  .texto-plan{ flex-basis: 600px; max-width:600px; }
}

/* Tablet/headline adjustments */
@media (max-width: 1024px){
  .titulopro-text h1{ font-size: 2.6rem; }
  .titulopro-text h1 span{ font-size: 3rem; }
}

/* Mobile improvements */
@media (max-width: 768px){
  .titulopro-content{
    flex-direction:column; align-items:center; text-align:center; gap:24px; padding: 0 18px;
  }
  
  /* FIXED: Show the image on mobile */
  .titulopro-image{ 
    order: -1;                    /* Show image first */
    width: 100%;
    max-width: 90%;
    margin: 0 auto 16px auto;
    min-width: auto;
  }
  
  .titulopro-image img {
    width: 100%;
    max-width: 400px;             /* Limit max size on mobile */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  }
  
  .titulopro-text .intro{ max-width: 92%; margin: 0 auto; }
  .titulopro-text h1{ font-size: 2.2rem; line-height: 1.2; }
  .titulopro-text h1 span{ font-size: 2.6rem; }

  .planes{ margin: 16px auto 48px; padding: 0 16px; }
  .planes h2{ font-size: 1.9rem; margin: 8px 0 18px; }

  .plan{
    flex-direction:column; gap:24px; max-height:none; padding:16px;
    border-radius:10px; box-shadow: 0 8px 22px rgba(0,0,0,.06);
    overflow: visible;                 /* allow full height on mobile */
    margin-bottom: 28px;
  }

  /* show the graphic panel first so it can't overlap the CTA */
  .panel-plan{
    order: -1;
    min-width:0;
    grid-template-rows: 1fr 96px;
    margin-bottom: 16px;
    min-height: 180px;
  }
  .panel-plan .numero{ font-size:3.8rem; }
  .panel-plan .precio{ font-size:2rem; }

  /* Fixed: Mobile text container with proper spacing */
  .texto-plan{
    max-width:100%;
    overflow: visible;
    padding: 0 8px 20px 8px;              /* Add bottom padding for button space */
    min-height: auto;
    flex: none;
  }
  .texto-plan h3{ font-size: 1.5rem; margin-bottom: 12px; }
  .texto-plan h4{ font-size: 1rem; margin: 14px 0 8px; }
  .lista-plan li{ font-size: .98rem; gap: 9px; margin: 8px 0; }
  .lista-plan img{ width:16px; height:16px; margin-top:4px; }

  /* Fixed: Ensure button stays within container */
  .texto-plan .btn{
    position: static;
    display: block;
    width: fit-content;
    margin: 16px auto 0 auto;            /* Center with top margin only */
    padding: 10px 16px;
    font-size: 0.88rem;
    align-self: center;
  }

  /* Additional spacing for beneficios section */
  .texto-plan .beneficios{
    margin-bottom: 16px;
  }
}

/* Extra small phones */
@media (max-width: 380px){
  .planes{ padding: 0 12px; }
  .plan{ 
    padding: 14px; 
    gap: 16px; 
    margin-bottom: 24px;
  }
  .texto-plan{ 
    padding: 0 6px 18px 6px; 
  }
  .texto-plan h3{ font-size: 1.35rem; }
  .panel-plan .numero{ font-size: 3.4rem; }
  .panel-plan .precio{ font-size: 1.8rem; }

  .texto-plan .btn{
    padding: 9px 14px;
    font-size: 0.85rem;
    margin: 14px auto 0 auto;
  }

  .lista-plan li{ 
    font-size: 0.94rem; 
    margin: 6px 0;
  }
  
  .titulopro-image img {
    max-width: 350px;
  }
}

/* Hide price (keep only top panel) */
.panel-plan { grid-template-rows: 1fr; }
.panel-plan .panel-bottom { display: none !important; }
.panel-plan .panel-top { min-height: 240px; }

/* Button returns to natural flow under beneficios */
.texto-plan { padding-top: 0; }
.texto-plan .btn {
  position: static;
  padding: 8px 16px;
  font-size: 0.85rem;
  margin-top: 14px;
  align-self: flex-start;
}

/* Prevent overflow in long lists */
.lista-plan li { word-break: break-word; overflow-wrap: anywhere; }

/* Platinum specific tweaks */
.plan--platinum .panel-plan .numero { letter-spacing:1px; }

@media (max-width: 768px){
  /* Enhanced mobile layout fixes */
  .texto-plan { 
    padding: 0 8px 20px 8px;            /* Consistent padding with bottom space */
  }
  .texto-plan .btn { 
    margin: 18px auto 0 auto;           /* Centered with adequate top margin */
    font-size: 0.85rem;
    width: fit-content;
  }
  
  /* Platinum: tighter typography but maintain spacing */
  .plan--platinum .lista-plan li { 
    font-size: .92rem; 
    line-height: 1.5; 
    margin: 7px 0;
  }
  .plan--platinum .panel-plan .numero { font-size: 3.2rem; }
  .plan--platinum .texto-plan { 
    padding: 0 8px 20px 8px;            /* Same as other plans */
  }
}

@media (max-width: 500px){
  .plan--platinum .panel-plan .numero { font-size: 3.4rem; }
  .plan--platinum .lista-plan li { font-size: .90rem; }
  
  /* Ensure all plans have consistent bottom spacing */
  .plan{ margin-bottom: 26px; }
  .texto-plan{ padding-bottom: 18px; }
}

/* Very small screens additional fixes */
@media (max-width: 360px){
  .plan{ padding: 12px; }
  .texto-plan{ padding: 0 4px 16px 4px; }
  .texto-plan .btn{ 
    margin: 14px auto 0 auto;
    padding: 8px 12px;
    font-size: 0.82rem;
  }
  
  .titulopro-image img {
    max-width: 320px;
  }
}

/* Fallback for browsers without sticky support */
@supports not (position: sticky) {
  .texto-plan .btn { position: static; }
}