/* Roguar LLC — página "Technology": el sistema en pantallas.
   Usa los mismos colores y letras de estilo.css. */

/* ═══════ marcos: computadora, teléfono y hoja ═══════ */
.laptop{margin:0;position:relative}
.laptop .pantalla{background:#1C1915;border:10px solid #1C1915;border-bottom-width:12px;
  border-radius:14px 14px 4px 4px;box-shadow:0 30px 60px rgba(40,30,12,.22),0 6px 18px rgba(40,30,12,.12);overflow:hidden}
.laptop .pantalla img{width:100%;height:auto;border-radius:3px}
.laptop .base{height:15px;margin:0 -7%;background:linear-gradient(180deg,#E3DED4 0%,#C9C2B4 70%,#B3AB9B 100%);
  border-radius:2px 2px 14px 14px;position:relative;box-shadow:0 14px 26px rgba(40,30,12,.16)}
.laptop .base:before{content:"";position:absolute;left:50%;top:0;width:15%;height:6px;transform:translateX(-50%);
  background:#BDB5A5;border-radius:0 0 8px 8px}
.laptop.chico .pantalla{border-width:8px;border-bottom-width:10px}

.telefono{margin:0;width:100%;max-width:290px;position:relative}
.telefono .pantalla{background:#F5EFE5;border:9px solid #1C1915;border-radius:42px;overflow:hidden;padding-top:34px;
  box-shadow:0 30px 60px rgba(40,30,12,.24),0 6px 18px rgba(40,30,12,.14);position:relative}
/* barra de estado del teléfono: hora y la isla */
.telefono .pantalla:before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:31%;height:21px;background:#1C1915;border-radius:14px;z-index:2}
.telefono .pantalla:after{content:"10:25";position:absolute;top:10px;left:24px;font:600 12px/18px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#1C1915;letter-spacing:.01em}
.telefono .pantalla img{width:100%;height:auto;border-radius:0 0 33px 33px}

.hoja{margin:0;background:#fff;padding:10px;box-shadow:0 30px 60px rgba(40,30,12,.18),0 4px 14px rgba(40,30,12,.10);
  max-width:430px;transform:rotate(-1.2deg)}
.hoja img{width:100%;height:auto}

/* ═══════ portada ═══════ */
.tc-hero{background:linear-gradient(180deg,var(--hueso) 0%,var(--crema) 100%);padding:76px 0 96px;overflow:hidden}
.tc-hero-rejilla{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.tc-hero .botonera .btn{padding:16px 26px}
.tc-hero-texto:before{background:var(--oro)}
.tc-hero .rotulo{color:var(--oro-osc)}
.tc-hero h1{font-family:var(--serif);font-size:56px;line-height:1.05;font-weight:500;color:var(--cafe);
  margin:0 0 22px;max-width:14ch}
.tc-hero p{font-size:16.5px;line-height:1.75;color:var(--cafe-suave);font-weight:400;max-width:46ch;margin:0 0 34px}
.tc-escena{position:relative;padding:0 0 40px 0}
.tc-escena .laptop{width:92%}
.tc-escena .telefono.flotante{position:absolute;right:0;bottom:-30px;width:27%;max-width:210px}
.tc-escena .telefono.flotante .pantalla{border-width:7px;border-radius:30px;padding-top:24px}
.tc-escena .telefono.flotante .pantalla img{border-radius:0 0 24px 24px}
.tc-escena .telefono.flotante .pantalla:before{height:15px;top:6px;border-radius:10px}
.tc-escena .telefono.flotante .pantalla:after{top:6px;left:16px;font-size:9px;line-height:15px}
@media(max-width:1060px){
  .tc-hero-rejilla{grid-template-columns:1fr;gap:44px}
  .tc-hero h1{font-size:44px}
  .tc-escena{max-width:760px}
}
@media(max-width:600px){
  .tc-hero{padding:48px 0 64px}
  .tc-hero h1{font-size:34px}
  .tc-escena .telefono.flotante{width:32%;bottom:-18px}
}

.tc-sellos{padding:0}
.tc-sellos .sello{justify-content:flex-start}
.tc-sellos .sello small{margin-top:3px}

/* ═══════ cabezas de sección ═══════ */
.tc-cabeza{max-width:760px;margin-bottom:56px}
.tc-cabeza.centro{text-align:center;margin-left:auto;margin-right:auto}
.tc-cabeza.centro h2{margin-left:auto;margin-right:auto}
.tc-cabeza h2{max-width:26ch}

/* ═══════ los cinco pasos ═══════ */
.tc-custodia{background:var(--crema)}
.tc-pasos{list-style:none;margin:0;padding:0;counter-reset:none}
.tc-paso{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:56px 0;
  border-top:1px solid var(--linea-gris)}
.tc-paso:first-child{border-top:0;padding-top:8px}
.tc-paso > figure{justify-self:center}
.tc-paso > .laptop{width:100%;max-width:620px}
.tc-paso.al-reves .tc-paso-texto{order:2}
.tc-paso-texto{max-width:470px}
.tc-paso:not(.al-reves) .tc-paso-texto{justify-self:end}
.tc-num{display:block;font-family:var(--serif);font-size:44px;font-weight:500;color:var(--oro);line-height:1;margin-bottom:12px}
.tc-paso h3{font-family:var(--serif);font-size:34px;font-weight:500;line-height:1.1;margin:0 0 14px;color:var(--cafe)}
.tc-paso p{margin:0 0 20px;font-size:15.5px;color:var(--cafe-suave);line-height:1.75;font-weight:400}
.tc-datos{list-style:none;margin:0;padding:0}
.tc-datos li{position:relative;padding:9px 0 9px 26px;font-size:14.5px;color:var(--cafe);font-weight:400;
  border-bottom:1px solid rgba(184,147,78,.18)}
.tc-datos li:last-child{border-bottom:0}
.tc-datos li:before{content:"";position:absolute;left:2px;top:15px;width:11px;height:6px;
  border-left:1.5px solid var(--oro);border-bottom:1.5px solid var(--oro);transform:rotate(-45deg)}
.tc-datos.grande li{font-size:15.5px;padding-top:11px;padding-bottom:11px}
@media(max-width:900px){
  .tc-paso{grid-template-columns:1fr;gap:34px;padding:44px 0}
  .tc-paso.al-reves .tc-paso-texto{order:0}
  .tc-paso-texto,.tc-paso:not(.al-reves) .tc-paso-texto{justify-self:start;max-width:none}
  .tc-paso .telefono{max-width:250px}
  .tc-paso h3{font-size:28px}
  .hoja{max-width:340px}
}

/* ═══════ portal ═══════ */
.tc-portal{background:var(--crema)}
.tc-portal-rejilla{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.tc-portal .parrafo{margin-bottom:22px}
@media(max-width:980px){.tc-portal-rejilla{grid-template-columns:1fr;gap:40px}}

/* ═══════ privacidad ═══════ */
.tc-oscuro{background:var(--tinta);color:#E8E1D3}
.tc-oscuro .rotulo{color:var(--oro-luz)}
.tc-oscuro h2{color:#F4EEE2;max-width:24ch;margin-bottom:46px}
.tc-cuatro{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tc-cuatro > div{padding:4px 30px 4px 0;margin-right:30px;border-right:1px solid rgba(217,190,134,.22)}
.tc-cuatro > div:last-child{border-right:0;margin-right:0}
.tc-cuatro h4{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--oro-luz);
  margin:0 0 12px;line-height:1.5}
.tc-cuatro p{margin:0;font-size:14.5px;line-height:1.7;color:#C9C0B0;font-weight:300}
@media(max-width:1000px){.tc-cuatro{grid-template-columns:1fr 1fr;gap:30px}
  .tc-cuatro > div{border-right:0;margin-right:0;padding:0}}
@media(max-width:560px){.tc-cuatro{grid-template-columns:1fr}}

/* ═══════ cierre ═══════ */
.tc-final{text-align:center;background:var(--hueso)}
.tc-final h2{margin:0 auto 18px;max-width:22ch}
.tc-final .parrafo{margin:0 auto 34px}
.botonera.centro{justify-content:center}
.tc-nota{margin:38px 0 0;font-size:12.5px;color:#9A9083;letter-spacing:.04em}

/* las computadoras no deben causar desplazamiento lateral en el celular */
.tc-hero,.tc-custodia,.tc-portal{overflow:hidden}

/* ═══════ demostracion en video ═══════ */
.tc-video{background:var(--hueso);border-bottom:1px solid var(--linea-gris)}
.tc-reproductor{width:100%;max-width:1120px;margin:0 auto;border-radius:16px;overflow:hidden;background:#F2EFE8;
  box-shadow:0 30px 70px rgba(40,30,12,.20),0 6px 18px rgba(40,30,12,.10);border:1px solid var(--linea-gris)}
.tc-reproductor video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#F2EFE8}
@media(max-width:600px){.tc-reproductor{border-radius:10px}}