/* ============================================================
   ZINDEC MEDICINA (zmedicos) — estilos de la landing
   Complementa site.css (header, footer, botones, container).
   Sincronizado: preview/zmedicos.html ↔ output/zmedicos.php
   (output usa zmedicos-styles.css = copia de este archivo)
   ============================================================ */

/* ---------- Hero (split diagonal) ---------- */
.med-hero{position:relative;overflow:hidden;background:var(--surface-page);padding:4.5rem 0 5rem;}
.med-hero-panel{position:absolute;top:0;left:0;bottom:0;width:56%;background:var(--gradient-deep);clip-path:polygon(0 0,100% 0,86% 100%,0 100%);}
.med-hero-panel .glow1{position:absolute;width:480px;height:480px;border-radius:50%;top:-150px;left:-120px;background:radial-gradient(circle,rgba(147,204,234,.32),transparent 70%);pointer-events:none;}
.med-hero-panel .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:26px 26px;opacity:.5;-webkit-mask:linear-gradient(150deg,#000,transparent 65%);mask:linear-gradient(150deg,#000,transparent 65%);}
.med-hero-inner{position:relative;display:grid;grid-template-columns:1fr 1.12fr;gap:2.5rem;align-items:center;}
.med-hero .eyebrow-coral{background:rgba(255,255,255,.15);color:#fff;}
.med-hero h1{color:#fff;font-weight:800;font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1.08;margin:0 0 1.2rem;text-wrap:balance;}
.med-hero h1 .hl{color:var(--celeste-300);}
.med-hero p{color:rgba(255,255,255,.9);line-height:1.8;margin:0 0 1.1rem;max-width:540px;}
.med-hero .ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem;}
.med-hero-visual{position:relative;}
.med-hero-visual img{width:108%;max-width:none;filter:drop-shadow(0 30px 60px rgba(0,0,0,.4));animation:med-float 6s ease-in-out infinite;}
@keyframes med-float{0%,100%{transform:translateY(-8px);}50%{transform:translateY(8px);}}
.med-hero-badges{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.8rem;}
.med-hb{display:flex;align-items:center;gap:.55rem;color:#fff;font-family:var(--font-ui);font-weight:600;font-size:.86rem;}
.med-hb svg{color:var(--celeste-300);flex:none;}

/* ---------- Sección genérica ---------- */
.med-sec{padding:5.5rem 0;}
.med-sec.tint{background:var(--surface-card);}
.med-sec.sand{background:var(--gradient-soft);}

/* ---------- Características principales (3 bloques) ---------- */
.feat-blocks{display:flex;flex-direction:column;gap:1.4rem;max-width:1040px;margin:0 auto;}
.feat-block{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:2rem 2.2rem;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:start;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base);}
.feat-block:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.feat-block .fb-ic{width:60px;height:60px;border-radius:var(--radius-md);background:var(--celeste-100);color:var(--celeste-600);display:flex;align-items:center;justify-content:center;flex:none;}
.feat-block:nth-child(2) .fb-ic{background:var(--coral-100);color:var(--coral-600);}
.feat-block h3{font-size:1.4rem;margin:0 0 .7rem;}
.feat-block p{color:var(--text-body);line-height:1.8;margin:0;}
.feat-block p + p{margin-top:.9rem;}

/* ---------- Características en pestañas (tabs) ---------- */
.med-tabs{max-width:1000px;margin:0 auto;}
.med-tabnav{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem;}
.med-tabbtn{display:inline-flex;align-items:center;gap:.55rem;background:var(--surface-card);border:2px solid var(--border-soft);border-radius:10px;padding:.7rem 1.4rem;font-family:var(--font-display);font-weight:700;font-size:.94rem;color:var(--ink-700);cursor:pointer;transition:background var(--dur-base) var(--ease-out),color var(--dur-base),border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base) var(--ease-out);}
.med-tabbtn svg{width:18px;height:18px;}
.med-tabbtn:hover{border-color:var(--celeste-300);transform:translateY(-2px);}
.med-tabbtn.active{background:var(--celeste-600);color:#fff;border-color:transparent;box-shadow:var(--shadow-celeste);}
.med-tabpanel{display:none;background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:2.2rem 2.4rem;box-shadow:var(--shadow-sm);}
.med-tabpanel.active{display:grid;grid-template-columns:auto 1fr;gap:1.8rem;align-items:start;animation:med-tabin .4s var(--ease-out);}
@keyframes med-tabin{from{transform:translateY(12px);}to{transform:none;}}
.med-tabpanel .tp-ic{width:60px;height:60px;border-radius:var(--radius-md);background:var(--celeste-100);color:var(--celeste-600);display:flex;align-items:center;justify-content:center;flex:none;}
.med-tabpanel h3{font-size:1.4rem;margin:0 0 .7rem;}
.med-tabpanel p{color:var(--text-body);line-height:1.8;margin:0 0 .9rem;}
.med-tabpanel p:last-child{margin-bottom:0;}
@media(max-width:640px){.med-tabpanel.active{grid-template-columns:1fr;}}

/* ---------- FAQ (¿Cómo funciona?) ---------- */
.med-faq{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:.85rem;}
.med-faq details{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow var(--dur-base);}
.med-faq details[open]{box-shadow:var(--shadow-md);}
.med-faq summary{list-style:none;cursor:pointer;padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--ink-900);}
.med-faq summary::-webkit-details-marker{display:none;}
.med-faq summary .pl{width:26px;height:26px;flex:none;color:var(--celeste-600);transition:transform var(--dur-base) var(--ease-out);}
.med-faq details[open] summary .pl{transform:rotate(45deg);}
.med-faq .faq-a{padding:0 1.5rem 1.3rem;color:var(--text-body);line-height:1.8;}

/* ---------- Showcase (tablet + features) ---------- */
.med-showcase{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;}
.med-showcase .shot{position:relative;}
.med-showcase .shot img{width:100%;filter:drop-shadow(0 24px 50px rgba(22,48,62,.22));}
.med-showcase .shot .ring{position:absolute;inset:-6% -6% -6% -6%;border-radius:50%;background:radial-gradient(circle,rgba(99,178,220,.18),transparent 65%);z-index:-1;}
.showcase-feats{display:flex;flex-direction:column;gap:1.3rem;}
.sf-item{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;}
.sf-item .sf-ic{width:50px;height:50px;border-radius:14px;background:var(--celeste-100);color:var(--celeste-600);display:flex;align-items:center;justify-content:center;flex:none;transition:background var(--dur-base),color var(--dur-base);}
.sf-item:hover .sf-ic{background:var(--celeste-500);color:#fff;}
.sf-item h3{font-size:1.18rem;margin:0 0 .35rem;}
.sf-item h3 a{color:inherit;}
.sf-item p{color:var(--text-muted);line-height:1.7;margin:0;font-size:.96rem;}

/* ---------- Banda CTA "prueba" ---------- */
.med-cta{position:relative;overflow:hidden;background:var(--gradient-celeste);padding:4rem 0;text-align:center;color:#fff;}
.med-cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px);background-size:22px 22px;opacity:.5;}
.med-cta .inner{position:relative;}
.med-cta .eyebrow-coral{background:rgba(255,255,255,.2);color:#fff;}
.med-cta h2{color:#fff;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;margin:.3rem 0 1.4rem;letter-spacing:-.01em;}

/* ---------- Beneficios (prosa SEO) ---------- */
.med-prose{max-width:840px;margin:0 auto;color:var(--text-body);line-height:1.85;}
.med-prose h2{font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.25;margin:0 0 1.4rem;text-align:center;}
.med-prose h3{font-family:var(--font-display);font-weight:700;color:var(--ink-900);font-size:1.3rem;margin:2rem 0 .8rem;}
.med-prose p{margin:0 0 1.1rem;}
.med-prose ul{margin:1rem 0 1.4rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.7rem;}
.med-prose ul li{position:relative;padding-left:2rem;}
.med-prose ul li::before{content:"";position:absolute;left:0;top:.5rem;width:18px;height:18px;border-radius:50%;background:var(--celeste-100);}
.med-prose ul li::after{content:"";position:absolute;left:6px;top:.78rem;width:6px;height:6px;border-radius:50%;background:var(--celeste-500);}
.med-prose strong{color:var(--ink-900);}

/* ---------- Planes / Coberturas ---------- */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:stretch;max-width:1100px;margin:0 auto;}
.plan{background:var(--surface-card);border:2px solid var(--border-soft);border-radius:var(--radius-xl);padding:2rem 1.8rem;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base),border-color var(--dur-base);position:relative;}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--celeste-300);}
.plan.feat{border-color:var(--celeste-400);box-shadow:var(--shadow-md);}
.plan .pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--color-accent);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .9rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-coral);}
.plan .pname{font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
.plan .ptitle{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--ink-900);margin:.1rem 0 .9rem;letter-spacing:-.01em;}
.plan .pprice{display:flex;align-items:baseline;gap:.3rem;padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--border-soft);}
.plan .pprice b{font-family:var(--font-display);font-weight:800;font-size:2.2rem;color:var(--celeste-600);line-height:1;}
.plan .pprice span{font-size:.82rem;color:var(--text-muted);}
.plan ul{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.6rem;flex:1;}
.plan ul li{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;color:var(--text-body);line-height:1.45;}
.plan ul li svg{color:var(--celeste-500);flex:none;margin-top:2px;}
.plan ul li.strong{font-weight:700;color:var(--ink-900);margin-top:.3rem;}
.plan ul li .plus{color:var(--coral-500);font-weight:800;}
.plan .pcta{display:block;text-align:center;font-family:var(--font-display);font-weight:700;font-size:.95rem;padding:.9rem 1.4rem;border-radius:10px;cursor:pointer;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base);border:2px solid var(--celeste-300);color:var(--celeste-700);background:#fff;}
.plan .pcta:hover{transform:translateY(-3px);border-color:var(--celeste-500);box-shadow:var(--shadow-md);}
.plan.feat .pcta{background:var(--celeste-600);color:#fff;border-color:transparent;box-shadow:var(--shadow-celeste);}
.compare-wrap{text-align:center;margin-top:2.2rem;}
.compare-btn{display:inline-flex;align-items:center;gap:.5rem;background:none;border:none;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--celeste-700);letter-spacing:.03em;}
.compare-btn:hover{gap:.75rem;}
/* ---------- Modal comparar planes ---------- */
.cmp-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:1.5rem;background:rgba(14,58,95,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.cmp-modal.active{display:flex;}
.cmp-card{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:840px;width:100%;max-height:88vh;overflow:auto;}
.cmp-head{position:sticky;top:0;background:var(--surface-card);display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.8rem;border-bottom:1px solid var(--border-soft);z-index:2;}
.cmp-head h3{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--ink-900);margin:0;letter-spacing:-.01em;}
.cmp-close{width:38px;height:38px;border-radius:50%;border:1px solid var(--border-soft);background:#fff;color:var(--ink-700);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--dur-base),color var(--dur-base);}
.cmp-close:hover{background:var(--surface-sunk);color:var(--ink-900);}
.cmp-table{width:100%;border-collapse:collapse;font-size:.92rem;}
.cmp-table th,.cmp-table td{padding:.85rem 1rem;text-align:center;border-bottom:1px solid var(--border-soft);}
.cmp-table thead th{position:sticky;top:71px;background:var(--surface-page);font-family:var(--font-display);font-weight:700;color:var(--ink-900);font-size:.95rem;z-index:1;}
.cmp-table thead th.feat{text-align:left;}
.cmp-table thead th.hl{color:var(--celeste-700);}
.cmp-table thead th .sub{display:block;font-weight:600;font-size:.78rem;color:var(--celeste-600);}
.cmp-table tbody td:first-child{text-align:left;color:var(--text-body);font-weight:600;}
.cmp-table tbody tr:hover{background:var(--surface-page);}
.cmp-table .col-hl{background:var(--celeste-50);}
.cmp-table .yes{color:var(--green-500);}
.cmp-table .no{color:var(--border-default);}
.cmp-table .val{color:var(--ink-900);font-weight:700;}
.cmp-foot{display:flex;gap:.8rem;justify-content:flex-end;padding:1.2rem 1.8rem;flex-wrap:wrap;}
@media(max-width:600px){.cmp-table{font-size:.82rem;}.cmp-table th,.cmp-table td{padding:.6rem .5rem;}}

/* ---------- Servicios (Software Factory) ---------- */
.med-servs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;}
.med-serv{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base);}
.med-serv::before{content:"";position:absolute;top:0;left:0;height:4px;width:100%;background:var(--gradient-celeste);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out);}
.med-serv:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.med-serv:hover::before{transform:scaleX(1);}
.med-serv .ms-ic{width:54px;height:54px;border-radius:var(--radius-md);background:var(--celeste-100);color:var(--celeste-600);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;transition:background var(--dur-base),color var(--dur-base);}
.med-serv:hover .ms-ic{background:var(--celeste-500);color:#fff;}
.med-serv h3{font-size:1.15rem;margin:0 0 .5rem;}
.med-serv p{color:var(--text-muted);font-size:.92rem;line-height:1.6;margin:0;}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .med-hero-inner,.med-showcase{grid-template-columns:1fr;}
  .med-hero-panel{width:100%;clip-path:none;opacity:.98;}
  .med-hero-visual{order:-1;}
  .med-hero-visual img{width:100%;}
  .planes{grid-template-columns:1fr;max-width:460px;}
  .med-servs{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .feat-block{grid-template-columns:1fr;}
  .med-servs{grid-template-columns:1fr;}
  .med-sec{padding:4rem 0;}
}