/* Estilos del checkout de planes 3×3 (web/_partials/planes-checkout.blade.php).
   Va en archivo externo (cargado en <head>) porque Vue elimina los <style> que
   quedan dentro de #app. NO volver a poner estas reglas inline en el partial. */
.dlpx{max-width:1060px;margin:0 auto;font-family:'Cabin','Segoe UI',sans-serif;color:#0c1733;}
.dlpx *{box-sizing:border-box;}
.dlpx-cyc-wrap{text-align:center;}
.dlpx-cycles{display:inline-flex;gap:4px;background:#eef3fb;border:1px solid #e0e8f6;border-radius:9999px;padding:4px;margin:0 auto 26px;}
.dlpx-cyc{border:none;background:transparent;font-family:inherit;font-size:14px;font-weight:700;color:#5a6680;padding:9px 20px;border-radius:9999px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px;}
.dlpx-cyc.active{background:#003399;color:#fff;box-shadow:0 2px 8px rgba(0,51,153,.22);}
.dlpx-save{font-size:10px;font-weight:800;letter-spacing:.03em;background:#0a7d3f;color:#fff;padding:2px 7px;border-radius:9999px;}
.dlpx-cyc.active .dlpx-save{background:rgba(255,255,255,.22);}
.dlpx-guest{max-width:560px;margin:0 auto 22px;display:flex;gap:10px;flex-wrap:wrap;}
.dlpx-guest input{flex:1;min-width:200px;font-family:inherit;font-size:14px;border:1.5px solid #cfdbf0;border-radius:9px;padding:11px 13px;}
.dlpx-guest-note{flex-basis:100%;font-size:12px;color:#8a93a8;text-align:center;}
.dlpx-guest-note a{color:#003399;font-weight:700;text-decoration:none;}
.dlpx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:820px){.dlpx-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;}}
.dlpx-card{position:relative;background:#fff;border:1.5px solid #e6ecf6;border-radius:16px;padding:26px 22px;display:flex;flex-direction:column;}
.dlpx-card.pop{border-color:#003399;box-shadow:0 12px 34px rgba(0,51,153,.12);}
.dlpx-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#003399;color:#fff;font-family:'Cabin Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 14px;border-radius:9999px;white-space:nowrap;}
/* La foto es un asset 1:1 (IG 1080) metido en un hueco apaisado: cover recorta sí o sí.
   Dos decisiones:
   · object-position:50% 0 ancla ARRIBA, que es donde vive la identidad (nombre del plan,
     badge del ciclo y precio). Centrado se perdía el nombre y solo quedaba el precio,
     que la card ya repite en texto justo debajo.
   · aspect-ratio, NO height fijo: con cover, la franja visible = alto/ancho. Con un alto
     fijo el recorte cambia con el ancho de la card — a 284px se veía el 53% pero a 394px
     bajaba al 38% y CORTABA el precio. Con 16/9 se ve siempre el 56%, en cualquier ancho.
   En el original: nombre 7-14%, badge 9-13%, precio 29-46%. Si tocas el ratio, que el
   56% no baje del 46% o el precio se parte. */
.dlpx-cover{width:100%;aspect-ratio:16/9;border-radius:12px;object-fit:cover;object-position:50% 0;margin-bottom:14px;background:#eef3fb;display:block;}
.dlpx-kick{font-family:'Cabin Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a93a8;margin-bottom:8px;}
.dlpx-name{font-family:'EB Garamond',Georgia,serif;font-size:22px;font-weight:600;color:#0c1733;margin-bottom:10px;}
.dlpx-price{display:flex;align-items:flex-start;gap:3px;line-height:1;}
.dlpx-cur{font-family:'EB Garamond',serif;font-size:20px;font-weight:600;color:#0c1733;margin-top:6px;}
.dlpx-amt{font-family:'EB Garamond',serif;font-size:46px;font-weight:700;color:#0c1733;}
.dlpx-permes{font-size:12px;color:#8a93a8;margin-top:6px;min-height:16px;}
.dlpx-feats{list-style:none;padding:0;margin:18px 0 20px;flex:1;}
.dlpx-feats li{font-size:13.5px;color:#33405c;line-height:1.5;padding-left:22px;position:relative;margin-bottom:9px;}
.dlpx-feats li:before{content:'\2713';position:absolute;left:0;color:#003399;font-weight:800;}
.dlpx-feats li.no{color:#9aa6c4;}
.dlpx-feats li.no:before{content:'\2014';color:#c3ccdd;}
.dlpx-carnet{width:100%;font-family:inherit;font-size:13px;border:1.5px solid #cfdbf0;border-radius:8px;padding:9px 11px;margin-bottom:8px;}
.dlpx-pay{width:100%;border:none;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:700;color:#fff;background:#003399;border-radius:10px;padding:13px 16px;transition:.15s;}
.dlpx-pay:hover{background:#001a44;}
.dlpx-card:not(.pop) .dlpx-pay{background:#0c1733;}
.dlpx-card:not(.pop) .dlpx-pay:hover{background:#003399;}
.dlpx-sec{text-align:center;font-size:11.5px;color:#8a93a8;margin-top:18px;}

/* ── Móvil · evita el zoom automático de iOS al enfocar (umbral: 16px) ──
   Va también acá porque /mi-panel/membresia inlinea ESTE fichero y su layout no
   carga deleyes-v2.css. Sin esto, el checkout de planes del panel haría zoom. */
@media (max-width: 767px) {
  #dlpx-nombre, #dlpx-email, [id^="dlpx-carnet-"], [id^="dlpx-univ-"] { font-size: 16px !important; }
}
