/* /empieza (card n-empieza): where the QR of the printed business cards lands. Phone first (390), then 768 and 1024+.
   The chrome comes from the portada (home.css: canvas, aurora, header, footer, .hm-ctn grid of 1128 with 16/24 gutters).
   Tiles and white boxes are the approved mosaico family (n-muzyp3if: .mz-card radius 16 with the soft pink band as its
   cover, .mz-box radius 24 with the band as an 8 px cap, the material ring as the one separation signal, LAW §4). Those
   values are repeated here under .pg-ez so the page looks the same before and after mosaico.css goes live; when it is
   live the page links it too, after this file, and the two agree value for value (selectors here are .pg-ez .x, so
   mosaico's .mz-card padding:0 / background:#fff never undo the step tiles). Text never sits on the band. */
.pg-ez{--mz-band:linear-gradient(135deg,#FBE1EB 0%,#FDEEF2 55%,#FFF3EA 100%);--mz-mat:0 0 0 1px rgba(28,25,23,.08),0 1px 0 rgba(28,25,23,.06),0 2px 6px rgba(28,25,23,.05)}
.pg-ez a:focus-visible,.pg-ez summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px}

/* header: no section menu on a landing page (one way forward); "Entrar" at the right on every width */
.pg-ez .hm-enter{margin-left:auto}

/* type: one scale (LAW §2), body never under 16 */
.pg-ez .ez-eyebrow{margin:0;font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#951A4A}
.pg-ez h1{margin:8px 0 0;font-size:31px;line-height:1.15;letter-spacing:-.02em}
.pg-ez h2{margin:0;font-size:24px;line-height:1.2}
.pg-ez .ez-lead{max-width:34em;margin:16px 0 0;font-size:17px;line-height:1.5;color:var(--muted)}

/* hero: text, the one primary action, then the video (phone); text left and video right (computer) */
.ez-hero .hm-ctn{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-top:16px}
.pg-ez .ez-cta{width:100%;height:56px;margin-top:24px;font-size:17px}
.pg-ez .ez-note{margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.ez-vid{min-width:0;margin:0}
.ez-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#1C1917;box-shadow:var(--mz-mat)}
.ez-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#1C1917}
.ez-vid figcaption{margin-top:12px;font-size:16px;line-height:1.5;color:var(--muted)}
.ez-vid figcaption b{font-weight:600;color:var(--ink)}

/* sections: 64 between sections on a phone, 96 on a computer (LAW §1) */
.ez-sec{padding-top:64px}

/* the 3 steps: one tile each, the number mounted on the band edge like the business logo on the portada tiles */
.ez-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:24px 0 0;padding:0;list-style:none}
.pg-ez .ez-step{display:block;margin:0;padding:28px 24px 24px;overflow:visible;background:#fff var(--mz-band) 0 0/100% 56px no-repeat;border-radius:16px;box-shadow:var(--mz-mat);transform:none}
.pg-ez .ez-step h3{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin:0;font-size:20px;line-height:1.3}
.pg-ez .ez-num{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#FCE7F0;color:#951A4A;font-size:24px;font-weight:800;line-height:1;box-shadow:0 0 0 3px #fff,0 2px 6px 3px rgba(28,25,23,.08)}
.pg-ez .ez-step p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--ink)}

/* step-by-step videos (card n-mv046a2t, owner 2026-10-08: "demaciado espacio en blanco"): on a phone the two vertical
   (9:16) recordings side by side with their names, as before; from 768 px each video sits beside its own steps (one per
   row), and from 1200 px the two video+steps pairs share the row, so the section fills the grid like the 3 steps above.
   The video keeps up to the 300 px it had (the text recorded inside it stays readable when it plays in the page).
   The steps are a list with hairlines, like the questions below (one separation signal, LAW §4); no new box. */
.pg-ez .ez-sub{max-width:34em;margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.ez-tuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 0;padding:0;list-style:none}
.ez-tut figure{margin:0}
.ez-tframe{aspect-ratio:9/16;overflow:hidden;border-radius:16px;background:#FBF8F6;box-shadow:var(--mz-mat)}
.ez-tframe video{display:block;width:100%;height:100%;object-fit:contain;background:#FBF8F6}
.ez-tinfo{min-width:0;margin-top:12px}
.pg-ez .ez-tinfo h3{margin:0;font-size:16px;line-height:1.4;font-weight:600;color:var(--ink)}
.ez-tinfo p{margin:4px 0 0;font-size:16px;line-height:1.4;color:var(--muted)}
.ez-chap{display:none;margin:16px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ez-chap li{border-bottom:1px solid var(--line)}
.ez-chap a{display:flex;align-items:center;gap:12px;min-height:44px;margin:0 -12px;padding:8px 12px;border-radius:8px;font-size:16px;line-height:1.5;color:var(--ink);text-decoration:none}
.ez-chap-t{flex:none;min-width:40px;font-weight:600;font-variant-numeric:tabular-nums;color:#951A4A}
.ez-chap a:hover{background:#FDF2F6;color:#951A4A}
.ez-chap a:active{background:#FCE7F0}
.ez-chap a[aria-current]{background:#FCE7F0;font-weight:600}

/* white boxes: price, questions, WhatsApp */
.pg-ez .ez-price,.pg-ez .ez-qa,.pg-ez .ez-help{background:#fff var(--mz-band) 0 0/100% 8px no-repeat;border:0;border-radius:24px;box-shadow:var(--mz-mat)}

/* price: the shared promo piece (partials/promo-price), what it includes, and the primary action again */
.pg-ez .ez-price{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding:40px 24px 24px}
.pg-ez .ez-price h2{margin-top:4px}
.ez-promo{margin-top:16px}
.pg-ez .ez-promo .promo{font-size:31px;line-height:1.1;letter-spacing:-.02em}
.pg-ez .ez-promo .promo-then{margin-top:8px;font-size:16px;line-height:1.5}
.ez-list{display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.ez-list li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.5}
.ez-list svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--accent)}
.ez-price-act{display:flex;flex-direction:column;gap:8px}
.pg-ez .ez-price-act .ez-cta{margin-top:0}
.pg-ez .ez-have{margin:0;font-size:16px;line-height:1.5;color:var(--muted);text-align:center}
.ez-have a{display:inline-block;padding:10px 4px;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ez-have a:hover{color:#951A4A}

/* questions: native details (keyboard and no-JavaScript ready), one hairline between them */
.pg-ez .ez-qa{margin-top:24px;padding:8px 24px}
.ez-qa details{border-bottom:1px solid var(--line)}
.ez-qa details:last-child{border-bottom:0}
.ez-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;font-size:17px;line-height:1.4;font-weight:600;cursor:pointer;list-style:none}
.ez-qa summary::-webkit-details-marker{display:none}
.ez-qa summary:hover{color:var(--accent)}
.ez-qa summary:active{color:#951A4A}
.ez-chev{flex:none;width:20px;height:20px;color:var(--muted);transition:transform .2s}
.ez-qa details[open] .ez-chev{transform:rotate(180deg)}
.ez-qa details p{max-width:65ch;margin:0 0 20px;font-size:16px;line-height:1.5;color:var(--ink)}

/* WhatsApp: a secondary action (green outline), never a second filled button */
.pg-ez .ez-help{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:32px 24px 24px}
.ez-wa-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#DCFCE7;color:#15803D}
.ez-wa-ic svg{width:28px;height:28px}
.pg-ez .ez-help h2{font-size:20px;line-height:1.3}
.ez-help-tx p{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.pg-ez .ez-wa{grid-column:1/-1;height:52px;background:#fff;color:#15803D;border:1px solid #15803D}
.pg-ez .ez-wa:hover{background:#F0FDF4}
.pg-ez .ez-wa:active{background:#DCFCE7}
.ez-wa svg{flex:none;width:20px;height:20px}

@media (min-width:768px){
  .pg-ez h2{font-size:31px;line-height:1.15}
  .ez-sec{padding-top:96px}
  .ez-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .ez-tuts{grid-template-columns:minmax(0,1fr);gap:48px}
  .ez-tut figure{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:start}
  .ez-tinfo{margin-top:0}
  .pg-ez .ez-tinfo h3{font-size:20px;line-height:1.3}
  .ez-chap{display:block}
  .pg-ez .ez-price{grid-template-columns:minmax(0,1fr) 280px;align-items:end;gap:48px;padding:56px 48px 48px}
  .pg-ez .ez-promo .promo{font-size:39px}
  .pg-ez .ez-qa{padding:8px 32px}
  .pg-ez .ez-help{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:40px 32px 32px}
  .pg-ez .ez-help h2{font-size:20px}
  .pg-ez .ez-wa{grid-column:auto;padding:0 24px}
}
@media (min-width:1024px){
  .ez-hero .hm-ctn{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:48px;padding-top:32px}
  .ez-hero-solo .hm-ctn{grid-template-columns:minmax(0,720px)}
  .pg-ez h1{font-size:39px;line-height:1.1}
  .pg-ez .ez-intro .ez-cta{display:inline-flex;width:auto;min-width:240px;padding:0 32px}
}
/* computer from 1200 px (card n-mv046a2t): the two video+steps pairs side by side; the steps keep 280 px or more and
   the video takes up to its 300 px (1440+: 300 video + 24 + 308 steps; 1280: 248 + 24 + 280). */
@media (min-width:1200px){
  .ez-tuts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ez-tut figure{grid-template-columns:minmax(0,300px) minmax(280px,1fr);gap:24px}
}
/* wide computer: price in three columns instead of text left + button right with an empty middle -
   what it is and the price | what it includes | the action. From 1440 px the first two columns get 420 px each, the
   width the price line needs on one line (measured 384 px); narrower screens keep the two-column box. */
@media (min-width:1440px){
  .pg-ez .ez-price{align-items:center}
  .pg-ez .ez-price-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;align-items:start}
  .pg-ez .ez-price-main>*{grid-column:1}
  .pg-ez .ez-price-main>.ez-list{grid-column:2;grid-row:1/span 3;align-self:center;margin-top:0}
}
@media (prefers-reduced-motion:reduce){.ez-chev{transition:none}}