/* ===================== TOKENS ===================== */ :root{ --space-xs:.5rem; --space-sm:.75rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem; --section-space:clamp(2.5rem,5vw,4rem); --gutter:clamp(1rem,3vw,1.75rem); --type-small:.875rem; --type-body:1rem; --type-card:1.125rem; --type-section:clamp(1.6rem,3vw,2.25rem); --type-title:clamp(1.8rem,4vw,2.75rem); --measure:68ch; --target:2.75rem; --focus-width:2px; --focus-offset:3px; --focus-inset:-3px; --lift:-2px; --motion-ui:180ms; --card-min:18.5rem; --side-width:20rem; --header-clearance:7rem; --border-width:1px; --underline-offset:.15em; --paper:#FBFAF6; --card:#FFFFFF; --ink:#15221B; --ink-soft:#46554D; --ink-mute:#66746D; --line:#E7E3D8; --line-2:#EFECE3; --green:#1E7A46; --green-d:#124D2C; --green-br:#2E9E5B; --green-10:#EAF3EC; --green-20:#D5E8DB; --amber:#DC8636; --amber-d:#BE6E22; --gold:#B88A1E; --star:#E0A63C; --green-btn:#1B7A44; --green-deep:#103A24; --danger:#B4402F; --surface:var(--paper); --text:var(--ink); --soft:var(--ink-soft); --mute:var(--ink-mute); --fd:'Archivo',Verdana,Arial,Helvetica,sans-serif; --fb:'Archivo',Verdana,Arial,Helvetica,sans-serif; --fm:'IBM Plex Mono',ui-monospace,monospace; --max:1240px; --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px; /* real depth: offset + blur, layered */ --sh-1:0 1px 2px rgba(21,34,27,.06),0 1px 1px rgba(21,34,27,.04); --sh-2:0 4px 10px rgba(21,34,27,.07),0 2px 4px rgba(21,34,27,.05); --sh-3:0 12px 24px rgba(21,34,27,.10),0 5px 10px rgba(21,34,27,.06); --sh-4:0 24px 46px rgba(21,34,27,.15),0 10px 18px rgba(21,34,27,.08); --ring:0 0 0 3px rgba(46,158,91,.32); --e-out:cubic-bezier(.16,1,.3,1); --dur:.45s; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --paper:#0C140F; --card:#121E17; --ink:#EAEFE9; --ink-soft:#A9B7AE; --ink-mute:#7C8B81; --line:#243029; --line-2:#1C271F; --surface:#0C140F; --text:#EAEFE9; --soft:#A9B7AE; --mute:#7C8B81; --green:#39B06A; --green-d:#2E9E5B; --green-br:#48C77E; --green-10:#152A1E; --green-20:#1E3A29; --amber:#E8974E; --gold:#D3AB4A; --green-deep:#0C2E1C; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 12px rgba(0,0,0,.4); --sh-3:0 16px 34px rgba(0,0,0,.5); --sh-4:0 30px 64px rgba(0,0,0,.6); }} :root[data-theme="dark"]{ --paper:#0C140F; --card:#121E17; --ink:#EAEFE9; --ink-soft:#A9B7AE; --ink-mute:#7C8B81; --line:#243029; --line-2:#1C271F; --surface:#0C140F; --text:#EAEFE9; --soft:#A9B7AE; --mute:#7C8B81; --green:#39B06A; --green-d:#2E9E5B; --green-br:#48C77E; --green-10:#152A1E; --green-20:#1E3A29; --amber:#E8974E; --gold:#D3AB4A; --green-deep:#0C2E1C; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 12px rgba(0,0,0,.4); --sh-3:0 16px 34px rgba(0,0,0,.5); --sh-4:0 30px 64px rgba(0,0,0,.6); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--fb);color:var(--text);background:var(--surface);font-size:16px;line-height:1.55; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} ::selection{background:var(--green-20);color:var(--green-d)} :root[data-theme="dark"] ::selection,:root:not([data-theme="light"]) ::selection{background:var(--green-d);color:#fff} *{scrollbar-width:thin;scrollbar-color:var(--green-20) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--green-20);border-radius:99px;border:2px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background:var(--green)} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--fd);font-weight:700;line-height:1.08;letter-spacing:-.025em;margin:0;text-wrap:balance} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px} .mono{font-family:var(--fm);font-variant-numeric:tabular-nums} .wrap{max-width:var(--max);margin:0 auto;padding:0 28px} .hidden{display:none!important} /* ===================== BUTTONS ===================== */ .btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--fb);font-weight:600;font-size:.92rem; padding:12px 20px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;white-space:nowrap; transition:transform var(--dur) var(--e-out),box-shadow var(--dur) var(--e-out),background var(--dur),border-color var(--dur),color var(--dur)} .btn:active{transform:translateY(1px)} .btn--green{background:var(--green-btn);color:#fff;box-shadow:var(--sh-1)} .btn--green:hover{background:#155E35;box-shadow:var(--sh-2);transform:translateY(-1px)} .btn--amber{background:var(--amber);color:#231204;box-shadow:var(--sh-1)} .btn--amber:hover{background:var(--amber-d);box-shadow:var(--sh-2);transform:translateY(-1px)} .btn--ghost{background:var(--card);color:var(--text);border-color:var(--line)} .btn--ghost:hover{border-color:var(--green);color:var(--green);box-shadow:var(--sh-1)} .btn--sm{padding:9px 15px;font-size:.84rem} .btn--lg{padding:15px 26px;font-size:1rem} /* ===================== TOP STRIP ===================== */ .strip{background:var(--green-deep);color:#EAF3EC;font-size:.8rem} .strip .wrap{display:flex;align-items:center;justify-content:space-between;height:38px;gap:20px} .strip .live{display:flex;align-items:center;gap:22px;font-family:var(--fm);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden} .strip .live b{color:#fff;font-weight:600} .strip .live .d{width:7px;height:7px;border-radius:50%;background:#6FE09B;margin-right:7px;box-shadow:0 0 0 0 rgba(111,224,155,.7);animation:beat 2.4s infinite} @keyframes beat{0%{box-shadow:0 0 0 0 rgba(111,224,155,.6)}70%{box-shadow:0 0 0 7px rgba(111,224,155,0)}100%{box-shadow:0 0 0 0 rgba(111,224,155,0)}} .strip .lng{display:flex;gap:6px;flex-shrink:0} .strip .lng button{background:none;border:0;color:#9CC3AC;font:inherit;cursor:pointer;padding:2px 6px;border-radius:6px} .strip .lng button[aria-pressed="true"]{color:#fff;background:rgba(255,255,255,.12)} /* ===================== HEADER ===================== */ header.site{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--surface) 85%,transparent); backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s} header.site.lift{box-shadow:var(--sh-2)} .nav{display:flex;align-items:center;gap:26px;height:74px} .brand{display:flex;align-items:center;gap:12px;cursor:pointer} .brand .mk{width:42px;height:42px;flex-shrink:0} .brand .logo{height:46px;width:auto} .brand .logo-dark{display:none} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .logo-light{display:none}:root:not([data-theme="light"]) .brand .logo-dark{display:inline-block}} :root[data-theme="dark"] .brand .logo-light{display:none} :root[data-theme="dark"] .brand .logo-dark{display:inline-block} :root[data-theme="light"] .brand .logo-light{display:inline-block} :root[data-theme="light"] .brand .logo-dark{display:none} footer .brand .logo{height:44px;display:inline-block} .brand .wm{display:flex;flex-direction:column;line-height:1.05} .brand .wm b{font-family:var(--fd);font-weight:700;font-size:1.14rem;letter-spacing:-.02em;color:var(--text)} .brand .wm span{font-size:.7rem;letter-spacing:.02em;color:var(--mute)} .links{display:flex;gap:4px;margin-left:auto} .links a{position:relative;font-size:.92rem;font-weight:500;padding:9px 15px;border-radius:var(--r-pill);color:var(--soft);transition:color .3s,background .3s} .links a:hover{color:var(--text);background:var(--green-10)} .links a.on{color:var(--green);background:var(--green-10);font-weight:600} .tools{display:flex;gap:9px;align-items:center} .icon-btn{width:40px;height:40px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--text);transition:border-color .3s,box-shadow .3s} .icon-btn:hover{border-color:var(--green);box-shadow:var(--sh-1)} .burger{display:none} /* ===================== PAGES ===================== */ @keyframes pg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .js [data-rise]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)} .js [data-rise].vis{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.js [data-rise]{opacity:1;transform:none}} /* ===================== HERO ===================== */ .hero{padding:56px 0 44px;position:relative} .hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center} .hero h1{font-size:clamp(2.7rem,5.4vw,4.1rem);letter-spacing:-.035em;line-height:.98} .hero h1 .g{color:var(--green)} .hero .sub{font-size:1.18rem;color:var(--soft);max-width:40ch;margin:22px 0 0;line-height:1.5} /* search console */ .console{margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:10px;display:flex;flex-direction:column;gap:8px} .console .top{display:flex;gap:8px;flex-wrap:wrap;padding:6px 6px 0} .console .seg{flex:1;min-width:150px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--paper);border:1px solid transparent;transition:border-color .3s,box-shadow .3s} .console .seg:focus-within{border-color:var(--green);box-shadow:var(--ring);background:var(--card)} .console .seg svg{color:var(--mute);flex-shrink:0} .console .seg input,.console .seg select{border:0;background:none;font-family:var(--fb);font-size:.96rem;color:var(--text);width:100%;outline:none;padding:0} .console .seg select{appearance:none;cursor:pointer} .console .seg .lb{display:block;font-size:.66rem;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px} .console .go{margin:0 6px 6px;justify-content:center;padding:15px} .hero .quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center} .hero .quick span{font-size:.82rem;color:var(--mute)} .hero .quick a{font-size:.82rem;font-weight:500;color:var(--green);padding:4px 11px;border:1px solid var(--green-20);border-radius:var(--r-pill);transition:background .3s} .hero .quick a:hover{background:var(--green-10)} /* hero map card */ .mapcard{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-4);aspect-ratio:1.02;background:var(--card)} .mapcard .mapsvg{position:absolute;inset:0;width:100%;height:100%} .mapcard .floaty{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);padding:12px 14px;display:flex;gap:11px;align-items:center;max-width:230px} .mapcard .floaty .thumb{width:44px;height:44px;border-radius:10px;flex-shrink:0} .mapcard .floaty .nm{font-family:var(--fb);font-weight:600;font-size:.86rem;line-height:1.15} .mapcard .floaty .ct{font-size:.72rem;color:var(--mute);margin-top:2px} .mapcard .fa{top:16%;left:8%;animation:bob 6s var(--e-out) infinite} .mapcard .fb{bottom:14%;right:7%;animation:bob 6s var(--e-out) infinite .8s} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .mapcard .statchip{position:absolute;top:16px;right:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh-2);padding:8px 14px;font-family:var(--fm);font-size:.78rem;font-variant-numeric:tabular-nums;display:flex;gap:8px;align-items:center} .mapcard .statchip .d{width:7px;height:7px;border-radius:50%;background:var(--green-br)} /* pins */ .pin{cursor:pointer;transform-box:fill-box;transform-origin:center bottom} .pin.drop{animation:drop .6s var(--e-out) both} image.pin{transform-box:fill-box;transform-origin:center bottom;transition:transform .3s var(--e-out)} image.pin.hot{transform:scale(1.28)} @keyframes drop{0%{opacity:0;transform:translateY(-22px) scale(.6)}60%{transform:translateY(3px) scale(1.05)}100%{opacity:1;transform:none}} .pin:hover .pinbody{filter:brightness(1.08)} /* ===================== SECTIONS ===================== */ .sec{padding:64px 0} /* .sec anulaba el margen lateral de .wrap en
: el contenido tocaba los bordes de la ventana */ .sec.wrap{padding-left:28px;padding-right:28px} .sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px} .sec-h h2{font-size:clamp(1.8rem,3.6vw,2.5rem);letter-spacing:-.025em} .sec-h p{color:var(--soft);margin:8px 0 0;font-size:1rem;max-width:52ch} /* categories */ .cats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .cat{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);cursor:pointer; transition:transform var(--dur) var(--e-out),box-shadow var(--dur) var(--e-out),border-color var(--dur)} .cat:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--green-20)} .cat .cico{width:56px;height:56px;object-fit:contain;display:block;transition:transform var(--dur) var(--e-out)} .cat:hover .cico{transform:scale(1.08)} .cat h4{font-family:var(--fb);font-weight:600;font-size:.95rem;letter-spacing:0} .cat .n{font-size:.8rem;color:var(--mute);font-family:var(--fm);font-variant-numeric:tabular-nums;margin-top:-6px} /* ===================== LISTING CARD ===================== */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .lc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;cursor:pointer; box-shadow:var(--sh-1);transition:transform var(--dur) var(--e-out),box-shadow var(--dur) var(--e-out)} .lc:hover{transform:translateY(-5px);box-shadow:var(--sh-4)} .lc .img{position:relative;aspect-ratio:1.7;overflow:hidden} .lc .img .duo{position:absolute;inset:0;transition:transform .6s var(--e-out)} .lc:hover .img .duo{transform:scale(1.06)} .lc .img .glyph{position:absolute;right:10px;bottom:10px;width:44px;height:auto;opacity:.9;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));z-index:1} .lc .img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,20,14,.42))} .lc .badges{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;z-index:2} /* El fondo por defecto va aquí, antes de los modificadores .pb-*, para que un plan nuevo del catálogo se vea y no pise los colores ya definidos. */ .plan-b{background:var(--green-10);color:var(--green-d);font-size:.66rem;font-weight:600;letter-spacing:.03em;padding:5px 11px;border-radius:var(--r-pill);box-shadow:var(--sh-1)} .pb-premium{background:#15221B;color:#fff} .pb-pro{background:var(--amber);color:#231204} .pb-starter{background:#fff;color:#155E35} .ver{width:27px;height:27px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:#fff;box-shadow:var(--sh-2)} .lc .body{padding:16px 17px 17px;display:flex;flex-direction:column;gap:8px;flex:1} .lc .ct{font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--green);text-transform:uppercase} .lc h3{font-family:var(--fb);font-weight:700;font-size:1.12rem;letter-spacing:-.01em} .rate{display:flex;align-items:center;gap:7px;font-size:.82rem} .stars{--v:5;position:relative;display:inline-block;font-size:.9rem;line-height:1;font-family:Arial} .stars::before{content:'★★★★★';color:var(--line)} .stars .f{position:absolute;inset:0;width:calc(var(--v)/5*100%);overflow:hidden;color:var(--star)} .stars .f::before{content:'★★★★★'} .rate b{font-weight:600}.rate span{color:var(--mute)} .lc .addr{font-size:.85rem;color:var(--soft);display:flex;gap:6px;align-items:flex-start;line-height:1.4} .lc .addr svg{color:var(--mute);flex-shrink:0;margin-top:3px} .lc .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--line-2)} .lc .foot .views{font-size:.78rem;color:var(--mute);font-family:var(--fm)} .lc .foot .views b{color:var(--text)} .lc .foot .arw{width:32px;height:32px;border-radius:50%;background:var(--green-10);display:grid;place-items:center;color:var(--green);transition:background .3s,color .3s,transform .3s} .lc:hover .foot .arw{background:var(--green-btn);color:#fff;transform:translateX(2px)} /* ===================== COVERAGE ===================== */ .cover{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:44px;box-shadow:var(--sh-2)} .cover h2{font-size:2.1rem} .cover p{color:var(--soft);max-width:42ch;margin:12px 0 0} .clist{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-top:24px} .clist .r{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:.88rem} .clist .r b{font-family:var(--fm);color:var(--green);font-variant-numeric:tabular-nums} .cover .mapwrap{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2)} /* ===================== DIRECTORIO (split) ===================== */ .dir-top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:74px;z-index:40} .dir-top .wrap{padding:16px 28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .dir-search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;padding:11px 15px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper)} .dir-search:focus-within{border-color:var(--green);box-shadow:var(--ring)} .dir-search svg{color:var(--mute)}.dir-search input{border:0;background:none;outline:none;font-family:var(--fb);font-size:.92rem;color:var(--text);width:100%} .dir-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none} .dir-chips::-webkit-scrollbar{display:none} .chip{font-size:.83rem;font-weight:500;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);cursor:pointer;white-space:nowrap;transition:all .3s} .chip:hover{border-color:var(--green)} .chip.on{background:var(--green-btn);color:#fff;border-color:var(--green-btn)} .dir-split{display:grid;grid-template-columns:1fr 44%;gap:0} .dir-list{padding:24px 28px;max-width:760px} .dir-list .bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px} .dir-list .bar .n{font-size:.95rem}.dir-list .bar .n b{font-family:var(--fm)} .dir-list .bar select{border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:9px 12px;font-family:var(--fb);font-size:.85rem;color:var(--text);cursor:pointer} .dir-rows{display:flex;flex-direction:column;gap:16px} .row{display:grid;grid-template-columns:150px 1fr;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;cursor:pointer;box-shadow:var(--sh-1); transition:transform var(--dur) var(--e-out),box-shadow var(--dur) var(--e-out),border-color var(--dur)} .row:hover,.row.hot{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--green-20)} .row .img{position:relative;overflow:hidden} .row .img .duo{position:absolute;inset:0} .row .img .glyph{position:absolute;right:-8px;bottom:-10px;width:80px;height:80px;opacity:.18;color:#fff} .row .img .pb{position:absolute;top:8px;left:8px} .row .b{padding:15px 16px 15px 0;display:flex;flex-direction:column;gap:6px} .row .ct{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--green)} .row h3{font-family:var(--fb);font-weight:700;font-size:1.05rem} .row .addr{font-size:.82rem;color:var(--soft);display:flex;gap:5px;align-items:flex-start} .row .addr svg{color:var(--mute);flex-shrink:0;margin-top:2px} .row .foot{display:flex;gap:14px;align-items:center;margin-top:2px} .dir-mapcol{position:sticky;top:139px;height:calc(100vh - 139px);border-left:1px solid var(--line);background:var(--green-10)} .dir-mapcol .mapsvg{width:100%;height:100%} .dir-mapcol .mtag{position:absolute;top:16px;left:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh-2);padding:8px 14px;font-size:.78rem;font-family:var(--fm);display:flex;gap:8px;align-items:center} /* ===================== PLANS ===================== */ .plans-h{text-align:center;max-width:620px;margin:0 auto} .plans-h h2{font-size:clamp(2rem,4vw,2.8rem)} .plans-h p{color:var(--soft);font-size:1.05rem;margin-top:12px} /* Aviso a la vuelta de Stripe o tras pedir la revisión. Mismo lenguaje que .extra__warn, texto en --text para que se lea */ .plans-h .ghg-flash{margin:18px auto 0;max-width:60ch;padding:10px 14px;border:1px solid var(--mute);border-radius:var(--r-sm);background:var(--green-10);color:var(--text);font-size:.92rem;line-height:1.45} .bill{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px;margin-top:24px;box-shadow:var(--sh-1)} .bill button{border:0;background:none;font-family:var(--fb);font-weight:600;font-size:.85rem;padding:10px 20px;border-radius:var(--r-pill);cursor:pointer;color:var(--soft);transition:all .3s} .bill button.on{background:var(--green-btn);color:#fff;box-shadow:var(--sh-1)} .bill .sv{font-family:var(--fm);font-size:.62rem;color:var(--amber);margin-left:5px} /* minmax(0,1fr): una etiqueta larga («Escríbenos para cambiar de plan») no ensancha su columna ni saca la tabla del contenedor */ .tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:42px;align-items:start} .tier{padding:28px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);display:flex;flex-direction:column;box-shadow:var(--sh-1); transition:transform var(--dur) var(--e-out),box-shadow var(--dur) var(--e-out)} .tier:hover{transform:translateY(-6px);box-shadow:var(--sh-3)} .tier.feat{border-color:var(--green);box-shadow:var(--sh-4);transform:translateY(-10px)} .tier.feat:hover{transform:translateY(-14px)} .tier .tag{align-self:flex-start;font-size:.64rem;font-weight:600;letter-spacing:.04em;color:#fff;background:var(--green-btn);padding:4px 11px;border-radius:var(--r-pill);margin-bottom:14px;min-height:22px} .tier.feat .tag::before{content:'★ '} .tier:not(.feat) .tag{visibility:hidden} .tier .nm{font-family:var(--fd);font-weight:700;font-size:1.35rem;letter-spacing:-.02em} .tier .who{font-size:.78rem;color:var(--soft);min-height:34px;margin-top:4px} .tier .pr{margin:16px 0 3px;display:flex;align-items:baseline;gap:4px} .tier .pr b{font-family:var(--fm);font-weight:600;font-size:2.1rem;color:var(--text);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .tier .pr small{font-size:.76rem;color:var(--mute)} .tier .per{font-size:.68rem;color:var(--mute);min-height:14px;font-family:var(--fm)} .tier .btn{margin-top:18px;justify-content:center;width:100%;white-space:normal;text-align:center;line-height:1.3} .tier ul{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:10px} .tier li{font-size:.82rem;display:flex;gap:9px;align-items:flex-start;line-height:1.35} .tier li svg{flex-shrink:0;color:var(--green);margin-top:2px} .tier li.off{color:var(--mute)}.tier li.off svg{color:var(--line)} /* Complemento de pago aparte (+): ni incluido (✓ verde) ni ausente (✗ tachado) */ .tier li.addon svg{color:var(--soft)} .tier li b{font-weight:600} .addons{margin-top:56px} .addg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px} .addon{border:1px solid var(--line);border-radius:var(--r-md);padding:20px;background:var(--card);box-shadow:var(--sh-1);transition:transform var(--dur) var(--e-out),box-shadow var(--dur)} .addon:hover{transform:translateY(-3px);box-shadow:var(--sh-2)} .addon .p{font-family:var(--fm);font-weight:600;color:var(--amber);font-size:1.15rem} .addon h4{font-family:var(--fb);font-weight:600;font-size:.95rem;margin:8px 0 6px} .addon p{font-size:.82rem;color:var(--soft);margin:0} .ent{margin-top:50px;border:1px solid var(--line);border-radius:var(--r-lg);padding:38px;background:var(--card);box-shadow:var(--sh-2);display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center} .ent h3{font-size:1.5rem}.ent p{color:var(--soft);margin:8px 0 0;max-width:60ch} /* ===================== FICHA ===================== */ .fh{height:280px;position:relative;overflow:hidden} .fh .duo{position:absolute;inset:0} .fh .glyph{position:absolute;right:4%;bottom:24px;width:118px;height:auto;opacity:.92;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));z-index:1} .fh::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--surface))} .fwrap{max-width:var(--max);margin:-96px auto 0;padding:0 28px;position:relative;z-index:2} .fcard{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-4);padding:34px;display:grid;grid-template-columns:1fr 330px;gap:38px} .fmain .top{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .fmain h1{font-size:2.3rem} .tagm{font-size:.7rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--green);background:var(--green-10);padding:6px 12px;border-radius:var(--r-pill)} .seal{display:inline-flex;gap:6px;align-items:center;font-size:.7rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#5c4708;background:linear-gradient(135deg,#f2df9c,#d8b23c);padding:6px 12px;border-radius:var(--r-pill)} .fmain .rate{margin:6px 0 0} .fmain p.desc{font-size:1.02rem;color:var(--text);line-height:1.65;margin:16px 0 24px} .gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0} .gal .g{aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;position:relative;cursor:pointer} .gal .g .duo{position:absolute;inset:0;transition:transform .5s var(--e-out)} .gal .g:hover .duo{transform:scale(1.08)} /* La oferta se pinta abajo, con el marcado de single-ait-item.php. Aquí estaba la del prototipo («.offer» con display:flex y «.offer .t», una clase que ya no existe en el tema): como la de abajo no redeclara «display», su flex sobrevivía y sacaba en fila los cuatro párrafos del bloque. */ .stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px} .st{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;text-align:center;background:var(--paper)} .st b{font-family:var(--fm);font-size:1.7rem;color:var(--green);display:block;font-variant-numeric:tabular-nums} .st span{font-size:.74rem;color:var(--mute)} .fside{display:flex;flex-direction:column;gap:12px} .sb{border:1px solid var(--line);border-radius:var(--r-md);padding:19px;background:var(--paper)} .sb h4{font-family:var(--fb);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-bottom:12px} .sr{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:.88rem;border-bottom:1px solid var(--line-2)} .sr:last-child{border-bottom:0}.sr svg{color:var(--green);flex-shrink:0;margin-top:2px} .hrs .h{display:flex;justify-content:space-between;padding:6px 0;font-size:.84rem} .hrs .h.now{color:var(--green);font-weight:600}.hrs .h span:last-child{font-family:var(--fm)} .fmap{height:150px;border-radius:var(--r-sm);overflow:hidden;margin-top:10px;border:1px solid var(--line)} /* ===================== GUÍA ===================== */ .gcta{margin-top:64px;background:var(--green-deep);color:#EAF3EC;border-radius:var(--r-lg);padding:54px;text-align:center;position:relative;overflow:hidden} .gcta .mapsvg{position:absolute;inset:0;opacity:.1} .gcta>*{position:relative}.gcta h2{color:#fff;font-size:2.2rem} .gcta p{color:#CFE6D7;max-width:50ch;margin:14px auto 26px} .gcta .r{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .gcta .dead{font-family:var(--fm);font-size:.8rem;color:#8FE3AE;margin-bottom:12px;letter-spacing:.02em} /* El pie vive al final del fichero, en «PIE PROFESIONAL». */ /* ===================== MODAL ===================== */ .mback{position:fixed;inset:0;background:rgba(9,18,13,.6);backdrop-filter:blur(5px);z-index:1000;display:none;place-items:center;padding:20px} .mback.on{display:grid} .modal{background:var(--card);border-radius:var(--r-lg);max-width:460px;width:100%;box-shadow:var(--sh-4);overflow:hidden;animation:mup .45s var(--e-out)} @keyframes mup{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}} .modal .mh{background:var(--green-d);color:#fff;padding:22px 26px;display:flex;justify-content:space-between;align-items:center} .modal .mh b{font-family:var(--fd);font-size:1.12rem;font-weight:700}.modal .mh .x{cursor:pointer;opacity:.8}.modal .mh .x:hover{opacity:1} .modal .mb{padding:26px} .modal .sum{display:flex;justify-content:space-between;align-items:baseline;padding:15px 17px;background:var(--green-10);border-radius:var(--r-md);margin-bottom:20px} .modal .sum .pl{font-family:var(--fd);font-weight:700;font-size:1.05rem} .modal .sum .pr{font-family:var(--fm);font-weight:600;font-size:1.35rem;color:var(--green);font-variant-numeric:tabular-nums} .modal label{display:block;font-size:.72rem;font-weight:600;color:var(--mute);margin:13px 0 6px;text-transform:uppercase;letter-spacing:.05em} .modal .mi{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--paper);font-family:var(--fb);font-size:.9rem;color:var(--text);width:100%;outline:none} .modal .mi:focus{border-color:var(--green);box-shadow:var(--ring)} .modal .fc{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--paper);display:flex;align-items:center;gap:10px;font-family:var(--fm);font-size:.9rem;color:var(--mute)} .modal .note{display:flex;gap:8px;align-items:center;justify-content:center;font-size:.75rem;color:var(--mute);margin-top:16px} .modal .btn{width:100%;justify-content:center;margin-top:18px;padding:14px} .ok{text-align:center;padding:16px 0} .ok .c{width:66px;height:66px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:0 auto 16px;color:#fff;animation:pop .5s var(--e-out)} @keyframes pop{from{transform:scale(0)}to{transform:scale(1)}} /* ===================== ESPACIOS PUBLICITARIOS ===================== */ .ad{margin:0 auto;width:100%} .ad--lead{max-width:1000px} .ad-lbl{display:block;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px;text-align:center} .ad-box{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1)} .ad-box>img{width:100%;height:auto;display:block} .ad-rot{aspect-ratio:900/200} .ad-rot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--paper);opacity:0;transition:opacity .7s var(--e-out)} .ad-rot img.on{opacity:1} .ad-dots{position:absolute;bottom:9px;right:11px;display:flex;gap:5px;z-index:2} .ad-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.15);cursor:pointer;transition:background .3s,transform .3s} .ad-dots i.on{background:#fff;transform:scale(1.2)} .ad-free{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px 20px; border:1.5px dashed var(--green-20);background:var(--green-10);border-radius:var(--r-md)} .ad-free b{font-size:1rem;font-weight:700} .ad-free p{font-size:.84rem;color:var(--soft);margin:0;max-width:34ch} .ad-free .fmt{font-family:var(--fm);font-size:.72rem;color:var(--green);font-variant-numeric:tabular-nums} .ad-mpu .ad-free{aspect-ratio:300/250;padding:18px} .ad-feed{margin:4px 0} @media(max-width:620px){.ad-lbl{font-size:.62rem}} /* ===================== RESPONSIVE ===================== */ @media(max-width:1040px){ .hero .wrap{grid-template-columns:1fr;gap:36px} .cats{grid-template-columns:repeat(3,1fr)} .grid3{grid-template-columns:1fr 1fr} .cover{grid-template-columns:1fr;padding:32px} .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}.tier.feat{transform:none}.tier.feat:hover{transform:translateY(-6px)} .addg{grid-template-columns:1fr 1fr} .ent{grid-template-columns:1fr} .dir-split{grid-template-columns:1fr} .dir-mapcol{display:none} .fcard{grid-template-columns:1fr} footer .cols{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .links{display:none}.burger{display:grid} .cats{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr} .tiers,.addg{grid-template-columns:1fr} .strip .live{display:none} .row{grid-template-columns:110px 1fr} .hero h1{font-size:2.6rem} } /* ===================== WORDPRESS ===================== */ .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--card);color:var(--text);padding:12px 18px;border-radius:0 0 var(--r-sm) 0} .skip-link:focus{left:0} .alignwide{max-width:1100px;margin-inline:auto} .alignfull{width:100vw;margin-left:calc(50% - 50vw)} .wp-caption-text,figcaption{font-size:.82rem;color:var(--mute);margin-top:8px} .entry-content{max-width:72ch;margin:0 auto} .entry-content p{margin:1em 0} .entry-content a{color:var(--green);text-decoration:underline;text-underline-offset:3px} .entry-content img{border-radius:var(--r-md)} .pagination{display:flex;gap:8px;justify-content:center;margin:40px 0;flex-wrap:wrap} .pagination .page-numbers{display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);font-size:.9rem} .pagination .page-numbers.current{background:var(--green-btn);color:#fff;border-color:var(--green-btn)} .pagination a.page-numbers:hover{border-color:var(--green);color:var(--green)} .no-results{padding:48px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-md);color:var(--soft)} /* barra de admin de WP */ body.admin-bar header.site{top:32px} @media(max-width:782px){body.admin-bar header.site{top:46px}} /* ===================== PIEZAS DEL TEMA (Fase 1) ===================== */ /* Lienzo de mapa reutilizable */ .mapsurface{position:absolute;inset:0;background-image:url(../img/map.svg);background-size:cover;background-position:center} .mapcard,.mapwrap,.dir-mapcol,.fmap{position:relative;overflow:hidden} .mapwrap{border-radius:var(--r-md);border:1px solid var(--line);aspect-ratio:1.5} .map-pins{position:absolute;inset:0} .map-pin{position:absolute;transform:translate(-50%,-100%);width:30px;z-index:2;cursor:pointer;transition:transform .3s var(--e-out),filter .3s} .map-pin img{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 6px rgba(21,34,27,.3))} .map-pin:hover,.map-pin.hot{transform:translate(-50%,-100%) scale(1.25);z-index:5} .map-pin.drop{animation:pindrop .55s var(--e-out) both} @keyframes pindrop{0%{opacity:0;transform:translate(-50%,-160%) scale(.6)}100%{opacity:1;transform:translate(-50%,-100%) scale(1)}} .map-tip{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap; background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-pill); padding:4px 10px;font-size:.72rem;box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:opacity .25s} .map-pin:hover .map-tip,.map-pin.hot .map-tip{opacity:1} .map-empty .mapsurface{opacity:.5} /* Enlace que cubre toda la tarjeta sin romper la semántica */ .lc,.row{position:relative} .lc-link{position:absolute;inset:0;z-index:3} .lc .foot .arw,.row .b a{position:relative;z-index:4} /* Tono de marca por categoría cuando la ficha no tiene foto */ .duo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .duo--growshop{background:linear-gradient(135deg,#0e5230,#2E9E5B)} .duo--semillas{background:linear-gradient(135deg,#7a5a17,#C99B2E)} .duo--distribuidor{background:linear-gradient(135deg,#6b4a2a,#B0813F)} .duo--fabricante{background:linear-gradient(135deg,#7a4a1c,#C87F2E)} .duo--asociacion{background:linear-gradient(135deg,#4c2560,#8B4FA8)} .duo--industrial{background:linear-gradient(135deg,#1f4633,#3F7C5A)} .duo--medicinal{background:linear-gradient(135deg,#8a2b45,#C4536F)} .duo--legal{background:linear-gradient(135deg,#1c4f63,#3E8CA8)} .duo--jardineria{background:linear-gradient(135deg,#2f5c1f,#5C9B3C)} .duo--medios{background:linear-gradient(135deg,#54306b,#8E5BA8)} .lc .img .glyph,.fh .glyph{position:absolute;right:12px;bottom:12px;width:46px;height:auto;opacity:.92;z-index:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))} .fh .glyph{width:110px;right:4%;bottom:22px} /* Lista de países como enlaces */ .clist .r{text-decoration:none;color:inherit;transition:color .3s} .clist .r:hover{color:var(--green)} /* Características de la ficha */ .fsec-title{font-family:var(--fb);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:26px 0 12px} .feats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:9px} .feats li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem} .feats li svg{color:var(--green);flex-shrink:0;margin-top:3px} .feats .feats__desc{display:block;margin-top:2px;font-size:.8rem;color:var(--soft)} /* Redes sociales de la ficha: enlaces con el nombre de la red (el tema no carga Font Awesome) */ .fsocial{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .fsocial a{display:inline-flex;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.82rem;color:var(--text);text-decoration:none} .fsocial a:hover,.fsocial a:focus-visible{border-color:var(--green);color:var(--green)} /* Menú móvil */ @media(max-width:620px){ .links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column; background:var(--card);border-bottom:1px solid var(--line);padding:12px 24px;gap:2px;box-shadow:var(--sh-3);z-index:99} } /* Comentarios / reseñas */ .comment-list{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:16px} .comment-list li{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:var(--card)} .comment-list .fn{font-weight:600;font-style:normal} .comment-respond{margin-top:26px;border-top:1px solid var(--line);padding-top:22px} .comment-form input[type=text],.comment-form input[type=email],.comment-form textarea{ width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--paper); font-family:var(--fb);font-size:.92rem;color:var(--text)} .comment-form textarea{min-height:120px} .comment-form .submit{background:var(--green-btn);color:#fff;border:0;border-radius:var(--r-pill);padding:12px 22px;font-weight:600;cursor:pointer} /* ===================== AJUSTES v1.1 ===================== */ /* Google Maps ocupa el contenedor */ .mapsurface.is-gmap{background:none} .mapcard .mapsurface,.dir-mapcol .mapsurface,.fh .mapsurface,.mapwrap .mapsurface{position:absolute;inset:0} .gm-card{font-family:var(--fb);font-size:.86rem;line-height:1.4;color:#15221B} .gm-card strong{font-size:.95rem} .gm-card span{color:#5f6f66} .gm-card a{color:#1B7A44;font-weight:600;display:inline-block;margin-top:4px} /* Cabecera de ficha con mapa */ .fh--map{height:340px;background:var(--green-10)} .fh--map::after{content:none} /* Marcador de posición limpio cuando el negocio no tiene foto */ .ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--green-10)} .ph img{width:46%;max-width:74px;height:auto;opacity:.9;filter:saturate(.92)} .row .ph img{max-width:52px} .ph--growshop{background:#E8F2EA} .ph--semillas{background:#F6EFDD} .ph--distribuidor{background:#F2EBE1} .ph--fabricante{background:#F7EEE2} .ph--asociacion{background:#F0EAF5} .ph--industrial{background:#E9F1EB} .ph--medicinal{background:#F8EAEE} .ph--legal{background:#E7F0F4} .ph--jardineria{background:#EAF2E4} .ph--medios{background:#F1EBF5} /* * Modo oscuro. Estas reglas iban sin @media, y «:root:not([data-theme="light"])» también casa con quien no ha tocado * el interruptor y tiene el sistema en CLARO, que es casi todo el mundo: el panel perdía su color de categoría y el * icono se quedaba al 75 %. Ahora van como el resto del tema: interruptor en oscuro, o sistema en oscuro sin tocarlo. * * En oscuro el icono va sobre una moneda clara en vez de apagarse. Los iconos están dibujados para fondo claro (sus * diez colores pasan de 3:1 sobre blanco); sobre el verde casi negro de las tarjetas, «Cáñamo industrial» desaparecía * y el filo blanco de la regadera de «Jardinería» se veía como un recorte. Sobre la moneda se ven igual que de día. */ :root{--ghg-icon-plate:#EEF3EE} :root[data-theme="dark"] .ph{background:var(--green-10)} :root[data-theme="dark"] .ph img,:root[data-theme="dark"] .cat .cico{background:var(--ghg-icon-plate);border-radius:50%} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ph{background:var(--green-10)} :root:not([data-theme="light"]) .ph img,:root:not([data-theme="light"]) .cat .cico{background:var(--ghg-icon-plate);border-radius:50%} } /* La fila del directorio necesita altura mínima para que la imagen no se deforme */ .row{min-height:118px} .row .img{min-height:118px} .lc .img{background:var(--green-10)} /* ===================== AJUSTES v1.2 ===================== */ /* Los iconos de categoría deben leerse, no insinuarse */ .ph img{width:auto;height:auto;max-width:none;opacity:1;filter:none} .lc .ph img{width:84px;max-width:44%} .row .ph img{width:66px;max-width:58%} .fh .ph img{width:120px} .ph{background:var(--green-10)} .ph--growshop{background:#DDEDE2} .ph--semillas{background:#F3E8CF} .ph--distribuidor{background:#EDE3D5} .ph--fabricante{background:#F4E6D3} .ph--asociacion{background:#E9E1F1} .ph--industrial{background:#E0EDE4} .ph--medicinal{background:#F6E1E7} .ph--legal{background:#DEEBF1} .ph--jardineria{background:#E3EFDA} .ph--medios{background:#EBE2F2} /* La columna del mapa necesita fondo propio mientras Google carga */ .dir-mapcol{background:#eceadf} .dir-mapcol .mapsurface{position:absolute;inset:0} /* ===================================================================== v2.0 — Modelo business cannábico Fuera los cremas: base blanca y grises fríos, verde profundo de marca y un verde vivo de acento. Superficies oscuras en carbón, no en marrón. ===================================================================== */ :root{ --paper:#F4F7F5; --card:#FFFFFF; --ink:#0D1613; --ink-soft:#51625A; --ink-mute:#7C8B83; --line:#E2E8E4; --line-2:#EDF1EF; --green:#0B7A4B; --green-d:#075C38; --green-br:#17A863; --green-10:#EAF5EF; --green-20:#CFE8DB; --green-btn:#0B7A4B; --green-deep:#0A2B1D; --amber:#D9822B; --amber-d:#B8681C; --gold:#A8801B; --star:#E0A63C; --surface:var(--paper); --surface-2:#FAFCFB; --surface-card:var(--card); --border:var(--line); --text:var(--ink); --soft:var(--ink-soft); --mute:var(--ink-mute); --accent:var(--green); --cta:var(--amber); --sh-1:0 1px 2px rgba(13,22,19,.05),0 1px 1px rgba(13,22,19,.03); --sh-2:0 4px 10px rgba(13,22,19,.06),0 2px 4px rgba(13,22,19,.04); --sh-3:0 12px 24px rgba(13,22,19,.08),0 5px 10px rgba(13,22,19,.05); --sh-4:0 24px 46px rgba(13,22,19,.13),0 10px 18px rgba(13,22,19,.07); --ring:0 0 0 3px rgba(23,168,99,.3); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --paper:#0B120F; --card:#131C18; --ink:#E8EDEA; --ink-soft:#A2B0A8; --ink-mute:#7B8981; --line:#212C27; --line-2:#1A2420; --surface:#0B120F; --surface-2:#101815; --text:#E8EDEA; --soft:#A2B0A8; --mute:#7B8981; --green:#2FBE78; --green-d:#17A863; --green-br:#46D48D; --green-10:#12241C; --green-20:#1A3327; --green-btn:#0B7A4B; --green-deep:#071B12; --amber:#E39B4F; --gold:#CBA13F; }} :root[data-theme="dark"]{ --paper:#0B120F; --card:#131C18; --ink:#E8EDEA; --ink-soft:#A2B0A8; --ink-mute:#7B8981; --line:#212C27; --line-2:#1A2420; --surface:#0B120F; --surface-2:#101815; --text:#E8EDEA; --soft:#A2B0A8; --mute:#7B8981; --green:#2FBE78; --green-d:#17A863; --green-br:#46D48D; --green-10:#12241C; --green-20:#1A3327; --green-btn:#0B7A4B; --green-deep:#071B12; --amber:#E39B4F; --gold:#CBA13F; } /* ---------- Mapa de cabecera a todo el ancho ---------- */ .maphero{position:relative;width:100%;height:clamp(340px,46vh,520px);background:#e9ece6;overflow:hidden;border-bottom:1px solid var(--line)} .maphero .mapsurface{position:absolute;inset:0} .maphero__bar{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none; background:linear-gradient(to top,rgba(8,16,13,.55),transparent);padding:26px 0 20px} .maphero__bar .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} .maphero h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.025em;text-shadow:0 2px 14px rgba(0,0,0,.4);margin:0} .maphero .sub{color:#DCE7E1;font-size:.95rem;margin:6px 0 0;text-shadow:0 1px 10px rgba(0,0,0,.4)} .maphero .chip{pointer-events:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill); box-shadow:var(--sh-2);padding:9px 16px;font-family:var(--fm);font-size:.8rem;display:inline-flex;gap:8px;align-items:center} .maphero .chip i{width:8px;height:8px;border-radius:50%;background:var(--green-br);display:inline-block} /* ---------- Resultados en rejilla bajo el mapa ---------- */ .dir-body{padding:28px 0 60px} .dir-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px} .dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px} .dir-grid .ad{grid-column:1/-1;margin:6px 0} @media(max-width:640px){.dir-grid{grid-template-columns:1fr}} /* la columna lateral de mapa deja de usarse */ .dir-split{display:block} .dir-mapcol{display:none} .dir-list{padding:0;max-width:none} /* ---------- Portada v2: mapa como lienzo + panel de búsqueda ---------- */ .hero2{position:relative;background:var(--surface)} .hero2__map{position:relative;width:100%;height:clamp(420px,62vh,640px);background:#e9ece6;overflow:hidden} .hero2__map .mapsurface{position:absolute;inset:0} .hero2__map::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(8,16,13,.55) 0%,rgba(8,16,13,.18) 46%,transparent 70%)} .hero2__panel{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;z-index:3} .hero2__box{pointer-events:auto;max-width:520px;background:var(--card);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-4);padding:30px} .hero2 h1{font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.03em;line-height:1.06;margin:0} .hero2 h1 .g{color:var(--green)} .hero2 .sub{color:var(--soft);font-size:1rem;margin:14px 0 0;line-height:1.55} .hero2 .sub b{color:var(--text);font-family:var(--fm);font-variant-numeric:tabular-nums} .hero2 .console{margin-top:20px;box-shadow:none;border:1px solid var(--line);padding:8px} .hero2 .quick{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px} .hero2 .quick span{font-size:.82rem;color:var(--mute)} .hero2 .quick a{font-size:.82rem;font-weight:500;color:var(--green);padding:5px 12px; border:1px solid var(--green-20);border-radius:var(--r-pill);transition:background .3s} .hero2 .quick a:hover{background:var(--green-10)} @media(max-width:900px){ .hero2__map{height:360px} .hero2__map::after{background:linear-gradient(180deg,rgba(8,16,13,.15),rgba(8,16,13,.45))} .hero2__panel{position:static;padding:0} .hero2__box{max-width:none;margin:-70px auto 0;position:relative;z-index:4} } /* Bloque de cobertura con llamada a la acción */ .cover{grid-template-columns:1.15fr .85fr} .cover__cta{background:var(--green-deep);color:#EAF3EE;border-radius:var(--r-lg);padding:30px;align-self:stretch; display:flex;flex-direction:column;justify-content:center} .cover__cta h3{color:#fff;font-size:1.4rem} .cover__cta p{color:#B9D2C6;margin:10px 0 20px;max-width:34ch} .cover__cta .btn{align-self:flex-start} @media(max-width:1000px){.cover{grid-template-columns:1fr}} /* ---------- Ubicación del usuario ---------- */ .ghg-locate{margin:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill); box-shadow:var(--sh-2);padding:9px 16px;font-family:var(--fb);font-size:.84rem;font-weight:600; color:var(--text);cursor:pointer;transition:border-color .3s,color .3s} .ghg-locate:hover{border-color:var(--green);color:var(--green)} .ghg-locate:disabled{cursor:default;opacity:.85} .ghg-locate.is-denied{color:var(--mute);font-weight:500} .ghg-near-link{display:inline-flex;align-items:center;gap:7px;background:var(--green-btn);color:#fff; border-radius:var(--r-pill);padding:9px 16px;font-size:.84rem;font-weight:600;box-shadow:var(--sh-2);pointer-events:auto} .ghg-near-link:hover{background:var(--green-d);color:#fff} .near-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; background:var(--green-10);border:1px solid var(--green-20);border-radius:var(--r-md); padding:14px 18px;margin-bottom:20px} .near-banner b{color:var(--green-d)} :root[data-theme="dark"] .near-banner b,:root:not([data-theme="light"]) .near-banner b{color:var(--green-br)} .near-banner a{font-size:.85rem;color:var(--soft);text-decoration:underline;text-underline-offset:3px} .dist{display:inline-flex;align-items:center;gap:5px;font-family:var(--fm);font-size:.76rem; color:var(--green-d);background:var(--green-10);border-radius:var(--r-pill);padding:3px 10px} :root[data-theme="dark"] .dist,:root:not([data-theme="light"]) .dist{color:var(--green-br)} /* ===================== PIE PROFESIONAL ===================== */ footer.site{background:var(--green-deep);color:#B9CFC3;padding:60px 0 28px} .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1fr;gap:44px;align-items:start} .foot-brand .logo{height:46px;width:auto;display:block} .foot-brand .ab{font-size:.88rem;line-height:1.65;color:#A9C4B7;margin:16px 0 0;max-width:38ch} .foot-stats{font-family:var(--fm);font-size:.82rem;color:#8FB3A1;margin:14px 0 0} .foot-stats b{color:#fff} .foot-social{list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;padding:0;margin:20px 0 0} .foot-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#CFE3D8;transition:all .3s} .foot-social a:hover{background:var(--green-br);border-color:var(--green-br);color:#04120a} .foot-col h2{font-family:var(--fb);font-size:.78rem;font-weight:700;text-transform:uppercase; letter-spacing:.1em;color:#fff;margin:0 0 16px} .foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px} .foot-col a{font-size:.9rem;color:#B9CFC3;transition:color .25s} .foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} .foot-contact li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;line-height:1.5;color:#B9CFC3} .foot-contact li svg{color:var(--green-br);flex-shrink:0;margin-top:3px} .foot-contact .org{flex-direction:column;gap:2px} .foot-contact .org strong{color:#fff;font-size:.95rem} .foot-contact .org .nif{font-family:var(--fm);font-size:.76rem;color:#8FB3A1;letter-spacing:.02em} .foot-col a.foot-cta{display:inline-block;margin-top:4px;border:1px solid rgba(255,255,255,.24); border-radius:var(--r-pill);padding:8px 15px;font-size:.84rem;font-weight:600} .foot-col a.foot-cta:hover{background:rgba(255,255,255,.1);text-decoration:none} .foot-age{font-size:.78rem;color:#8FB3A1;margin:16px 0 0;line-height:1.5} /* Fila de enlaces internos (SEO): líneas de texto que fluyen, no pastillas. Son los enlaces que dan a los buscadores un camino a las taxonomías. */ .foot-seo{margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12); display:flex;flex-direction:column;gap:14px} .foot-seo .line{display:flex;gap:10px 16px;align-items:baseline;flex-wrap:wrap} .foot-seo h2{flex:0 0 auto;font-family:var(--fb);font-size:.72rem;font-weight:700;text-transform:uppercase; letter-spacing:.1em;color:#8FB3A1;margin:0;min-width:92px} .foot-seo ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:row;flex-wrap:wrap; align-items:baseline;gap:2px 0;flex:1 1 320px} .foot-seo li{display:inline-flex;align-items:baseline} .foot-seo li:not(:last-child)::after{content:"";width:1px;height:11px;align-self:center; background:rgba(255,255,255,.22);margin:0 11px} .foot-seo a{font-size:.83rem;color:#B9CFC3;line-height:1.9;transition:color .2s} .foot-seo a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} .foot-base{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12); display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:#7FA491} @media(max-width:1040px){ .foot-top{grid-template-columns:1fr 1fr;gap:34px} .foot-brand{grid-column:1/-1} } @media(max-width:620px){ .foot-top{grid-template-columns:1fr} .foot-seo .line{flex-direction:column;gap:6px} footer.site{padding:44px 0 24px} } /* ===================== GUÍA DEL CÁÑAMO ===================== */ .guia-page{--guia-on-deep:#EAF3EC;--guia-soft-deep:#B9CFC3;background:var(--paper);color:var(--ink);overflow-wrap:break-word} .guia-page:where(:root[data-theme="dark"] *){--guia-on-deep:#E8EDEA;--guia-soft-deep:#A2B0A8} @media(prefers-color-scheme:dark){ .guia-page:where(:root:not([data-theme="light"]) *){--guia-on-deep:#E8EDEA;--guia-soft-deep:#A2B0A8} } /* currentColor pintaba el contorno de blanco sobre los CTA verdes: se fija al verde de marca, legible en las cuatro superficies de la pagina. */ .guia-page a:focus-visible{outline:2px solid var(--green);outline-offset:3px;box-shadow:var(--ring)} .guia-page .btn{justify-content:center;white-space:normal;text-align:center;max-width:100%} .guia-eyebrow{font-family:var(--fm);font-size:.73rem;font-weight:500;letter-spacing:.1em;line-height:1.6;text-transform:uppercase;color:var(--green);margin:0 0 20px} .guia-heading{font-size:clamp(2rem,3.8vw,3.35rem);line-height:1.03;letter-spacing:-.045em;max-width:19ch} .guia-text{font-size:1.02rem;line-height:1.7;color:var(--ink-soft);max-width:54ch;margin:22px 0 0} .guia-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin-top:30px} .guia-text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--green);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px} .guia-text-link:hover{text-decoration-thickness:2px} .guia-hero{padding:64px 0 60px} .guia-hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:60px;align-items:center} .guia-hero__copy{animation:guia-rise .8s var(--e-out) both} .guia-hero__copy .guia-eyebrow{display:flex;align-items:center;gap:14px} .guia-hero__copy .guia-eyebrow::before{content:"";width:32px;height:2px;background:var(--gold);flex-shrink:0} .guia-title{font-size:clamp(3.6rem,7.4vw,6.6rem);line-height:.94;letter-spacing:-.065em;color:var(--green);max-width:10ch;text-wrap:initial} .guia-hero__claim{font-family:var(--fd);font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:600;line-height:1.25;letter-spacing:-.035em;margin:26px 0 0} .guia-lead{font-size:1.1rem;line-height:1.65;color:var(--ink-soft);max-width:45ch;margin:18px 0 0} .guia-hero__copy .guia-actions{gap:12px} .guia-hero__copy .guia-button{padding-inline:22px;font-size:.93rem} .guia-hero__note{font-family:var(--fm);font-size:.72rem;line-height:1.7;color:var(--ink-soft);max-width:48ch;margin:20px 0 0} /* El lomo y el canto dan volumen a la portada original, sin alterar la imagen. */ .guia-edition{position:relative;isolation:isolate;min-width:0;margin:0;padding:26px 30px;background:var(--green-deep);color:var(--guia-on-deep);border:1px solid var(--green-20);border-radius:var(--r-lg);box-shadow:var(--sh-4);animation:guia-rise 1s var(--e-out) .12s both} .guia-edition__top{display:flex;justify-content:space-between;align-items:center;gap:16px} .guia-edition__label{font-family:var(--fm);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--guia-soft-deep)} .guia-edition__tag{font-family:var(--fm);font-size:.72rem;padding:5px 10px;border:1px solid color-mix(in srgb,var(--guia-on-deep) 25%,transparent);border-radius:var(--r-pill)} .guia-edition__stage{position:relative;display:grid;place-items:center;padding:40px 16px 46px;perspective:1100px} .guia-edition__stage::before{content:"";position:absolute;inset:42px 0 52px;border:1px solid color-mix(in srgb,var(--guia-on-deep) 13%,transparent);border-radius:50%;transform:rotate(-18deg)} .guia-edition__stage::after{content:"";position:absolute;z-index:-1;left:16%;right:8%;height:24px;bottom:32px;background:var(--green-deep);border-radius:50%;box-shadow:var(--sh-4);transform:rotate(-6deg)} .guia-book{position:relative;width:min(100%,276px);transform:rotateY(-13deg) rotateZ(4deg);transform-style:preserve-3d;box-shadow:var(--sh-4)} .guia-book::before{content:"";position:absolute;z-index:2;inset:0 auto 0 -9px;width:12px;background:linear-gradient(90deg,var(--green-deep),var(--green-d));border-radius:2px 0 0 2px;transform:skewY(-8deg);transform-origin:right} .guia-book::after{content:"";position:absolute;z-index:-1;top:4px;right:-10px;bottom:-3px;width:14px;background:repeating-linear-gradient(0deg,var(--guia-on-deep) 0 2px,var(--guia-soft-deep) 2px 3px);transform:skewY(-22deg);border-radius:0 2px 2px 0;box-shadow:var(--sh-2)} .guia-book__cover{position:relative;width:100%;height:auto;aspect-ratio:266/380;border-radius:1px 2px 2px 1px} .guia-edition__caption{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-top:1px solid color-mix(in srgb,var(--guia-on-deep) 20%,transparent);padding-top:18px;font-size:.82rem;line-height:1.5;color:var(--guia-soft-deep)} .guia-edition__caption>span:first-child{max-width:23ch} .guia-edition__format{font-family:var(--fm);font-size:.65rem;text-transform:uppercase;letter-spacing:.03em;text-align:right;max-width:11ch;color:var(--guia-on-deep)} .guia-facts{border-block:1px solid var(--line);background:var(--card)} .guia-facts__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:30px} .guia-fact{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:8px 28px;border-left:1px solid var(--line)} .guia-fact:first-child{padding-left:0;border-left:0} .guia-fact:last-child{padding-right:0} .guia-fact__label{font-family:var(--fm);font-size:.69rem;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;color:var(--ink-soft)} .guia-fact__value{font-family:var(--fm);font-size:clamp(2rem,3.2vw,2.9rem);font-weight:500;line-height:1.12;letter-spacing:-.055em;font-variant-numeric:tabular-nums;color:var(--green);margin:12px 0} .guia-fact__value--places{font-size:clamp(1.35rem,2vw,1.8rem);max-width:12ch;letter-spacing:-.035em} .guia-fact__detail{font-size:.81rem;line-height:1.5;color:var(--ink-soft);margin:0} .guia-contents{padding-block:88px} .guia-contents__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:100px;align-items:center} .guia-section-heading{margin:0} .guia-section-heading .guia-heading{font-size:clamp(2rem,3.8vw,3.35rem);letter-spacing:-.045em} /* Superficie teñida, no raíl lateral: esta página marca lo destacado con fondo (ver .guia-deadline y .offer), y una franja de color a un lado de un bloque es además el tópico visual que queremos evitar. */ .guia-contents__note{font-size:.93rem;line-height:1.6;color:var(--green);padding:14px 18px;border-radius:var(--r-sm);background:rgba(168,128,27,.07);margin:28px 0 0;max-width:38ch} .guia-index{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)} .guia-index__row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:22px;padding:18px 0;border-bottom:1px solid var(--line)} /* Redonda y sin relleno: los iconos traen su propio disco de color, y la placa cuadrada con 7 px de margen los encajonaba y los dejaba en 34 px. La placa sigue detrás, a su medida, para el modo oscuro. */ .guia-index__icon{width:48px;height:48px;object-fit:contain;padding:0;border-radius:50%;background:var(--guia-on-deep)} .guia-index__name{font-size:clamp(1.25rem,2.2vw,1.85rem);letter-spacing:-.035em} .guia-index__number{font-family:var(--fm);font-size:.76rem;color:var(--ink-soft)} .guia-advertise{background:var(--green-deep);color:var(--guia-on-deep);padding-block:80px} /* En oscuro --green-deep queda por debajo de --paper y la banda desaparece: se sube el fondo y se enmarca, solo en ese tema. */ .guia-advertise:where(:root[data-theme="dark"] *){background:#0F2A1C;border-block:1px solid color-mix(in srgb,var(--guia-on-deep) 20%,transparent)} @media(prefers-color-scheme:dark){ .guia-advertise:where(:root:not([data-theme="light"]) *){background:#0F2A1C;border-block:1px solid color-mix(in srgb,var(--guia-on-deep) 20%,transparent)} } .guia-advertise__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:88px;align-items:center} .guia-advertise__copy>.guia-eyebrow{color:var(--guia-soft-deep)} .guia-advertise__copy>.guia-heading{max-width:18ch} .guia-advertise__lead{font-size:1.1rem;line-height:1.65;color:var(--guia-soft-deep);max-width:46ch;margin:24px 0 32px} .guia-benefits{list-style:none;padding:0;margin:0;border-top:1px solid color-mix(in srgb,var(--guia-on-deep) 20%,transparent)} .guia-benefit{padding:20px 0;border-bottom:1px solid color-mix(in srgb,var(--guia-on-deep) 20%,transparent)} .guia-benefit h3{font-size:1.05rem;line-height:1.35;letter-spacing:-.015em} .guia-benefit p{font-size:.92rem;line-height:1.6;color:var(--guia-soft-deep);margin:8px 0 0;max-width:56ch} /* Sin el filete dorado de arriba: un borde recto de 4 px sobre esquinas redondeadas se pelea con ellas, y la tarjeta ya se separa de la banda verde con su fondo claro, su radio y su sombra. */ .guia-contact{padding:36px;background:var(--card);color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-4)} .guia-contact__title{font-size:clamp(1.8rem,2.8vw,2.5rem);line-height:1.07;letter-spacing:-.04em} .guia-contact .guia-text{font-size:.98rem} .guia-contact__email{display:inline-block;font-family:var(--fm);font-size:1rem;color:var(--green);text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere;margin:28px 0 24px;max-width:100%} .guia-contact>.guia-button{width:100%} .guia-contact__note{font-size:.78rem;line-height:1.6;text-align:center;color:var(--ink-soft);margin:16px 0 0} .guia-update{padding-block:80px 44px} .guia-update__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:80px;align-items:start} /* Superficie teñida en lugar de raíl lateral: el tema marca los bloques destacados con fondo (ver .modal .sum), no con una franja de color. */ .guia-deadline{padding:30px 32px;border:1px solid rgba(168,128,27,.30);border-radius:var(--r-md);background:rgba(168,128,27,.07)} .guia-deadline .guia-eyebrow{color:var(--ink-soft);margin-bottom:16px} .guia-deadline__title{font-family:var(--fm);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.22;letter-spacing:-.05em;max-width:16ch} .guia-deadline .guia-text{font-size:.95rem;margin-top:18px} .guia-publisher{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:22px 38px;margin-top:54px;padding-top:28px;position:relative;font-size:.84rem;color:var(--ink-soft)} .guia-publisher::before{content:"";position:absolute;top:0;left:28px;right:28px;border-top:1px solid var(--line)} .guia-publisher__name{margin:0} .guia-publisher__name .guia-eyebrow{display:block;font-size:.72rem;margin-bottom:5px} .guia-publisher__name strong{font-weight:600;color:var(--ink)} .guia-publisher__address{font-style:normal;line-height:1.65} .guia-publisher__phone{font-family:var(--fm);font-size:.9rem} .guia-digital{padding:54px 0;background:var(--green-10);border-top:1px solid var(--green-20)} .guia-digital__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center} .guia-digital .guia-heading{font-size:clamp(1.8rem,3.2vw,2.65rem);max-width:23ch} .guia-digital .guia-text{font-size:.98rem;margin-top:18px} .guia-digital__actions{display:flex;flex-direction:column;gap:12px;align-items:stretch} @keyframes guia-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @media(max-width:1040px){ .guia-hero__grid{gap:34px} .guia-hero__copy .guia-button{padding:13px 18px} .guia-edition{padding-inline:24px} .guia-fact{padding-inline:20px} .guia-contents__grid{gap:56px} .guia-advertise__grid{gap:40px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} .guia-contact{padding:28px} .guia-update__grid{gap:40px} } @media(max-width:900px){ .guia-hero{padding-top:42px} .guia-hero__grid{grid-template-columns:minmax(0,1fr);gap:36px} .guia-hero__copy{max-width:640px} .guia-title{font-size:clamp(3.6rem,10vw,5.6rem)} .guia-lead{max-width:52ch} .guia-edition{width:100%;max-width:540px;justify-self:center} .guia-facts__grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-block:12px} .guia-fact{padding:24px} .guia-fact:nth-child(odd){border-left:0;padding-left:0} .guia-fact:nth-child(n+3){border-top:1px solid var(--line)} .guia-fact__value--places{max-width:none} .guia-contents__grid{gap:36px} .guia-index__row{gap:14px} .guia-advertise__grid,.guia-update__grid{grid-template-columns:minmax(0,1fr);gap:36px} .guia-advertise__copy>.guia-heading{max-width:23ch} .guia-contact{max-width:580px;width:100%} .guia-deadline__title{max-width:none} .guia-digital__grid{grid-template-columns:minmax(0,1fr);gap:28px} .guia-digital__actions{flex-direction:row;flex-wrap:wrap} } @media(max-width:620px){ .guia-page .wrap{padding-inline:20px} .guia-hero{padding-block:34px 36px} .guia-eyebrow{font-size:.72rem;margin-bottom:16px} .guia-title{font-size:clamp(3.2rem,14.4vw,5.2rem)} .guia-hero__claim{margin-top:22px} .guia-lead{font-size:1rem} .guia-actions{gap:14px;margin-top:24px} .guia-hero__copy .guia-button{width:100%;padding-block:15px} .guia-edition{padding:20px} .guia-edition__stage{padding:32px 18px 38px} .guia-book{width:min(100%,240px)} .guia-edition__caption{gap:16px;font-size:.76rem} .guia-fact{padding:22px 0 22px 18px} .guia-fact__value{font-size:2.2rem} .guia-fact__value--places{font-size:1.4rem;max-width:11ch} .guia-fact__label{font-size:.72rem} .guia-fact__detail{font-size:.76rem;padding-right:12px} .guia-contents,.guia-advertise,.guia-update{padding-block:52px} .guia-contents__grid{grid-template-columns:minmax(0,1fr);gap:32px} .guia-index__row{gap:18px;padding-block:15px} .guia-index__name{font-size:1.5rem} .guia-contact{padding:28px 24px} .guia-contact__email{font-size:.93rem} .guia-update .guia-button{width:100%} .guia-deadline{padding:26px 24px} .guia-publisher{align-items:flex-start;flex-direction:column;gap:18px;margin-top:38px;padding-top:26px} .guia-publisher::before{left:20px;right:20px} .guia-digital{padding-block:42px} .guia-digital__actions{flex-direction:column} } @media(prefers-reduced-motion:reduce){ .guia-hero__copy,.guia-edition{animation:none;opacity:1;transform:none} .guia-page .btn{transition:none} .guia-page .btn:hover,.guia-page .btn:active{transform:none} } /* Suelo de legibilidad en móvil: mono en versalitas con tracking por debajo de 11px no se lee. Cierra lo que faltaba de la banda de cifras. */ @media(max-width:620px){ .guia-edition__label,.guia-edition__format{font-size:.72rem} } /* ===================== DESTACADOS: HUECO A LA VENTA ===================== */ /* Si no hay tres clientes de pago para llenar la fila, el hueco ofrece el plan en lugar de rellenarse con fichas que no lo pagan. Mismo lenguaje que el espacio publicitario libre (.ad-free): borde discontinuo sobre verde claro. */ .lc-cta{align-items:flex-start;justify-content:center;gap:10px;padding:28px 24px;min-height:260px; border:1.5px dashed var(--green-20);background:var(--green-10);box-shadow:none;color:var(--ink);text-decoration:none} .lc-cta:hover{border-color:var(--green-br);box-shadow:var(--sh-2);text-decoration:none} .lc-cta__tag{font-family:var(--fm);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--green)} .lc-cta b{font-family:var(--fd);font-size:1.3rem;font-weight:700;letter-spacing:-.015em;line-height:1.2} .lc-cta__txt{font-size:.9rem;line-height:1.55;color:var(--soft);max-width:30ch} .lc-cta .btn{margin-top:8px} .lc-cta:focus-visible{outline:2px solid var(--green);outline-offset:3px;box-shadow:var(--ring)} /* ===================== COMPLEMENTOS (PLANES) ===================== */ /* Pagos únicos bajo la tabla de niveles. Misma familia que .tier, un escalón por debajo: radio medio, sin elevación ni sello, botón fantasma. Solo tokens del :root, así que los dos bloques oscuros los recolorean sin reglas propias. ghg_billing_form() devuelve