/* =====================================================================
   canva.css — la capa de identidad del sitio.

   Va DESPUÉS de sitio.css a propósito. Hace dos cosas:

   1. TIPOGRAFÍA DE LAS DIAPOSITIVAS
      En tu Canva los titulares no son solo «Archivo Black en mayúsculas»:
      llevan un subrayado grueso debajo, van muy apretados entre líneas, y
      el acento manuscrito (Kaushan) aparece ENCIMA del titular, pequeño,
      no al lado. Eso es lo que da el aire de la diapositiva y es lo que
      aquí se reproduce.

   2. VIDRIO
      Las superficies que se quedan flotando mientras la página se mueve
      —la cabecera pegajosa, el submenú, el menú del celular— se vuelven
      translúcidas y desenfocan lo que pasa por detrás. No es decoración:
      al hacer scroll se ve el contenido correr bajo la barra, y eso
      explica solo que la barra está «encima» y no es parte del bloque.

      Se degrada sin romperse: si el aparato no sabe desenfocar, queda el
      color opaco de siempre.
   ===================================================================== */

:root{
  --vidrio-rojo:  #ff5454d9;
  --vidrio-crema: #fffff7cc;
  --vidrio-blanco:#fffffff2;
  --borroso: blur(16px) saturate(1.4);
  --trama-lila: #8b97fd4d;
}

/* ---------------------------------------------------------------------
   1. TITULARES
   --------------------------------------------------------------------- */
h1, h2{ line-height:1.02; letter-spacing:-.015em }

/* El subrayado grueso del Canva. Se pone solo en los titulares de
   sección, no en todos, para que no se vuelva un tic. */
.encabezado > h2, .llamada > h2{
  position:relative; padding-bottom:20px;
}
.encabezado > h2::after, .llamada > h2::after{
  content:""; position:absolute; left:0; bottom:0; width:86px; height:7px;
  background:var(--rojo); border:2.5px solid var(--tinta); border-radius:999px;
}
/* Si el encabezado va centrado, el subrayado también. */
.encabezado.centro > h2::after, .llamada > h2::after{ left:50%; translate:-50% 0 }
/* Sobre rojo o sobre tinta el rojo no se ve: se cambia por amarillo. */
.llamada > h2::after, .seccion.tinta .encabezado > h2::after{ background:var(--amarillo) }
.seccion.lila .encabezado > h2::after{ background:var(--crema) }

/* El manuscrito va ENCIMA del titular, pequeño, como en la diapositiva
   («Te damos la bienvenida a» sobre IT TOOL AI). */
.mano{ display:block; font-size:.46em; line-height:1.1; margin-bottom:.1em }
h1 > .mano{ margin-bottom:.02em }

/* ---------------------------------------------------------------------
   2. VIDRIO EN LO QUE FLOTA
   --------------------------------------------------------------------- */
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .cab{
    background:var(--vidrio-rojo);
    -webkit-backdrop-filter:var(--borroso); backdrop-filter:var(--borroso);
  }
  .subnav{
    background:var(--vidrio-crema);
    -webkit-backdrop-filter:var(--borroso); backdrop-filter:var(--borroso);
  }
  /* El desplegable del menú y el menú del celular. */
  .item-sub .sub, .menu.abierto{
    background:var(--vidrio-blanco);
    -webkit-backdrop-filter:var(--borroso); backdrop-filter:var(--borroso);
  }
}

/* ---------------------------------------------------------------------
   3. LA BANDA DE CUADRÍCULA
   En el Canva una banda de papel cuadriculado lila parte la página.
   Aquí hace lo mismo: separa sin tener que poner una línea.
   --------------------------------------------------------------------- */
/* La cuadricula NO va bajo la cabecera: ahi quedaba una tira de 9 px
   entre dos lineas negras —la del header y la suya— y parecia un fallo,
   ademas de tapar el contenido. En el Canva es una banda ancha que parte
   la pagina, y eso es lo que hace abajo. */
.seccion.suave{
  background-color:var(--bg2);
  background-image:
    repeating-linear-gradient(to right,  var(--trama-lila) 0 1.5px, transparent 1.5px 30px),
    repeating-linear-gradient(to bottom, var(--trama-lila) 0 1.5px, transparent 1.5px 30px);
}

/* ---------------------------------------------------------------------
   4. LOS ICONOS
   Macizos y del color del texto, igual que en la aplicación.
   --------------------------------------------------------------------- */
.ico{ width:1.15em; height:1.15em; display:inline-block; vertical-align:-.22em; flex:none }
i[data-ico]{ display:inline-flex; font-style:normal; line-height:0 }

/* El cuadro de color de las tarjetas: el icono dentro va en negro, como
   el texto. En el Canva nunca hay blanco sobre los bloques de color. */
.tarjeta .ic{ font-size:0; color:var(--tinta) }
.tarjeta .ic .ico{ width:30px; height:30px }

/* Los iconos del camino de niveles. */
.camino .em{ font-size:0; color:var(--tinta) }
.camino .em .ico{ width:24px; height:24px }

/* Los del menú desplegable, más discretos. */
.item-sub .sub a .ico{ width:17px; height:17px; opacity:.8 }

/* Las fichas sueltas del héroe («Celular y computador»). */
.heroe .ico{ width:17px; height:17px }

/* ---------------------------------------------------------------------
   5. DETALLES QUE ESTABAN EN EL ESTILO DE ANTES
   --------------------------------------------------------------------- */
/* La palomita de las listas era el carácter «✓» de la fuente del
   sistema: se veía distinto en cada aparato. Ahora se dibuja. */
.lista-check li::before, .plan li::before{
  content:""; width:11px; height:6px; border:0 solid currentColor;
  border-width:0 0 2.6px 2.6px; rotate:-45deg;
}
.lista-check li::before{
  position:absolute; left:6px; top:9px; color:var(--tinta);
  width:12px; height:6px; border-radius:0; background:none;
}
.plan li::before{ position:absolute; left:0; top:9px; color:#00804f }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
}