/* Coruma Consulting — corumaconsulting.com */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/archivo-latin.woff2") format("woff2");
}
/* Archivo no tiene griego ni cirilico: esas letras salen de Roboto Flex (tambien con eje de
   anchura) bajo el MISMO nombre; el navegador elige por caracter (unicode-range). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;   /* IGUAL que la cara latina: si difieren, el navegador las trata como caras rivales y el latin cae a la fuente del sistema */
  font-display: swap;
  src: url("/assets/rflex-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;   /* IGUAL que la cara latina: si difieren, el navegador las trata como caras rivales y el latin cae a la fuente del sistema */
  font-display: swap;
  src: url("/assets/rflex-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --marino: #0e3a70;
  --senal: #1c90cf;
  --pizarra: #2e3a46;
  --tenue: #5a6875;
  --bruma: #eef2f6;
  --blanco: #ffffff;
  --filete: #c9d3dd;
  --error: #b42318;

  --ancho: 72rem;
  --lado: clamp(1rem, 4vw, 3rem);
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--pizarra);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--marino); text-underline-offset: .2em; }
a:hover { color: var(--senal); }
:focus-visible { outline: 3px solid var(--senal); outline-offset: 3px; border-radius: 2px; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }
.salto { position: absolute; left: -999px; }
.salto:focus { left: var(--lado); top: var(--s2); background: var(--blanco); padding: var(--s1) var(--s2); z-index: 10; }

/* Cabecera */
.cabecera { border-bottom: 1px solid var(--filete); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 4.5rem; }
.marca { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--marino); }
.marca svg { width: 2.6rem; height: auto; }
.marca-nombre { display: flex; flex-direction: column; line-height: 1.05; }
.marca-nombre b { font-weight: 800; font-stretch: 118%; font-size: 1.35rem; letter-spacing: .04em; }
.marca-nombre span { color: var(--tenue); font-size: .78rem; font-stretch: 100%; }
.menu { display: flex; align-items: center; gap: var(--s3); font-size: .95rem; }
.menu a { text-decoration: none; color: var(--pizarra); }
.menu a:hover { color: var(--senal); }
/* Selector de idioma: <details> nativo, sin JS */
.idiomas { position: relative; }
.idiomas summary {
  list-style: none; cursor: pointer; color: var(--marino);
  border: 1px solid var(--filete); padding: .2rem .7rem; border-radius: 999px;
}
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas summary::after { content: ""; display: inline-block; margin-left: .45rem; width: .4rem; height: .4rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.2rem) rotate(45deg); }
.idiomas[open] summary::after { transform: translateY(.05rem) rotate(-135deg); }
.idiomas ul {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 5; margin: 0; padding: .35rem 0; list-style: none;
  background: var(--blanco); border: 1px solid var(--filete); border-radius: 4px; min-width: 10rem;
  box-shadow: 0 6px 18px rgba(14, 58, 112, .12);
}
.idiomas li a { display: block; padding: .4rem .9rem; text-decoration: none; color: var(--pizarra); }
.idiomas li a:hover, .idiomas li a:focus-visible { background: var(--bruma); color: var(--marino); }
.idiomas li a[aria-current] { color: var(--marino); font-weight: 650; }
.menu .secciones { display: contents; }
@media (max-width: 40rem) { .menu .secciones { display: none; } }

/* Portada: el hexagono del logo, grande, con su linea como horizonte */
.portada { background: var(--bruma); overflow: hidden; }
.portada .envoltura { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: var(--s4); padding-top: var(--s6); padding-bottom: var(--s6); }
.portada h1 {
  margin: 0 0 var(--s3);
  color: var(--marino);
  font-weight: 750;
  font-stretch: 112%;
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  max-width: 14ch;
}
.portada p { margin: 0 0 var(--s4); font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 38rem; }
.hexagono { width: 100%; max-width: 26rem; justify-self: end; }
.hexagono .borde { fill: none; stroke: var(--marino); stroke-width: 5; stroke-linejoin: miter; }
.hexagono .horizonte { stroke: var(--senal); stroke-width: 5; stroke-linecap: butt; }
@media (prefers-reduced-motion: no-preference) {
  .hexagono .horizonte { stroke-dasharray: 220; stroke-dashoffset: 220; animation: horizonte 1.4s cubic-bezier(.6,0,.2,1) .35s forwards; }
}
@keyframes horizonte { to { stroke-dashoffset: 0; } }
@media (max-width: 48rem) {
  .portada .envoltura { grid-template-columns: 1fr; padding-top: var(--s5); padding-bottom: var(--s5); }
  .hexagono { order: -1; max-width: 9rem; justify-self: start; }
}

.boton {
  display: inline-block;
  background: var(--marino);
  color: var(--blanco);
  text-decoration: none;
  font-weight: 600;
  padding: .85rem 1.5rem;
  border: 0;
  border-radius: 3px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.boton:hover { background: var(--senal); color: var(--blanco); }

/* Secciones */
.seccion { padding: var(--s6) 0; }
.seccion h2 {
  margin: 0 0 var(--s2);
  color: var(--marino);
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
}
.seccion .entrada { margin: 0 0 var(--s5); max-width: 40rem; color: var(--tenue); font-size: 1.1rem; }

/* Areas de practica: lista con filetes, sin tarjetas */
.areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
.areas li { border-top: 2px solid var(--marino); padding: var(--s3) 0 var(--s4); }
.areas h3 { margin: 0 0 .35rem; font-size: 1.3rem; font-stretch: 108%; font-weight: 700; color: var(--marino); }
.areas .lema { margin: 0 0 var(--s2); color: var(--pizarra); font-weight: 500; }
.areas ul { margin: 0; padding-left: 1.1rem; color: var(--tenue); }
.areas ul li { border: 0; padding: .15rem 0; }
.areas ul li::marker { color: var(--senal); }
@media (max-width: 48rem) { .areas { grid-template-columns: 1fr; } }

/* Franja: voz e IA */
.franja { background: var(--marino); color: #dbe6f2; padding: var(--s6) 0; }
.franja .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.franja h2 { margin: 0; color: var(--blanco); font-stretch: 115%; font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.12; }
.franja h2 em { font-style: normal; color: #7cc4ea; }
.franja p { margin: 0 0 var(--s2); max-width: 36rem; }
@media (max-width: 48rem) { .franja .envoltura { grid-template-columns: 1fr; gap: var(--s3); } }

/* Metodo: si es una secuencia, se numera */
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.pasos li { counter-increment: paso; }
.pasos li::before { content: counter(paso); display: block; font-stretch: 125%; font-weight: 300; font-size: 3rem; line-height: 1; color: var(--senal); margin-bottom: var(--s2); }
.pasos h3 { margin: 0 0 .4rem; color: var(--marino); font-size: 1.2rem; font-stretch: 108%; }
.pasos p { margin: 0; color: var(--tenue); }
@media (max-width: 48rem) { .pasos { grid-template-columns: 1fr; } }

/* Contacto */
.contacto { background: var(--bruma); }
.contacto .rejilla { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--s5); }
@media (max-width: 48rem) { .contacto .rejilla { grid-template-columns: 1fr; } }
form { display: grid; gap: var(--s3); }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 600; color: var(--marino); font-size: .95rem; }
.campo .opcional { font-weight: 400; color: var(--tenue); }
input, textarea {
  width: 100%;
  font: inherit;
  color: var(--pizarra);
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-radius: 3px;
  padding: .7rem .8rem;
}
input:focus, textarea:focus { outline: 2px solid var(--senal); outline-offset: 0; border-color: var(--senal); }
textarea { min-height: 9rem; resize: vertical; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 40rem) { .dos { grid-template-columns: 1fr; } }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-form { margin: 0; font-size: .9rem; color: var(--tenue); }
.estado { padding: var(--s2); border-left: 4px solid var(--senal); background: var(--blanco); margin: 0 0 var(--s3); }
.estado.mal { border-left-color: var(--error); }
.estado[hidden] { display: none; }
.datos h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--marino); }
.datos p { margin: 0 0 var(--s3); }
.datos address { font-style: normal; }

/* Pie */
.pie { border-top: 1px solid var(--filete); padding: var(--s4) 0; font-size: .9rem; color: var(--tenue); }
.pie .envoltura { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); }
.pie p { margin: 0; }
.pie a { color: var(--tenue); }
.enlaces-pie { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Paginas legales */
.legal { padding: var(--s5) 0 var(--s6); }
.legal .envoltura > * { max-width: 46rem; }
.legal h1 { color: var(--marino); font-stretch: 112%; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 var(--s4); line-height: 1.1; }
.legal h2 { color: var(--marino); font-size: 1.25rem; margin: var(--s4) 0 var(--s1); font-stretch: 108%; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem var(--s3); margin: 0; }
.legal dt { font-weight: 600; color: var(--marino); }
.legal dd { margin: 0; }
@media (max-width: 40rem) { .legal dl { grid-template-columns: 1fr; } .legal dd { margin-bottom: var(--s1); } }