/* Web50 · un servicio de Titankin
   Hoja de estilos propia de /es/web50, /en/web50 y /ro/web50.
   Usa las mismas letras que el resto de titankin.com (assets/fonts), así el navegador las descarga una sola vez.
   Independiente de assets/css/site.css: no cargar las dos en la misma página
   (comparten nombres de clase como .ficha, .etiqueta o .marca).
   Paleta y letras de Titankin: papel claro, tinta azul-negra, bronce en dosis mínimas. */

/* ——— Letras (licencia SIL OFL), compartidas con titankin.com. Dos tramos por familia: básico y extendido (rumano: ă ș ț) ——— */
@font-face{font-family:"Caslon Display";src:url("../fonts/caslon-display.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caslon Display";src:url("../fonts/caslon-display-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caslon Text";src:url("../fonts/caslon-text-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caslon Text";src:url("../fonts/caslon-text-italic-ext.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-ext.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --cal:#F4F3EF;
  --papel:#FBFAF8;
  --piedra:#E7E5DF;
  --tinta:#13161B;
  --grafito:#5A5E66;
  --niebla:#9A9CA0;
  --bronce:#8C6B43;
  --bronce-claro:#B79466;
  --linea:rgba(19,22,27,.14);
  --linea-clara:rgba(244,243,239,.16);

  --serif:"Caslon Display","Libre Caslon Display","Big Caslon","Times New Roman",serif;
  --cursiva:"Caslon Text","Libre Caslon Text",Georgia,serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-hero:clamp(2.9rem,6.2vw,6.4rem);
  --t-h2:clamp(2.3rem,4.8vw,4.9rem);
  --t-h3:clamp(1.45rem,2.1vw,2rem);
  --t-lead:clamp(1.12rem,1.45vw,1.4rem);
  --t-body:clamp(1rem,1.05vw,1.0625rem);
  --t-small:.875rem;
  --t-label:.75rem;

  --lado:clamp(20px,4.2vw,72px);
  --hueco:clamp(16px,2vw,28px);
  --sec:clamp(88px,11vw,168px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cal);color:var(--tinta);font-family:var(--sans);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p{margin:0;font-weight:400}
a{color:inherit}
svg{display:block;flex:none}
::selection{background:var(--tinta);color:var(--cal)}
:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}
section[id]{scroll-margin-top:80px}
.saltar{position:fixed;left:var(--lado);top:-60px;z-index:200;background:var(--tinta);color:var(--cal);padding:10px 16px;text-decoration:none;font-size:var(--t-small)}
.saltar:focus{top:12px}

/* ——— Base ——— */
.marco{max-width:1360px;margin:0 auto;padding-inline:var(--lado)}
.sec{padding-block:var(--sec)}
.etiqueta{font-family:var(--sans);font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grafito)}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.015em}
em{font-family:var(--cursiva);font-style:italic;font-weight:400}
.h2{font-size:var(--t-h2);line-height:1.02}
.bronce{color:var(--bronce)}
.cabecera{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(48px,6vw,88px);max-width:52rem}

/* ——— Botones ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:16px 26px;border:1px solid var(--tinta);font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:.01em;line-height:1.2;text-decoration:none;text-align:center;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn svg{transition:transform .5s var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
.btn--tinta{background:var(--tinta);color:var(--cal)}
.btn--tinta:hover{background:#2A2E36;border-color:#2A2E36}
.btn--linea{background:transparent;color:var(--tinta)}
.btn--linea:hover{background:var(--tinta);color:var(--cal)}

/* ——— Cabecera ——— */
.cab{position:sticky;top:0;z-index:30;background:rgba(244,243,239,.88);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);border-bottom:1px solid var(--linea)}
.cab .marco{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.marca{font-family:var(--serif);font-size:1.6rem;line-height:1;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.marca em{color:var(--bronce);padding-left:.04em}
.marca__col{display:inline-block;width:.8em;height:.8em;fill:currentColor;vertical-align:-.05em;margin-right:.4em}
.cab__der{display:flex;align-items:center;gap:28px}
.cab__acciones{display:flex;align-items:center;gap:28px}
.cab__tel{font-size:var(--t-small);font-weight:500;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.cab__tel:hover{text-decoration:underline;text-underline-offset:4px}
.cab .btn{min-height:44px;padding:10px 18px;font-size:.9rem}
.idiomas{display:flex;align-items:center}
.idiomas a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:44px;padding:0 4px;font-size:.75rem;font-weight:500;letter-spacing:.06em;text-decoration:none;color:var(--grafito);transition:color .3s var(--ease)}
.idiomas a:hover{color:var(--tinta)}
.idiomas a[aria-current]{color:var(--tinta);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* ——— Héroe ——— */
.heroe{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hueco);row-gap:64px;align-items:center;padding-block:clamp(48px,8vw,120px) var(--sec)}
.heroe__texto{grid-column:1 / span 7;display:flex;flex-direction:column;gap:28px}
.heroe__ficha{grid-column:9 / span 4}
.h1{font-size:var(--t-hero);line-height:.98;letter-spacing:-.02em}
.h1 em{display:block}
.entrada{font-size:var(--t-lead);line-height:1.5;color:var(--grafito);max-width:34em}
.entrada strong{color:var(--tinta);font-weight:500}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.datos{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:10px 32px;font-size:var(--t-small);color:var(--grafito)}
.datos li{display:flex;align-items:center;gap:10px}
/* Saludo para quien llega desde la web de un cliente (?desde=…) */
.desde{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;max-width:100%;padding:9px 16px;border:1px solid var(--linea);border-radius:999px;background:var(--papel);font-size:var(--t-small);line-height:1.4;color:var(--tinta)}
.desde::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--bronce)}
.desde[hidden]{display:none}
.datos li::before{content:"";width:5px;height:5px;background:var(--bronce);transform:rotate(45deg)}

/* Ficha: lo que incluye y el precio */
.ficha{background:var(--papel);border:1px solid var(--linea);padding:clamp(24px,3vw,40px);box-shadow:0 50px 90px -70px rgba(19,22,27,.55)}
.ficha__cab{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--tinta)}
.ficha__titulo{font-family:var(--serif);font-size:1.7rem;line-height:1}
.ficha ul{list-style:none;margin:0;padding:0}
.ficha li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:2px;align-items:center;padding:13px 0;border-bottom:1px solid var(--linea)}
.ficha li:last-child{border-bottom:0}
.ficha li b{grid-column:1;grid-row:1;font-weight:500;font-size:.98rem;line-height:1.35}
.ficha li span{grid-column:1;grid-row:2;font-size:var(--t-small);color:var(--grafito);line-height:1.4}
.ficha li svg{grid-column:2;grid-row:1 / 3;color:var(--bronce)}
.ficha__total{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:4px;padding-top:22px;border-top:1px dashed rgba(19,22,27,.4)}
.precio{font-family:var(--serif);font-size:clamp(3.6rem,5.4vw,5rem);line-height:.85;letter-spacing:-.03em;color:var(--bronce);white-space:nowrap}
.ficha__nota{margin-top:16px;font-size:var(--t-small);color:var(--grafito)}
.ficha__pie{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea);font-family:var(--cursiva);font-style:italic;font-size:1.15rem;line-height:1.3}

/* ——— Garantía (tinta) ——— */
.oscuro{background:var(--tinta);color:var(--cal)}
.oscuro .etiqueta{color:var(--niebla)}
.garantia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hueco);row-gap:56px;align-items:start}
.garantia__cab{grid-column:1 / span 5;display:flex;flex-direction:column;gap:24px}
.garantia__lista{grid-column:7 / span 6}
.sello{margin-top:16px;width:144px;height:144px;border-radius:50%;border:1px solid var(--bronce-claro);box-shadow:inset 0 0 0 6px var(--tinta),inset 0 0 0 7px var(--bronce-claro);display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;transform:rotate(-8deg)}
.sello b{font-family:var(--serif);font-weight:400;font-size:3rem;line-height:1;color:var(--bronce-claro)}
.sello span{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.45}
.punto{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:20px;padding-block:30px;border-top:1px solid var(--linea-clara)}
.punto:last-child{border-bottom:1px solid var(--linea-clara)}
.punto__num{font-family:var(--serif);font-size:1.7rem;line-height:1.15;color:var(--bronce-claro)}
.punto h3{font-family:var(--serif);font-size:var(--t-h3);line-height:1.1}
.punto p{margin-top:10px;color:#BFC0BD;max-width:34em}

/* ——— Cómo funciona ——— */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px var(--hueco)}
.paso{padding-top:22px;border-top:1px solid var(--tinta);display:flex;flex-direction:column;gap:14px}
.paso h3{font-family:var(--serif);font-size:var(--t-h3);line-height:1.1}
.paso p{color:var(--grafito);max-width:30em}

/* ——— Dudas ——— */
.papel{background:var(--papel);border-block:1px solid var(--linea)}
.dudas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hueco);row-gap:48px;align-items:start}
.dudas .cabecera{grid-column:1 / span 4;margin:0}
.dudas__lista{grid-column:6 / span 7;border-top:1px solid var(--tinta)}
details{border-bottom:1px solid var(--linea)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.2;transition:color .3s var(--ease)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;transition:transform .45s var(--ease-out)}
summary:hover{color:var(--bronce)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 26px;color:var(--grafito);max-width:40em}

/* ——— Contacto ——— */
.contacto{background:var(--piedra)}
.contacto .marco{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.contacto h2{font-size:clamp(2.8rem,7vw,7rem);line-height:.98;letter-spacing:-.02em}
.tel-grande{font-family:var(--serif);font-size:clamp(2rem,4.6vw,4.2rem);line-height:1;letter-spacing:-.01em;text-decoration:none;padding-bottom:8px;border-bottom:1px solid var(--tinta);transition:color .3s var(--ease),border-color .3s var(--ease)}
.tel-grande:hover{color:var(--bronce);border-color:var(--bronce)}

/* ——— Pie ——— */
.pie{border-top:1px solid var(--linea);font-size:var(--t-small);color:var(--grafito)}
.pie .marco{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:32px}
.pie__marca{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.pie .marca{font-size:1.2rem;color:var(--tinta)}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.pie a{text-underline-offset:3px}
.pie a:hover{color:var(--tinta)}

/* ——— Barra fija en el teléfono ——— */
.barra{display:none}

/* ——— Aparición suave (solo con JavaScript; sin él todo se ve) ——— */
.js .rev{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease) var(--d,0s),transform 1.2s var(--ease-out) var(--d,0s)}
.js .rev.in{opacity:1;transform:none}
.d1{--d:.08s}.d2{--d:.16s}.d3{--d:.24s}.d4{--d:.32s}

@media (max-width:1080px){
  .heroe__texto,.heroe__ficha{grid-column:1 / -1}
  .heroe__ficha{max-width:560px}
}
@media (max-width:1000px){
  .garantia__cab,.garantia__lista,.dudas .cabecera,.dudas__lista{grid-column:1 / -1}
}
@media (max-width:860px){
  .pasos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .cab__acciones{display:none}
  .cab .marco{min-height:60px}
  .barra{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--cal);border-top:1px solid var(--linea)}
  .barra .btn{min-height:50px;padding:12px;font-size:.95rem}
  .barra .btn--linea{background:var(--cal)}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .acciones .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rev{opacity:1;transform:none;transition:none}
  .btn svg,summary::after{transition:none}
}