/* Página: solo la tarjeta, centrada. Fondo blanco en modo claro y negro en modo oscuro */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
html{background:#fff}
html[data-tema="oscuro"]{background:#000}
body{min-height:100dvh;display:grid;place-items:center;padding:24px 12px;font-family:"Geist",Arial,sans-serif;-webkit-font-smoothing:antialiased}
p{margin:0}
button{font:inherit;cursor:pointer}
.visita{filter:drop-shadow(0 20px 34px rgba(0,0,0,.18)) drop-shadow(0 2px 5px rgba(0,0,0,.12))}
html[data-tema="oscuro"] .visita{filter:none}
.visita .cerrar{display:none!important}
/* Tarjeta de visita de Dani (portada y panel del dueño) */
.visita .cerrar{position:absolute;border-radius:50%;line-height:1;display:grid;place-items:center;z-index:3;cursor:pointer}
/* Tarjeta de visita de Dani: misma identidad que danigarciawd.es (negro, Geist, IBM Plex Mono, grano) */
@font-face{font-family:"Geist";font-weight:100 900;font-display:swap;src:url("/fonts/Geist-100-900-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url("/fonts/IBMPlexMono-400-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url("/fonts/IBMPlexMono-500-latin.woff2") format("woff2")}
.logo-dani{display:inline-block;width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:url("/img/logo-dani.png") center/contain no-repeat;mask:url("/img/logo-dani.png") center/contain no-repeat}
.visita{--dg-bg:#050505;--dg-fg:#e6e6e6;--dg-fg2:#8a8a8a;--dg-line:#262626;--dg-doblez:#2b2b2b;--dg-qr:#e6e6e6;color:var(--dg-fg);width:min(500px,94vw);aspect-ratio:85/47;perspective:1200px}
.visita__giro{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.2,.4,1)}
.visita.girada .visita__giro{transform:rotateY(180deg)}
/* El 3D solo mientras gira: en reposo la tarjeta es plana y el texto se ve nítido en ordenador */
.visita:not(.girando){perspective:none}
.visita:not(.girando) .visita__giro{transform:none;transform-style:flat}
.visita:not(.girando).girada .cara:not(.cara--atras),.visita:not(.girando):not(.girada) .cara--atras{visibility:hidden}
.visita:not(.girando).girada .cara--atras{transform:none}
.cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--dg-bg);color:var(--dg-fg);border-radius:8px;padding:16px 18px 14px;clip-path:polygon(0 0,100% 0,100% calc(100% - 38px),calc(100% - 38px) 100%,0 100%);display:flex;flex-direction:column;overflow:hidden;font-family:"Geist",Arial,sans-serif}
/* grano de película, como en el portfolio */
.cara::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.cara--atras{transform:rotateY(180deg);flex-direction:row;align-items:center;justify-content:center;gap:clamp(18px,6vw,34px)}
.mono{font:500 9.5px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dg-fg2);margin:0}
.visita__top{display:flex;align-items:center;gap:10px;font-size:22px}
.visita__nom{font:300 clamp(24px,7.4vw,30px)/1.2 "Geist",Arial,sans-serif;letter-spacing:-.01em;text-transform:uppercase;margin:auto 0 2px;color:var(--dg-fg)}
.visita__datos{margin-top:10px;border-top:1px solid var(--dg-line)}
.visita__fila{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 30px 5px 0;border-bottom:1px solid var(--dg-line)}
.visita__fila:last-child{border-bottom:0}
.visita__fila a{font:500 10px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--dg-fg);text-decoration:none;white-space:nowrap}
.visita__fila a:hover{text-decoration:underline;text-underline-offset:3px}
.visita .cerrar{top:10px;right:10px;width:28px;height:28px;background:transparent;border:1px solid color-mix(in srgb,var(--dg-fg) 28%,transparent);color:var(--dg-fg);font-size:15px}
.visita .cerrar:hover{background:color-mix(in srgb,var(--dg-fg) 10%,transparent)}
.doblez{position:absolute;right:0;bottom:0;width:38px;height:38px;border:0;padding:0;background:linear-gradient(315deg,transparent 50%,var(--dg-doblez) 50%);border-radius:0 0 8px 0;z-index:2;filter:drop-shadow(-2px -2px 3px rgba(0,0,0,.3));transition:width .25s,height .25s}
.doblez:hover{width:46px;height:46px}
.doblez::after{content:"↻";position:absolute;left:5px;top:3px;font:500 12px/1 "IBM Plex Mono",monospace;color:#8a8a8a}
.visita__qr{flex:none;width:clamp(104px,30vw,150px);position:relative;z-index:1}
.visita__qr svg.tel{width:100%;height:auto;display:block}
.visita__qr .qrc{position:absolute;left:16.1%;top:16.15%;width:67.9%;aspect-ratio:1;background:var(--dg-qr);border-radius:3px;display:grid;place-items:center}
.visita__qr .qrc img,.visita__qr .qrc canvas{width:89%!important;height:auto!important}
.visita__nota{position:relative;z-index:1;display:grid;gap:10px}
.visita__nota b{font:300 clamp(26px,8vw,40px)/1.2 "Geist",Arial,sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:var(--dg-fg)}

/* En modo oscuro, mi tarjeta pasa a su versión clara (papel) para que destaque */
html[data-tema="oscuro"] .visita{--dg-bg:#f2f0eb;--dg-fg:#111;--dg-fg2:#6f6f6f;--dg-line:#d8d4cc;--dg-doblez:#d9d4ca;--dg-qr:#fff}
html[data-tema="oscuro"] .visita .cara::before{mix-blend-mode:multiply;opacity:.12}
html[data-tema="oscuro"] .visita__qr .qrc{box-shadow:0 0 0 1px #d8d4cc}
/* Tarjeta de visita más ancha con mi retrato en pixel art a la izquierda */
.cara--frente{flex-direction:row;gap:clamp(12px,3.5vw,18px);align-items:stretch}
.retrato{flex:none;height:100%;aspect-ratio:1;background:currentColor;-webkit-mask:url("/img/dani-pixel.svg") center/contain no-repeat;mask:url("/img/dani-pixel.svg") center/contain no-repeat;position:relative;z-index:1}
.visita__info{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;z-index:1}
.visita.quieto .visita__giro{transition:none!important}
.visita__top{padding-right:34px}
@media (max-width:440px){
  .cara--frente{padding:14px 14px 12px;gap:12px}
  .retrato{height:auto;width:34%;align-self:center}
  .cara--frente .mono{letter-spacing:.08em;font-size:8.5px}
  .cara--frente .visita__nom{font-size:21px}
  .visita__top{font-size:18px;gap:7px}
  .visita__datos{margin-top:6px}
  .visita__fila{padding:4px 22px 4px 0}
  .visita__fila a{font-size:8.5px;letter-spacing:.03em}
}
/* Modo claro: retrato invertido (fondo claro y los trazos de la cara en el color de la tarjeta) */
html:not([data-tema="oscuro"]) .retrato{background:var(--dg-fg);-webkit-mask:none;mask:none;border-radius:2px}
html:not([data-tema="oscuro"]) .retrato::before{content:"";position:absolute;inset:0;background:var(--dg-bg);-webkit-mask:url("/img/dani-pixel.svg") center/contain no-repeat;mask:url("/img/dani-pixel.svg") center/contain no-repeat}