/* Strike Digital — embudos por rubro (tools/nichos.py): entrada a la demo y lista de rubros. Las demos viven en /demo/. */

.portada--nicho h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem); max-width: 19ch; }
.nicho__desde { margin: var(--e-3) 0 0; font-weight: 700; color: var(--carbon); }
.nicho__medida { margin: var(--e-3) 0 0; padding: var(--e-2) var(--e-3); max-width: 54ch; background: var(--amarillo); font-weight: 700; transform: rotate(-0.6deg); }
.nicho__caso { max-width: 30rem; margin-inline: auto; width: 100%; }

/* Entrada a la demo: la portada de la web de ejemplo dentro de una ventana, entera y pulsable */
.entrada-demo { display: block; position: relative; max-width: 58rem; margin: var(--e-5) auto 0; color: var(--carbon); text-decoration: none; background: var(--hoja); border: 2px solid var(--carbon); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25), 0 34px 50px -24px rgba(0, 0, 0, 0.7); transform: rotate(-0.6deg); transition: transform 0.5s var(--salida), box-shadow 0.5s var(--salida); }
.entrada-demo:hover, .entrada-demo:focus-visible { transform: rotate(0) translateY(-8px); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25), 0 48px 60px -26px rgba(0, 0, 0, 0.8); }
.entrada-demo__barra { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; background: var(--carbon); color: var(--papel); }
.entrada-demo__barra i { flex: none; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--rojo); }
.entrada-demo__barra i:nth-child(2) { background: var(--amarillo); }
.entrada-demo__barra i:nth-child(3) { background: var(--papel); }
.entrada-demo__barra em { flex: 1; min-width: 0; margin-left: 0.5rem; padding: 0.3rem 0.75rem; background: rgba(239, 236, 221, 0.14); font: 600 0.8125rem/1.2 var(--texto); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entrada-demo__vista { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--papel-hondo); }
.entrada-demo__vista img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.9s var(--salida); }
.entrada-demo:hover .entrada-demo__vista img { transform: scale(1.03); }
.entrada-demo__boton { position: absolute; left: 50%; bottom: clamp(1rem, 4vw, 2.25rem); transform: translateX(-50%) rotate(-1.5deg); display: inline-flex; align-items: center; min-height: 3.5rem; padding: 0.7rem 1.6rem; background: var(--amarillo); border: 2px solid var(--carbon); box-shadow: var(--sombra-papel); font: 700 clamp(1rem, 0.8rem + 1vw, 1.375rem)/1.1 var(--titular); text-transform: uppercase; letter-spacing: 0.03em; text-align: center; white-space: nowrap; transition: transform 0.35s var(--salida), background-color 0.2s ease-out, color 0.2s ease-out; }
.entrada-demo:hover .entrada-demo__boton { transform: translateX(-50%) rotate(1deg) scale(1.06); background: var(--rojo); color: var(--hoja); }
@media (max-width: 30rem) { .entrada-demo__boton { white-space: normal; width: 88%; justify-content: center; } }
.entrada-demo__puntos { display: grid; gap: 0.6rem var(--e-4); max-width: 58rem; margin: var(--e-4) auto 0; }
.entrada-demo__puntos li { position: relative; padding-left: 1.9rem; }
.entrada-demo__puntos li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 1.15rem; height: 1.15rem; background: url("/img/post2-09-destello-amarillo.svg") center / contain no-repeat; }
@media (min-width: 48rem) { .entrada-demo__puntos { grid-template-columns: repeat(3, 1fr); } }

/* Lista de rubros: filas grandes, sin tarjetas */
.rubros { margin-top: var(--e-4); border-top: 2px solid currentColor; }
.rubros a { display: grid; gap: 0.15rem var(--e-3); align-items: baseline; padding: var(--e-2) 0; border-bottom: 1px solid currentColor; text-decoration: none; transition: padding-left 0.4s var(--salida), color 0.2s ease-out; }
.rubros b { font: 700 var(--t-xl)/1.05 var(--titular); text-transform: uppercase; }
.rubros span { font-size: 1rem; }
.rubros i { font: 700 0.9375rem/1 var(--titular); font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: underline; text-underline-offset: 0.25em; }
.rubros a:hover { padding-left: 0.9rem; color: var(--rojo); }
.campo-oscuro .rubros a:hover { color: var(--amarillo); }
@media (min-width: 48rem) { .rubros a { grid-template-columns: 22rem 1fr auto; } }
@media (hover: none) { .rubros a:hover { padding-left: 0; } .entrada-demo:hover { transform: rotate(-0.6deg); } }

/* Lo que resuelve: filas con la necesidad a la izquierda */
.necesidades b { color: var(--rojo); }
@media (min-width: 48rem) { .filas.necesidades > div { grid-template-columns: 20rem 1fr; } }

/* Enlaces entre landings e índice por rubro */
.relacionadas { margin-top: var(--e-3); border-top: 2px solid currentColor; }
.relacionadas a { display: flex; align-items: center; min-height: 3.25rem; padding: 0.6rem 0; border-bottom: 1px solid currentColor; font: 700 var(--t-lg)/1.2 var(--titular); text-transform: uppercase; text-decoration: none; transition: padding-left 0.4s var(--salida), color 0.2s ease-out; }
.relacionadas a:hover { padding-left: 0.75rem; color: var(--rojo); }
.indice { display: grid; gap: var(--e-4) var(--e-5); margin-top: var(--e-4); }
.indice > div { padding-top: var(--e-2); border-top: 2px solid var(--carbon); }
.indice h3 a { text-decoration: none; }
.indice h3 a:hover { color: var(--rojo); }
.indice p { margin: 0.4rem 0 var(--e-2); color: var(--tinta-suave); }
.indice li a { display: flex; align-items: center; min-height: 2.75rem; padding: 0.35rem 0; border-bottom: 1px solid #cfcab5; text-decoration: none; }
.indice li a:hover { color: var(--rojo); text-decoration: underline; }
.indice__demo { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--e-2); font: 700 0.9375rem/1 var(--titular); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rojo); }
@media (min-width: 44rem) { .indice { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .indice { grid-template-columns: repeat(3, 1fr); } }

/* Formulario corto de las landings */
.corto__caja { background: var(--hoja); border: 2px solid var(--carbon); box-shadow: var(--sombra-papel); padding: clamp(1.25rem, 3vw, 2rem); transform: rotate(0.5deg); }
.corto { display: grid; gap: 0.9rem 1rem; }
.corto__campo { display: grid; gap: 0.35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.corto label, .corto legend { padding: 0; font-weight: 700; font-size: 1rem; }
.corto input[type="text"], .corto input[type="tel"], .corto input[type="email"], .corto select { width: 100%; min-height: 3rem; padding: 0.6rem 0.75rem; font: 400 1.0625rem/1.4 var(--texto); color: var(--carbon); background: var(--papel); border: 2px solid var(--carbon); border-radius: 0; caret-color: var(--rojo); }
.corto input:focus-visible, .corto select:focus-visible { outline-offset: 0; background: #fff; }
.corto [aria-invalid="true"] { border-color: var(--rojo); }
.corto__opciones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.corto__opciones label { position: relative; cursor: pointer; }
.corto__opciones input { position: absolute; opacity: 0; }
.corto__opciones span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.9rem; border: 2px solid var(--carbon); font: 700 0.875rem/1 var(--titular); text-transform: uppercase; letter-spacing: 0.04em; }
.corto__opciones input:checked + span { background: var(--carbon); color: var(--papel); }
.corto__opciones input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.corto__acepto { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font-weight: 400 !important; cursor: pointer; }
.corto__acepto input { width: 1.3rem; height: 1.3rem; flex: none; accent-color: var(--rojo); }
.corto__error { margin: 0; min-height: 0; color: var(--rojo); font-weight: 700; font-size: var(--t-sm); }
.corto__error:empty { display: none; }
.corto__trampa { position: absolute; left: -999rem; width: 1px; height: 1px; opacity: 0; }
.corto .boton { justify-self: start; }
.corto .nota { margin: 0; }
.corto[hidden] { display: none; }
.corto__listo { outline: 0; }
.corto__listo h3 { font-size: var(--t-2xl); color: var(--rojo); }
.corto__listo p { margin-top: var(--e-2); font-size: var(--t-lg); }
.campo-amarillo .corto .boton { background: var(--rojo); border-color: var(--rojo); }
.campo-amarillo .corto .boton:hover { background: var(--carbon); border-color: var(--carbon); }
.campo-amarillo .corto__caja :focus-visible { outline-color: var(--azul); }
@media (min-width: 34rem) { .corto { grid-template-columns: 1fr 1fr; } .corto__campo--ancho { grid-column: 1 / -1; } }

/* Bloque propio de cada landing: un ejemplo del rubro, su costo y qué preguntar antes de contratar */
.propio { align-items: start; }
.propio > div > h2 { margin-bottom: var(--e-3); }
.propio__texto { margin-top: var(--e-3); }
.propio__texto p:first-child { font-size: var(--t-lg); font-weight: 600; }
.propio__texto p { max-width: 62ch; }
.propio__costo { background: var(--hoja); border: 2px solid var(--carbon); box-shadow: var(--sombra-papel); padding: var(--e-3); transform: rotate(0.6deg); }
.propio__costo { position: relative; margin-top: var(--e-2); }
.propio__costo::before { content: ""; position: absolute; top: -1.6rem; right: -1rem; width: 3.5rem; height: 3.5rem; background: url("/img/49-inversion-retorno.svg") center / contain no-repeat; transform: rotate(10deg); }
.propio__costo h3 { font-size: var(--t-lg); color: var(--rojo); margin-bottom: var(--e-2); padding-right: 2.5rem; }
.propio__costo p { margin: 0; }

/* Blog: portada con collage, índice al costado, cada parte con su pieza del banco y una entradilla más grande */
.articulo__migas { margin: 0 0 var(--e-2); font-size: var(--t-sm); font-weight: 700; color: var(--tinta-suave); }
.articulo__migas a { color: var(--rojo); }
.articulo .portada--nicho h1 { max-width: 18ch; }
.articulo__entrada { max-width: 58ch; }
.articulo__figura { width: min(62%, 17rem); }
.articulo__seccion { padding-top: var(--e-5); }
.articulo__grilla { display: grid; gap: var(--e-4); align-items: start; }
.articulo__indice { padding: var(--e-2) var(--e-3) var(--e-3); background: var(--hoja); border: 2px solid var(--carbon); box-shadow: var(--sombra-papel); }
.articulo__indice p { margin: 0 0 var(--e-1); font: 700 var(--t-sm)/1 var(--titular); text-transform: uppercase; letter-spacing: 0.06em; color: var(--rojo); }
.articulo__indice ol { counter-reset: indice; display: grid; gap: 0.1rem; }
.articulo__indice li { counter-increment: indice; }
.articulo__indice a { display: grid; grid-template-columns: 1.6rem 1fr; align-items: baseline; min-height: 2.75rem; padding: 0.35rem 0; font-size: var(--t-sm); font-weight: 700; line-height: 1.3; text-decoration: none; border-bottom: 1px solid #d6d2bf; }
.articulo__indice li:last-child a { border-bottom: 0; }
.articulo__indice a::before { content: counter(indice); font: 700 1rem/1 var(--titular); color: var(--rojo); }
.articulo__indice a:hover { color: var(--rojo); }
.articulo__cuerpo { min-width: 0; max-width: 44rem; }
.articulo__parte { padding-top: var(--e-5); scroll-margin-top: 5.5rem; }
.articulo__parte:first-child { padding-top: 0; }
.articulo__parte + .articulo__parte { border-top: 2px solid var(--carbon); margin-top: var(--e-4); padding-top: var(--e-4); }
.articulo__titulo { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2); align-items: center; margin-bottom: var(--e-3); }
.articulo__titulo img { width: 3.5rem; height: 3.5rem; object-fit: contain; transform: rotate(-4deg); filter: drop-shadow(0 6px 5px rgba(45, 45, 45, 0.2)); }
.articulo__parte:nth-child(even) .articulo__titulo img { transform: rotate(5deg); }
.articulo__cuerpo h2 { font-size: var(--t-xl); margin: 0; }
.articulo__cuerpo p { max-width: 64ch; }
.articulo__entradilla { font-size: var(--t-lg); line-height: 1.55; font-weight: 600; }
.articulo__cuerpo a { color: var(--rojo); font-weight: 700; }
.articulo__lista { margin: var(--e-3) 0 var(--e-2); padding: var(--e-3); background: var(--papel-hondo); gap: 0.9rem; }
.articulo__lista li { max-width: 62ch; }
.articulo__nota { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2); align-items: center; margin: var(--e-5) 0 0; padding: var(--e-2) var(--e-3); background: var(--amarillo); border: 2px solid var(--carbon); transform: rotate(-0.6deg); }
.articulo__nota img { width: 3.25rem; transform: rotate(10deg); }
.articulo__nota p { margin: 0; font-weight: 700; }
.articulo__nota a { color: var(--carbon); }
@media (min-width: 62rem) {
  .articulo__figura { width: 100%; max-width: 19rem; }
  .articulo__grilla { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--e-6); }
  .articulo__indice { grid-column: 2; grid-row: 1; position: sticky; top: 6rem; }
  .articulo__cuerpo { grid-column: 1; grid-row: 1; }
  .articulo__titulo img { width: 4.25rem; height: 4.25rem; }
}
.blog-lista a { display: grid; gap: 0.25rem; align-items: start; padding-block: var(--e-2); }
.blog-lista small { font: 400 1rem/1.5 var(--texto); text-transform: none; color: var(--tinta-suave); }