/* ==========================================================================
   Inicio y articulos - Creacion de Web
   Se carga siempre despues de base.css, que trae los tokens y las piezas
   comunes. Aca solo va lo propio de la portada y del lector de articulos.
   ========================================================================== */

body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}

.seccion{padding:64px 0}
.seccion+.seccion{border-top:1px solid var(--borde)}
.seccion-alt{background:var(--papel-alt)}
.seccion-panel{background:var(--panel);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.enc{max-width:46ch;margin:0 0 34px}
.enc h2{font-size:28px}
.enc p{margin:0;font-size:18px}

/* --------------------------------------------------------------------------
   Portada: hero editorial, alineado a la izquierda, dos columnas asimetricas.
   El foco visual es uno solo: la barra de direccion del dominio, a la derecha.
   -------------------------------------------------------------------------- */

.hero{background:var(--papel);border-bottom:1px solid var(--borde);padding:52px 0 48px}
.hero-grid{display:grid;gap:38px;align-items:start}
.hero-texto{max-width:34ch}
.hero h1{font-size:34px;line-height:1.1;margin-bottom:18px}
.hero-sub{font-size:17px;max-width:44ch;margin-bottom:24px}
.hero-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-acciones .boton{flex:1 1 200px}
.hero-confia{
  list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--borde);
  display:grid;gap:10px;font-size:13.5px;color:var(--texto);max-width:none;
}
.hero-confia li{position:relative;padding-left:18px}
.hero-confia li::before{
  content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:99px;background:var(--acento-claro);
}
.hero-confia b{color:var(--tinta);font-weight:600}

/* La firma del sitio: el dominio del cliente escribiendose. Es lo unico que
   se mueve en toda la pagina, y se detiene si el sistema pide menos animacion. */
.dominio-bloque{
  border:1px solid var(--borde-fuerte);border-radius:var(--r-grande);
  background:var(--panel);padding:18px;
}
.dominio-barra{
  display:flex;align-items:center;gap:2px;
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r-chico);
  padding:14px 16px;font-family:var(--mono);font-size:17px;
  overflow:hidden;white-space:nowrap;
}
.dominio-barra .esquema{color:var(--suave);font-size:14px}
.dominio-barra .nombre{color:var(--tinta);font-weight:700}
.dominio-barra .tld{color:var(--acento);font-weight:700}
.cursor{
  display:inline-block;width:9px;height:19px;margin-left:3px;
  background:var(--senal);vertical-align:-3px;
  animation:parpadeo 1.15s step-end infinite;
}
@keyframes parpadeo{0%,100%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .cursor{animation:none}
}

.dominio-datos{margin:16px 0 0;font-family:var(--mono);font-size:12.5px}
.dominio-datos div{
  display:flex;justify-content:space-between;gap:16px;
  padding:9px 2px;border-top:1px solid var(--borde);
}
.dominio-datos div:first-child{border-top:0}
.dominio-datos b{
  color:var(--suave);letter-spacing:.1em;text-transform:uppercase;font-weight:400;
}
.dominio-datos span{color:var(--tinta);text-align:right}

@media(min-width:900px){
  .hero{padding:84px 0 76px}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:64px}
  .hero h1{font-size:48px}
  .hero-acciones .boton{flex:0 0 auto}
  .dominio-barra{font-size:19px;padding:16px 18px}
}

/* --------------------------------------------------------------------------
   Como funciona: tres pasos numerados 01 / 02 / 03, cada uno bajo una regla
   fina. Es una secuencia real, no una grilla de features.
   -------------------------------------------------------------------------- */

.pasos{list-style:none;margin:0;padding:0;display:grid;gap:26px;counter-reset:paso}
.paso-item{counter-increment:paso;padding-top:16px;border-top:2px solid var(--tinta)}
.paso-item::before{
  content:counter(paso,decimal-leading-zero);
  display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--acento);margin-bottom:10px;
}
.paso-item b{display:block;font-family:var(--serif);color:var(--tinta);font-size:19px;margin-bottom:6px}
.paso-item p{margin:0;font-size:16px;line-height:1.6}

@media(min-width:760px){
  .pasos{grid-template-columns:repeat(3,1fr);gap:30px}
}

/* --------------------------------------------------------------------------
   Ejemplos: tres formas de sitio, una linea cada una
   -------------------------------------------------------------------------- */

.ejemplos{display:grid;gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:var(--r)}
.ejemplo{background:var(--papel);padding:24px}
.seccion-alt .ejemplo{background:var(--papel-alt)}
.ejemplo-num{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--acento);margin:0 0 8px;
}
.ejemplo h3{font-size:19px;margin-bottom:6px}
.ejemplo p{margin:0;font-size:16.5px;line-height:1.6}

@media(min-width:760px){
  .ejemplos{grid-template-columns:repeat(3,1fr)}
}

/* --------------------------------------------------------------------------
   Precios
   -------------------------------------------------------------------------- */

.grid-planes{display:grid;gap:14px;max-width:820px}
.plan{
  position:relative;background:var(--panel);
  border:1px solid var(--borde);border-radius:var(--r-grande);padding:22px;
  display:flex;flex-direction:column;
}
.plan h3{font-size:17px;margin-bottom:4px}
.plan-tipo{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--suave);margin:0 0 12px;
}
.precio-plan{
  font-family:var(--mono);font-size:25px;font-weight:700;color:var(--tinta);
  letter-spacing:-.03em;margin:0 0 4px;
}
.precio-plan span{
  display:block;font-size:11.5px;font-weight:400;color:var(--suave);
  letter-spacing:.1em;text-transform:uppercase;margin-top:5px;
}
.plan p:last-child{margin:14px 0 0;font-size:16.5px;line-height:1.6}
.plan-destacado{border-color:var(--acento);border-width:2px;padding:21px}
.plan-etiqueta{
  position:absolute;top:-10px;left:21px;
  background:var(--acento);color:#fff;border-radius:99px;padding:3px 11px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
.nota-planes{margin:22px 0 0;font-size:16px;max-width:60ch}
.nota-planes b{color:var(--tinta)}

/* Lo que se paga recien al ano siguiente. Va aparte y en gris: es una
   condicion del servicio, no un plan que el cliente tenga que elegir hoy. */
.renovacion{max-width:820px;margin:26px 0 0;padding:20px 22px;background:var(--papel);border:1px solid var(--borde);border-radius:var(--r)}
.renovacion .rotulo{margin-bottom:12px}
.renovacion ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.renovacion li{display:flex;gap:14px;align-items:baseline}
.renovacion b{
  flex:0 0 auto;font-family:var(--mono);font-size:16px;color:var(--tinta);letter-spacing:-.02em;
}
.renovacion span{font-size:16px}

@media(min-width:680px){
  .grid-planes{grid-template-columns:repeat(2,1fr);gap:16px}
  .renovacion ul{grid-template-columns:1fr 1fr;gap:26px}
}

/* --------------------------------------------------------------------------
   Que incluye
   -------------------------------------------------------------------------- */

.incluye{list-style:none;margin:0;padding:0;display:grid}
.incluye li{
  display:flex;gap:12px;align-items:flex-start;
  padding:15px 0;border-bottom:1px solid var(--borde);font-size:17px;line-height:1.55;
}
.incluye li:first-child{border-top:1px solid var(--borde)}
.incluye b{color:var(--tinta);display:block}
.incluye .tick{
  flex:0 0 18px;width:18px;height:18px;margin-top:3px;
  border-radius:99px;background:var(--acento-suave);position:relative;
}
.incluye .tick::after{
  content:"";position:absolute;left:6px;top:3.5px;width:5px;height:9px;
  border:solid var(--acento);border-width:0 2px 2px 0;transform:rotate(43deg);
}

@media(min-width:760px){
  .incluye{grid-template-columns:1fr 1fr;column-gap:40px}
  .incluye li:nth-child(2){border-top:1px solid var(--borde)}
}

/* --------------------------------------------------------------------------
   Guia destacada
   -------------------------------------------------------------------------- */

.guia{
  background:var(--panel);border:1px solid var(--borde);border-left:3px solid var(--senal);
  border-radius:var(--r);padding:26px;
}
.guia h2{font-size:23px;max-width:26ch}
.guia p{max-width:60ch}
.guia a{font-weight:600}

/* --------------------------------------------------------------------------
   Preguntas
   -------------------------------------------------------------------------- */

.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--borde)}
.faq details:first-of-type{border-top:1px solid var(--borde)}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  color:var(--tinta);font-weight:600;font-size:17.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:15px;
  font-family:var(--mono);font-size:19px;color:var(--acento);font-weight:400;
}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 18px;font-size:17px;max-width:66ch}

/* --------------------------------------------------------------------------
   Cierre
   -------------------------------------------------------------------------- */

.cierre{padding:72px 0;border-top:1px solid var(--borde)}
.cierre h2{font-size:30px;max-width:22ch}
.cierre p{max-width:48ch;margin:0 0 24px}

/* --------------------------------------------------------------------------
   Articulo
   -------------------------------------------------------------------------- */

.articulo{
  max-width:720px;margin:0 auto;padding:34px 20px 20px;
  font-size:18px;line-height:1.72;
}
.articulo h1{font-size:32px;margin-bottom:18px}
.articulo h2{font-size:23px;margin:40px 0 12px}
.articulo h3{font-size:18px;margin:28px 0 10px}
.articulo p{margin:0 0 18px}
.articulo ul,.articulo ol{padding-left:22px;margin:0 0 18px}
.articulo li{margin-bottom:8px}
.articulo strong{color:var(--tinta)}
.articulo blockquote{
  margin:0 0 18px;padding:4px 0 4px 20px;border-left:3px solid var(--acento-claro);
  color:var(--tinta);
}
.articulo blockquote p{margin:0}
.articulo hr{border:0;border-top:1px solid var(--borde);margin:34px 0}
.tabla-scroll{
  overflow-x:auto;margin:0 0 20px;
  border:1px solid var(--borde);border-radius:var(--r);background:var(--panel);
}
.articulo table{border-collapse:collapse;width:100%;font-size:14px;white-space:nowrap}
.articulo th,.articulo td{padding:11px 14px;border-bottom:1px solid var(--borde);text-align:left}
.articulo thead th{
  background:var(--papel);color:var(--tinta);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
}
.articulo tbody tr:last-child td{border-bottom:0}

.articulo-cierre{max-width:720px;margin:10px auto 0;padding:24px 20px 40px}
.articulo-cierre .caja{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  padding:22px;display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;
}
.articulo-cierre b{display:block;color:var(--tinta);font-size:16.5px}
.articulo-cierre small{font-size:15.5px;color:var(--texto)}

@media(min-width:760px){
  .articulo{padding-top:52px}
  .articulo h1{font-size:38px}
}