/* Landing. Fondos sobrios (blanco y gris suave); el color vivo solo acentúa: cifras, iconos, botones y filetes cortos.
   Las secciones se separan con espacio y con el fondo; una línea fina solo entre renglones de una misma lista. */

/* Portada: banda de cielo con el titular, el sello de los 10 años y, debajo, el horizonte. */
.portada { background: var(--cielo); color: #fff; }
.portada__texto { padding-block: var(--e-5) var(--e-4); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-5); align-items: center; }
.portada h1 { font-size: clamp(2.125rem, 3.4vw + 1rem, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 30ch; margin-bottom: var(--e-3); text-wrap: wrap; }
.portada p { font-size: 1.1875rem; color: #eaf2f6; max-width: 46ch; margin-bottom: var(--e-4); }
.portada p.portada__nota { font-size: 1rem; color: #b9d2dc; margin: var(--e-3) 0 0; }
.portada__imagen { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
.portada__imagen img { width: 100%; height: clamp(110px, 12vw, 170px); object-fit: cover; object-position: center bottom; }

/* Sello conmemorativo de los 10 años */
.sello { width: clamp(9rem, 17vw, 12.5rem); height: auto; justify-self: end; }
.sello__anillo { fill: none; stroke: var(--teal); stroke-width: 2; }
.sello__anillo--fino { stroke-width: 1; opacity: 0.55; }
.sello__arco { font: 600 13px var(--fuente-titulos); letter-spacing: 0.32em; fill: #cfe3ea; }
.sello__numero { font: 600 62px var(--fuente-titulos); fill: var(--teal); letter-spacing: -0.03em; }
.sello__anios { font: 600 17px var(--fuente-titulos); fill: #fff; }

/* Secciones */
html { scroll-behavior: smooth; }
.seccion { padding-block: var(--e-5); scroll-margin-top: var(--e-2); }
.seccion--blanca { background: #fff; }
.seccion--suave { background: var(--suave); }
.seccion h2 { font-size: var(--t-3); line-height: 1.2; color: var(--navy); text-align: center; }
.seccion h2::after { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--teal); margin: var(--e-2) auto 0; }
.seccion__sub { color: var(--tinta-2); max-width: 58ch; margin: var(--e-2) auto 0; text-align: center; }
.botones--centro { justify-content: center; margin-top: var(--e-4); }
.cifra__valor { font: 600 clamp(2.5rem, 4vw + 0.5rem, 3.5rem)/1 var(--fuente-titulos); color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Franja de cifras bajo la portada */
.franja__cifras { list-style: none; margin: 0 auto; padding-block: var(--e-4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); }
.franja__cifras li { text-align: center; }
.franja__valor { white-space: nowrap; font: 600 clamp(2.25rem, 2.6vw + 0.5rem, 2.875rem)/1 var(--fuente-titulos); color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.franja__cifras p { color: var(--tinta); font-size: 1rem; max-width: 22ch; margin: var(--e-1) auto 0; }




/* Bento: contenedores de tamaño distinto según la importancia. Un solo bloque oscuro, el servicio principal. */
.bento { list-style: none; margin: var(--e-5) auto 0; padding: 0; max-width: 72rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-2); }
.bento > li { grid-column: span 2; background: var(--suave); border-radius: 4px; padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-1); align-items: flex-start; min-width: 0; }
.seccion--suave .bento > li { background: #fff; border: 1px solid var(--linea); }
.bento__cab { display: flex; align-items: center; gap: var(--e-1); }
.bento__cab .icono { width: 1.5rem; height: 1.5rem; margin: 0; stroke: var(--teal-texto); }
.bento h3 { font-size: 1.1875rem; line-height: 1.3; color: var(--navy); }
.bento p { color: var(--tinta); }
.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pts li { position: relative; padding-left: 1.25rem; color: var(--tinta); }
.pts li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 8px; height: 2px; background: var(--teal); }
.rot { font: 600 0.8125rem var(--fuente-titulos); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-texto); }
.kpi { font: 600 clamp(2.25rem, 4vw + 0.5rem, 3rem)/1 var(--fuente-titulos); color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }


/* Cómo trabajamos: cuatro etapas, cada una con su número y un filete de acento */
.etapas { list-style: none; margin: var(--e-5) auto 0; padding: 0; max-width: 68rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.etapas li { display: flex; flex-direction: column; gap: var(--e-1); }
.etapa__numero { font: 600 2.75rem/1 var(--fuente-titulos); color: var(--teal-texto); }
.etapas h3 { font-size: 1.1875rem; color: var(--navy); line-height: 1.3; }
.etapas p { color: var(--tinta); font-size: 1rem; }

/* Curso */
.temas { list-style: none; margin: var(--e-5) auto 0; padding: 0; max-width: 60rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3) var(--e-4); }
.temas li { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--e-1); align-items: start; }
.temas p { text-align: center; color: var(--navy); font: 600 1.0625rem/1.35 var(--fuente-titulos); }


/* Para programadores */
.seccion--programadores { padding-block: var(--e-5); }

/* Cierre con el video de agua en bucle. Sobre el video va un velo liso para sostener el contraste. */
.cierre { position: relative; overflow: hidden; background: var(--cielo) url("../video/poster.webp") center / cover no-repeat; color: #fff; }
.cierre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cierre::after { content: ""; position: absolute; inset: 0; background: rgb(0 42 84 / 0.5); }
.cierre__fila { position: relative; z-index: 1; padding-block: var(--e-6); display: flex; flex-direction: column; gap: var(--e-3); align-items: center; text-align: center; }
.cierre h2 { font-size: var(--t-4); line-height: 1.15; max-width: 22ch; color: #fff; }
.cierre h2::after { display: none; }

@media (max-width: 1000px) {
  .temas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .portada__texto { grid-template-columns: 1fr; gap: var(--e-3); padding-block: var(--e-4) var(--e-3); }
  .sello { order: -1; width: 7.5rem; justify-self: start; }
  .temas, .etapas { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
}

/* Lo que hemos construido: la pantalla, lo que logra y su cifra. Cinco bloques de tamaño fijo. */
.bento--construido { max-width: 72rem; }
.bento--construido > li { background: #fff; border: 1px solid var(--linea); padding: 0; gap: 0; overflow: hidden; }
.bento--construido picture { display: block; width: 100%; background: var(--suave); border-bottom: 1px solid var(--linea); }
.bento--construido img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top left; }
.bento--construido h3 { font-size: 1.1875rem; padding: var(--e-3) var(--e-3) 0; }
.bento--construido .kpi-fila, .bento--construido .boton { margin-inline: var(--e-3); }
.bento--construido .boton { margin-block: auto var(--e-3); }
.kpi-fila { display: flex; align-items: baseline; gap: var(--e-1); padding-block: var(--e-1) var(--e-2); color: var(--tinta); flex-wrap: wrap; }
.kpi-fila .kpi { color: var(--teal-texto); font-size: 2.25rem; }
@media (min-width: 761px) {
  .bento--construido > li { grid-column: span 2; }
  .bento--construido > li:nth-child(-n+2) { grid-column: span 3; }
}

/* Servicios: una línea por servicio */
.servicios { list-style: none; margin: var(--e-5) auto 0; padding: 0; max-width: 64rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-5); }
.servicios li { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--e-2); align-items: start; }
.servicios h3 { font-size: 1.1875rem; color: var(--navy); line-height: 1.3; }
.servicios p { color: var(--tinta); }
@media (max-width: 760px) { .servicios { grid-template-columns: 1fr; } }

/* Espacio y texto: títulos sin saltos forzados, párrafos justificados y centrado donde ordena */
.seccion h2, .seccion h3, .cierre h2 { text-wrap: wrap; }
.cierre h2 { max-width: none; }
.seccion h2::after { margin-top: var(--e-1); }
.bento { margin-top: var(--e-4); }
.servicios, .etapas, .temas { margin-top: var(--e-4); }
.seccion__sub { max-width: 64ch; }
.bento--construido { max-width: 76rem; }
.servicios, .etapas { max-width: 76rem; }
.etapas li, .temas li { text-align: center; align-items: center; }
.temas li { grid-template-columns: 1fr; justify-items: center; gap: var(--e-1); }
.temas { max-width: 76rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-fila { justify-content: flex-start; }
@media (max-width: 1000px) { .temas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .temas { grid-template-columns: 1fr; } }

/* Página de páginas web */
.incluye { margin-top: var(--e-3); }
.servicios h3 a { color: inherit; text-decoration: none; }
.servicios h3 a:hover { text-decoration: underline; }
.pagina-web .bloque h2 { text-align: center; }
.pagina-web .bloque h2::after { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--teal); margin: var(--e-1) auto 0; }
.pagina-web .bloque--tinte h2::after { display: none; }
.incluye { max-width: 76rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4) var(--e-4); }
@media (max-width: 1000px) { .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .incluye { grid-template-columns: 1fr; } }

/* Página de páginas web: portada con foto, precio, y el porqué del dominio */
.web-portada { padding-block: var(--e-5); }
.web-portada__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-5); align-items: center; }
.web-portada h1 { max-width: 20ch; }
.web-portada picture { display: block; }
.web-portada img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%); mask-image: linear-gradient(to right, transparent 0, #000 38%); }
@media (max-width: 760px) { .web-portada img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%); } }
.precio { text-align: center; }
.precio .franja__valor { font-size: clamp(2.5rem, 4vw + 0.5rem, 3.75rem); color: var(--teal-texto); }
.precio p { margin: var(--e-1) auto 0; }
.bloque--importa { background: var(--cielo); color: #fff; }
.bloque--importa h2 { color: #fff; text-align: center; margin-bottom: var(--e-1); }
.bloque--importa h2::after { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--teal-vivo); margin: var(--e-1) auto 0; }
.importa__lead { text-align: center; font-size: 1.1875rem; color: #dbe9f1; margin-top: var(--e-2); }
.importa { list-style: none; margin: var(--e-4) auto 0; padding: 0; max-width: 64rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.importa li { background: #ffffff12; border: 1px solid #ffffff26; border-radius: 4px; padding: var(--e-3); display: grid; grid-template-columns: 3rem 1fr; gap: 4px var(--e-2); }
.importa__n { grid-row: 1 / span 2; font: 600 2.5rem/1 var(--fuente-titulos); color: var(--teal-vivo); }
.importa h3 { color: #fff; font-size: 1.1875rem; }
.importa p { color: #dbe9f1; }
@media (max-width: 760px) { .web-portada__fila, .importa { grid-template-columns: 1fr; } }

/* Ofertas destacadas en la landing: se nota que llevan a otra página */
.ofertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); max-width: 76rem; margin: var(--e-4) auto 0; }
.oferta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); padding: var(--e-4); background: var(--tinte); border: 1px solid var(--teal); border-radius: 4px; text-decoration: none; color: var(--navy); }
.oferta .icono { width: 2.25rem; height: 2.25rem; }
.oferta__texto { display: grid; gap: 4px; }
.oferta__texto strong { font: 600 1.625rem/1.2 var(--fuente-titulos); }
.oferta__texto span { color: var(--tinta); }
.oferta .boton { margin-top: auto; }
.oferta:hover { background: #c4ece7; }
@media (max-width: 760px) { .ofertas { grid-template-columns: 1fr; } .oferta { padding: var(--e-3); } .oferta .boton { width: 100%; text-align: center; } }
.bloque.bloque--importa > .contenedor > h2 { color: #fff; }
.importa li { align-content: start; }

/* Foto con un mensaje de cliente encima: el contacto directo se ve en la imagen */
.web-portada__figura { position: relative; }
.burbuja { position: absolute; left: 4%; bottom: 9%; display: flex; align-items: center; gap: var(--e-1); padding: 0.75rem 1rem; background: #fff; border-radius: 14px 14px 14px 2px; box-shadow: 0 10px 28px rgb(18 52 71 / 0.22); max-width: 17rem; color: var(--navy); }
.burbuja .icono { width: 1.75rem; height: 1.75rem; margin: 0; }
.burbuja span { display: grid; line-height: 1.3; font-weight: 600; }
.burbuja small { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-texto); font-weight: 600; }
.boton--wa { display: inline-flex; align-items: center; gap: 0.5rem; }
.boton--wa .icono { width: 1.25rem; height: 1.25rem; margin: 0; }
.botones .boton--wa { margin-left: 0; }
.incluye--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 64rem; }
@media (max-width: 760px) { .incluye--cuatro { grid-template-columns: 1fr; } .burbuja { left: 6%; bottom: 6%; } }
.contacto__lead { color: var(--tinta-2); margin-bottom: 0; }
.bloque--contacto { background: var(--tinte); }
.bloque--contacto .servicios { margin-top: var(--e-4); }
.icono .marca { fill: #25d366; stroke: none; }
.burbuja .icono { width: 2rem; height: 2rem; }

/* Nosotros: la idea que guía el trabajo, su cifra y los principios */
.tesis { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--e-5); align-items: center; max-width: 64rem; margin: var(--e-4) auto 0; padding: var(--e-4); background: var(--suave); border-radius: 4px; }
.tesis__frase { font: 600 clamp(1.5rem, 1.6vw + 1rem, 2rem)/1.25 var(--fuente-titulos); color: var(--navy); }
.tesis__nota { margin-top: var(--e-1); color: var(--tinta-2); font-size: 1.1875rem; }
.tesis__cifra { text-align: center; }
.tesis__cifra .franja__valor { color: var(--teal-texto); font-size: clamp(3rem, 4vw + 1rem, 4.5rem); }
.tesis__cifra p { max-width: 20ch; margin: var(--e-1) auto 0; }
.principios { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 76rem; }
@media (max-width: 1000px) { .principios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .principios { grid-template-columns: 1fr; } .tesis { grid-template-columns: 1fr; padding: var(--e-3); gap: var(--e-3); } }