/* Giardina.ar — hoja de estilos compartida (v4) Extraída del sitio SPA original. Los valores de :root corresponden al estado "desktop ancho + modo oscuro" (el que se ve por defecto en una pantalla grande); los @container/@media de más abajo ajustan tablet y mobile, igual que en el sitio original. El tema (oscuro/claro) se resuelve con el atributo [data-theme] en , sin JavaScript de layout. */ :root{ --c-black:#000000; --c-white:#FFFFFF; --c-lime:#E6EC00; --c-bg:var(--c-black); --c-fg:var(--c-white); --c-accent:var(--c-lime); --c-on-accent:var(--c-black); --c-accent-txt:var(--c-lime); --ff-logo:"Kumbh Sans", sans-serif; --ff-title:"Barlow Condensed", sans-serif; --ff-text:"Inter", sans-serif; --fw-logo:600; --fw-title:600; --fw-text:400; --fw-text-light:300; --fw-text-mid:500; --fs-h1:78px; --fs-h2:76px; --fs-h3:30px; --fs-lead:20px; --fs-body:16px; --fs-meta:12px; --fs-tick:26px; --fs-num:13px; --lh-title:0.86; --lh-h3:1.02; --lh-text:1.55; --ls-title:-0.01em; --ls-meta:0.2em; --ls-logo:0.02em; --sp-1:6px; --sp-2:12px; --sp-3:20px; --sp-4:32px; --sp-5:56px; --sp-6:88px; --sp-7:120px; --sp-page:56px; --sp-sec:96px; --hero-pt:80px; --nav-h:82px; --logo-h:20px; --nav-gap:20px; --pill-pad:5px 12px; --btn-pad:8px 14px; --fs-nav:12px; --rule:1px; --mark:12px; --mark-lg:22px; --pill:999px; --hero-dir:row; --hero-gap:64px; --photo-ar:0.82; --panel-dir:row; --app-h:100dvh; --app-of:hidden; --label-wrap:nowrap; --menu-icon:24px; --photo-zoom:1; --photo-zoom-y:50%; --photo-col-bg:transparent; --photo-col-ar:auto; --photo-col-max:none; --home-wrap:nowrap; --col-l-w:30%; --col-c-w:40%; --col-r-w:30%; --home-pt:64px; --photo-min:0px; --photo-cx:20cqw; --photo-left:30cqw; --inline-nav:none; --menu-btn:flex; --lang-active-bg:transparent; --lang-alt-display:flex; --lang-div-display:block; --mob-div-display:none; --side-pos:sticky; --side-maxh:none; --side-ar:auto; --side-of:visible; --side-flex:0.7 1 0; --side-scroll:visible; --side-scrollpad:var(--sp-3); --side-pb:var(--sp-5); --contact-pad:20px var(--sp-page) 24px; --contact-maxh:none; --contact-left:0.7 1 0; --contact-right:1.3 1 0; --contact-cols:1fr 1fr; --contact-div:var(--rule) solid color-mix(in srgb, var(--c-fg) 16%, transparent); --contact-divpad:32px; --pill-h:34px; --seg-h:26px; --seg-pad:0 11px; --hero-box:transparent; --hero-word:var(--c-lime); --isl-bg:#000000; --isl-fg:#FFFFFF; --isl-accent-txt:var(--c-lime); --isl-surface:#070707; --pg-photomask-d:linear-gradient(to top, transparent 0%, rgba(0,0,0,0.6) 14%, #000 42%), linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to left, transparent 0%, #000 18%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 5%, #000 15%); --pg-mobmask-d:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 9%, #000 24%), linear-gradient(to top, transparent 0%, #000 12%); --pg-photomask:var(--pg-photomask-d); --pg-mobmask:var(--pg-mobmask-d); --pg-aside:flex; --pg-label:none; --pg-mobphoto:none; --pg-asidecta:flex; --pg-endcta:none; --fade-c:0,0,0; --ahora-mt:0px; --ahora-mb:0px; --ahora-self:auto; --mexp-flex:0 0 auto; --mexp-ws:nowrap; --mexp-ls:var(--ls-meta); --mexp-just:flex-start; --mexp-fs:var(--fs-meta); --mexp-w:auto; --tabbar:none; --tabbar-h:0px; --hdr-ctl:flex; --menu-close:flex; --tr:220ms ease; --photo-mask:linear-gradient(to top, transparent 0%, rgba(0,0,0,0.6) 14%, #000 42%), linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to left, transparent 0%, #000 18%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.28) 9%, #000 26%); --photo-bg:url('/assets/franco-portrait.jpg'); --photo-img:none; --photo-fade:block; --shell-maxw:none; --home-gap:var(--sp-5); --home-rowgap:0px; --home-pr:var(--sp-4); --label-wrap:nowrap; --perfil-of:hidden; --fs-hero:70px; --fs-perfil:24px; --col-pb:104px; --perfil-pt:var(--home-pt); --band-b:var(--sp-5); --band-pos:absolute; --band-dir:row; --band-ai:center; --band-w:auto; --band-pad:0px; --band-gap:var(--sp-3); --band-dot:38px; --perfil-head-dir:column; --perfil-head-ai:flex-start; --perfil-head-gap:var(--sp-3); --perfil-dot:44px; } html[data-theme="light"]{ --c-bg:var(--c-white); --c-fg:var(--c-black); --c-accent-txt:var(--c-black); --hero-box:var(--c-black); --isl-bg:#FFFFFF; --isl-fg:#000000; --isl-accent-txt:#000000; --isl-surface:#F4F4F1; --pg-photomask:none; --pg-mobmask:none; --photo-mask:none; --fade-c:255,255,255; --photo-fade:none; } *{box-sizing:border-box;} html,body{margin:0;padding:0;height:100%;overscroll-behavior:none;background:var(--c-bg);} html{scrollbar-width:none;scroll-behavior:smooth;} html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none;} a{color:var(--c-accent-txt);text-decoration:none;} a:hover{color:var(--c-fg);} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;} input,textarea{font:inherit;color:inherit;} div[data-page]{container-type:inline-size;container-name:page;background:var(--c-bg);color:var(--c-fg);font-family:var(--ff-text);font-weight:var(--fw-text);display:flex;flex-direction:column;min-height:100dvh;} section[data-flow]{overflow:visible;animation:gd-fade 340ms cubic-bezier(0.33,0,0.2,1) both;} main{animation:gd-fade 340ms cubic-bezier(0.33,0,0.2,1) both;min-height:0;} div[data-nobar]{scrollbar-width:none;} div[data-nobar]::-webkit-scrollbar{width:0;height:0;display:none;} div[data-ahora-list],div[data-scroll]{scrollbar-width:thin;scrollbar-color:var(--c-accent-txt) transparent;} div[data-ahora-list]::-webkit-scrollbar,div[data-scroll]::-webkit-scrollbar{width:6px;} div[data-ahora-list]::-webkit-scrollbar-track,div[data-scroll]::-webkit-scrollbar-track{background:transparent;} div[data-ahora-list]::-webkit-scrollbar-thumb,div[data-scroll]::-webkit-scrollbar-thumb{background:var(--c-accent);border-radius:0;} nav[data-tabbar]{--nb-bg:#FFFFFF;--nb-fg:#000000;--nb-br:rgba(0,0,0,0.14);--nb-sh:0 12px 34px rgba(0,0,0,0.24);} nav[data-tabbar][data-bar="dark"]{--nb-bg:#0B0B0B;--nb-fg:#FFFFFF;--nb-br:rgba(255,255,255,0.18);--nb-sh:0 12px 34px rgba(0,0,0,0.5);} div[data-page][data-theme="light"] img[data-ph="dark"]{display:none !important;} div[data-page][data-theme="dark"] img[data-ph="light"]{display:none !important;} @container page (min-width:821px){ div[data-page][data-theme="light"] > *{--photo-fade:none;--photo-col-bg:transparent;} div[data-page] div[data-band] span[data-band-label]{max-width:calc(var(--photo-left) - var(--sp-page) - var(--band-dot) - var(--sp-3) - 28px);white-space:normal !important;line-height:1.4;} [data-panel-dialog="ahora"]{top:calc(var(--nav-h) + 20px);} } @container page (max-width:1180px){ div[data-page] > *{--shell-maxw:none;--photo-zoom:1;--photo-zoom-y:50%;--fs-h1:78px;--fs-h2:48px;--fs-h3:26px;--fs-lead:17px;--fs-body:15px;--fs-tick:22px;--sp-page:32px;--sp-sec:72px;--nav-h:74px;--logo-h:18px;--nav-gap:16px;--fs-nav:11px;--app-h:100dvh;--label-wrap:normal;--home-wrap:nowrap;--col-l-w:35%;--col-c-w:38%;--col-r-w:27%;--home-pt:40px;--photo-min:0px;--photo-cx:15cqw;--photo-left:35cqw;--fs-hero:54px;--fs-perfil:21px;--home-pr:var(--sp-2);--label-wrap:nowrap;--perfil-of:hidden;--home-gap:var(--sp-4);--home-rowgap:0px;--col-pb:92px;--perfil-pt:var(--home-pt);--band-b:var(--sp-4);--band-pos:absolute;--band-dir:row;--band-ai:center;--band-w:auto;--band-pad:0px;--band-gap:var(--sp-3);--band-dot:34px;--ahora-self:auto;--perfil-head-dir:column;--perfil-head-ai:flex-start;--perfil-head-gap:var(--sp-3);--perfil-dot:40px;--photo-col-ar:auto;--photo-col-max:none;--photo-mask:linear-gradient(to top, transparent 0%, rgba(0,0,0,0.6) 14%, #000 42%), linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to left, transparent 0%, #000 18%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.28) 9%, #000 26%);--photo-bg:var(--photo-src);--photo-img:var(--photo-img-d);--photo-fade:var(--photo-fade-d);--photo-col-bg:var(--photo-colbg-d);--panel-dir:column;--pg-asidecta:none;--pg-endcta:flex;--photo-ar:1.6;--side-pos:static;--side-maxh:none;--contact-maxh:none;--side-ar:var(--photo-ar);--side-of:visible;--side-flex:0 0 auto;--side-scroll:visible;--side-scrollpad:0px;--side-pb:var(--sp-6);--contact-pad:var(--sp-4) var(--sp-page);--contact-left:0 0 auto;--contact-right:0 0 auto;--contact-cols:1fr;--contact-div:0;--contact-divpad:0px;--inline-nav:none;--menu-btn:flex;--pill-h:32px;--seg-h:24px;--lp-top:12px;--lp-left:12px;--lp-right:12px;--lp-bottom:12px;--lp-w:auto;--lp-radius:16px;} div[data-page][data-theme="light"] > *{--photo-mask:none;--photo-fade:none;--photo-col-bg:transparent;} } @container page (min-width:821px) and (max-width:1180px){ div[data-home] > div[aria-hidden="true"]:first-child{left:54cqw !important;} } @container page (max-width:820px){ div[data-page] > *{--shell-maxw:none;--photo-zoom:1.2;--photo-zoom-y:46%;--fs-h1:60px;--fs-h2:38px;--fs-h3:23px;--fs-lead:18px;--fs-body:16px;--fs-tick:18px;--sp-page:28px;--sp-sec:56px;--nav-h:64px;--logo-h:16px;--nav-gap:10px;--fs-nav:10px;--pill-pad:5px 9px;--btn-pad:7px 10px;--app-h:auto;--app-of:visible;--home-wrap:wrap;--col-l-w:100%;--col-c-w:100%;--col-r-w:100%;--home-pt:24px;--photo-min:0px;--fs-hero:76px;--fs-perfil:22px;--home-pr:var(--sp-page);--label-wrap:normal;--perfil-of:visible;--home-gap:var(--sp-3);--home-rowgap:var(--sp-2);--col-pb:8px;--perfil-pt:var(--sp-3);--band-b:auto;--band-pos:static;--band-dir:column;--band-ai:stretch;--band-w:100%;--band-pad:20px var(--sp-page) 0;--band-gap:var(--sp-2);--band-dot:28px;--ahora-self:flex-start;--ahora-mt:16px;--ahora-mb:43px;--perfil-head-dir:row;--perfil-head-ai:center;--perfil-head-gap:var(--sp-2);--perfil-dot:28px;--photo-col-ar:1.45;--photo-col-max:none;--photo-mask:linear-gradient(to top, transparent 0%, #000 7%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.75) 4%, #000 11%);--photo-bg:none;--photo-img:flex;--photo-fade:none;--photo-col-bg:transparent;--pill-h:34px;--seg-h:26px;--seg-pad:0 8px;--pg-aside:none;--pg-label:flex;--pg-mobphoto:flex;--lp-top:8px;--lp-left:8px;--lp-right:8px;--lp-bottom:8px;--lp-w:auto;--lp-radius:14px;--photo-ar:1;} } @container page (max-width:820px){ div[data-page][data-theme="light"] > *{--photo-mask:none;} } @container page (max-width:560px){ div[data-page] > *{--lang-alt-display:none;--lang-div-display:none;--mob-div-display:block;--sp-page:20px;--fs-hero:76px;--band-dot:24px;--perfil-dot:24px;} } @media (max-width:820px){ div[data-page]{--hdr-ctl:none;--tabbar-h:68px;--ahora-mt:16px;--ahora-mb:43px;--ahora-self:flex-start !important;} nav[data-tabbar]{--tabbar:flex !important;--tabbar-h:68px !important;} div[data-menu-overlay]{--menu-close:none !important;--sp-page:28px !important;--tabbar-h:68px !important;--mexp-flex:0 0 100% !important;--mexp-ls:0.02em !important;--mexp-fs:min(var(--fs-meta), 3vw) !important;--mexp-just:flex-start !important;--mexp-w:100% !important;} footer button[data-cta-exp]{flex:1 1 100% !important;display:block !important;text-align:center !important;font-size:min(10px, 2.6vw) !important;} footer button[data-cta-exp] > span:first-child{display:inline-block !important;vertical-align:middle;margin:0 8px 2px 0;} footer button[data-cta-exp] > span:last-child{display:inline !important;white-space:nowrap !important;} [data-panel-dialog="ahora"],[data-panel-dialog="experiencia"],[data-panel-dialog="perfil"]{left:12px !important;right:12px !important;top:16px !important;bottom:calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)) !important;width:auto !important;max-width:none !important;max-height:none !important;transform:none !important;border-radius:16px !important;} span[data-ahora-note]{font-size:14px !important;} div[data-menu-social]{margin-bottom:15px;} footer div[data-legales-row]{flex:1 1 100% !important;justify-content:center !important;} footer button[data-inicio-footer]{display:block !important;} footer span[data-giardina-copy]{display:none !important;} footer span[data-giardina-mobile]{display:block !important;flex:1 1 100% !important;text-align:center;} } @keyframes gd-tfade-a{from{opacity:0.35;}to{opacity:1;}} @keyframes gd-tfade-b{from{opacity:0.35;}to{opacity:1;}} div[data-home] > *{animation:gd-rise 620ms cubic-bezier(0.22,1,0.36,1) both;} div[data-home] > *:nth-child(1),div[data-home] > *:nth-child(2){animation:gd-fade 900ms cubic-bezier(0.33,0,0.2,1) both;} div[data-home] > *:nth-child(4){animation-delay:90ms;} div[data-home] > *:nth-child(5){animation-delay:170ms;} div[data-home] > *:nth-child(6){animation-delay:250ms;} div[data-home] > *:nth-child(3) > div > *{animation:gd-rise 620ms cubic-bezier(0.22,1,0.36,1) both;} div[data-home] > *:nth-child(3) > div > *:nth-child(2){animation-delay:70ms;} div[data-home] > *:nth-child(3) > div > *:nth-child(3){animation-delay:130ms;} div[data-home] > *:nth-child(3) > div > *:nth-child(4){animation-delay:190ms;} div[data-home] > *:nth-child(5) > div > *{animation:gd-rise 620ms cubic-bezier(0.22,1,0.36,1) both;animation-delay:210ms;} @media (prefers-reduced-motion: reduce){div[data-home] > *,div[data-home] > * > div > *,section[data-flow],main{animation:none !important;}div[data-page],div[data-page] *{transition-duration:1ms !important;}} @keyframes gd-tick{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes gd-fade{from{opacity:0;}to{opacity:1;}} @keyframes gd-slide{from{transform:translateX(101%);}to{transform:translateX(0);}} @keyframes gd-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}} @keyframes gd-pulse-dot{0%,100%{opacity:1;}50%{opacity:0.4;}} [data-invalid="1"]{border-color:#FF6B5A !important;} nav[data-legal] button[data-key]{color:var(--c-fg);} nav[data-legal="priv"] button[data-key="priv"],nav[data-legal="cookies"] button[data-key="cookies"],nav[data-legal="proteccion"] button[data-key="proteccion"],nav[data-legal="autorizacion"] button[data-key="autorizacion"],nav[data-legal="terminos"] button[data-key="terminos"]{color:var(--c-accent-txt);} /* --- Estado (antes resuelto por JS): tema, menú, paneles --- */ header{position:static;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--nav-gap);height:var(--nav-h);flex:0 0 auto;min-width:0;padding:0 var(--sp-page);background:var(--c-bg);} div[data-page]:not([data-home-route]) header{position:sticky;} div[data-shell]{display:flex;flex-direction:column;width:100%;max-width:var(--shell-maxw);margin:0 auto;min-height:var(--app-h);overflow-x:clip;} div[data-page][data-home-route] div[data-shell]{min-height:var(--app-h);} /* La foto de fondo de Inicio usa la misma técnica (imagen de fondo a página completa + degradado) en los dos temas, para que el tamaño/encuadre de la cara nunca cambie — solo cambia el color del degradado de los bordes. */ /* Inicio en modo oscuro: sin cambios, sigue usando [data-photo-illusion] con degradado (la técnica original, intacta). Inicio en modo claro: usa el MISMO elemento [data-photo-illusion], con el mismo height:112% (mismo alto/zoom de cara que el oscuro, no se toca), pero más angosto (aspect-ratio reducido) para que recorte más a los costados. Sin máscara, sin degradado: borde duro, límite real lo pone el overflow:clip de [data-home]. [data-photo-fade-overlay] y [data-photo-col] quedan ocultos en claro (ver --photo-fade/--photo-img arriba). */ div[data-page][data-home-route][data-theme="light"] [data-photo-illusion]{ width:var(--col-c-w) !important; aspect-ratio:auto !important; mask-image:none !important; -webkit-mask-image:none !important; } div[data-page]:not([data-home-route]) div[data-shell]{min-height:auto;} [data-menu-overlay]{display:none;} [data-menu-overlay][data-open="1"]{display:flex;} [data-legal-panel][data-open="0"]{display:none;} [data-legal-panel][data-open="1"]{display:block;} /* Header: idioma y tema (antes resuelto con estilos inline calculados por JS) */ .lang-pill a{color:color-mix(in srgb, var(--c-fg) 45%, transparent);transition:background var(--tr),color var(--tr);} html[data-theme="dark"] .lang-pill a{color:var(--c-fg);} .lang-pill a[data-lang-active]{background:var(--c-accent);color:var(--c-on-accent) !important;} [data-set-dark]{display:flex;color:color-mix(in srgb, var(--c-fg) 45%, transparent);transition:background var(--tr),color var(--tr);} html[data-theme="dark"] [data-set-dark]{color:var(--c-fg);} [data-set-light]{display:var(--lang-alt-display);color:color-mix(in srgb, var(--c-fg) 45%, transparent);transition:background var(--tr),color var(--tr);} html[data-theme="light"] [data-set-dark]{display:var(--lang-alt-display);} html[data-theme="light"] [data-set-light]{display:flex;} html[data-theme="dark"] [data-set-dark],html[data-theme="light"] [data-set-light]{background:var(--c-accent);color:var(--c-on-accent);border-radius:var(--pill);} [data-set-dark] svg{fill:none;} html[data-theme="dark"] [data-set-dark] svg{fill:var(--c-on-accent);} /* Panel "Ahora": abierto/cerrado */ [data-panel][data-open="0"]{display:none;} [data-panel][data-open="1"]{display:block;} [data-perfil-panel][data-open="0"]{display:none;} [data-perfil-panel][data-open="1"]{display:block;} /* Utilidades de :hover (antes resueltas con el atributo style-hover del framework) */ .hov-accent{transition:color var(--tr);} .hov-accent:hover{color:var(--c-accent-txt);} .hov-border-accent{transition:color var(--tr),border-color var(--tr);} .hov-border-accent:hover{color:var(--c-accent-txt);border-color:var(--c-accent-txt);} .hov-translate{transition:transform var(--tr);} .hov-translate:hover{transform:translateX(6px);} .hov-ahora-cta{transition:background var(--tr);} .hov-ahora-cta:hover{background:#151515;} .hov-underline{transition:color var(--tr),text-decoration-color var(--tr);} .hov-underline:hover{color:var(--c-accent-txt);text-decoration-color:var(--c-accent-txt);} .hov-soft-bg{transition:background var(--tr);} .hov-soft-bg:hover{background:color-mix(in srgb, var(--c-fg) 7%, transparent);} .hov-border-only{transition:border-color var(--tr);} .hov-border-only:hover{border-color:var(--c-accent-txt);} /* Tabbar móvil: iconos según estado */ [data-menu-open-btn] [data-icon="x"]{display:none !important;} [data-menu-open-btn][aria-expanded="true"] [data-icon="hb"]{display:none !important;} [data-menu-open-btn][aria-expanded="true"] [data-icon="x"]{display:block !important;} /* Ícono sol/luna y etiqueta Claro/Oscuro: los dos estados están siempre presentes (superpuestos) y se cruzan con un fundido de opacidad en vez de aparecer/desaparecer de golpe con display. Duración propia (más lenta que el --tr general de 220ms que usan los hovers del sitio), para que el fundido se sienta suave sin afectar nada más. */ [data-tabbar-icon-sun],[data-tabbar-icon-moon],[data-tabbar-theme-label-dark],[data-tabbar-theme-label-light]{transition:opacity 450ms ease-in-out;} [data-tabbar-icon-moon],[data-tabbar-theme-label-light]{opacity:0;} html[data-theme="light"] [data-tabbar-icon-sun],html[data-theme="light"] [data-tabbar-theme-label-dark]{opacity:0;} html[data-theme="light"] [data-tabbar-icon-moon],html[data-theme="light"] [data-tabbar-theme-label-light]{opacity:1;} nav[data-tabbar] button[data-toggle-lang],nav[data-tabbar] button[data-toggle-theme]{transition:opacity var(--tr);} nav[data-tabbar] button[data-toggle-lang]:active,nav[data-tabbar] button[data-toggle-theme]:active{opacity:0.55;}