/* ============================================================
   SIEMBRA · estilos
   Paleta y tipografía del manual de marca
   ============================================================ */

/* ------------------------------------------------------------
   ROQUEFORT
   Es la tipografía de marca, pero es de pago y no está en Google
   Fonts, así que no se puede enlazar libremente.

   Cuando tengan la licencia: copien los archivos a una carpeta
   fuentes/ y descomenten este bloque. El navegador la usará
   automáticamente y no hay que tocar nada más.

@font-face{
  font-family:"Roquefort";
  src:url("fuentes/Roquefort.woff2") format("woff2"),
      url("fuentes/Roquefort.woff")  format("woff");
  font-weight:400 700;
  font-display:swap;
}
   ------------------------------------------------------------ */

:root{
  /* --- colores de marca --- */
  --amarillo:#f8c702;
  --rosa:#ff9cd2;
  --azul:#0061e0;
  --verde:#01a444;
  --rojo:#e52c2c;

  /* --- neutros --- */
  --negro:#020100;
  --negro-2:#131110;
  --crema:#f4ebdf;
  --gris-claro:#b3aca1;
  --gris-oscuro:#55504a;

  /* --- tipografía ---
     Solo las dos fuentes del manual. Mientras Roquefort no esté
     instalada, todo se ve en Roboto, que también es de la marca. */
  --display:"Roquefort","Roboto",system-ui,sans-serif;
  --texto:"Roboto",system-ui,-apple-system,sans-serif;

  /* --- medidas --- */
  --ancho:1240px;
  --radio:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--negro);
  color:var(--crema);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 32px}

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.02em;
}

a{color:inherit}

.rotulo{
  font-family:var(--display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gris-oscuro);
}
.rotulo-amarillo{color:var(--amarillo)}
.rotulo-pie{color:#7b7469;margin-bottom:16px}

/* ============================================================
   BOTONES
   ============================================================ */

.boton{
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 32px;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease;
}
.boton:hover{transform:translateY(-2px)}
.boton:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

.boton-amarillo{background:var(--amarillo);color:var(--negro)}
.boton-crema{background:var(--crema);color:var(--negro)}
.boton-negro{background:var(--negro);color:var(--crema)}
.boton-borde{border-color:var(--crema);color:var(--crema)}
.boton-borde:hover{background:var(--crema);color:var(--negro)}

/* ============================================================
   ENCABEZADO
   ============================================================ */

.encabezado{
  position:sticky;top:0;z-index:60;
  background:var(--negro);
  border-bottom:1px solid #26221e;
}
.barra{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:16px 0;
}
.marca{display:flex;flex-direction:column;gap:7px;text-decoration:none}
.marca img{height:26px;display:block}
.marca-lema{
  font-family:var(--display);font-weight:700;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amarillo);
}

.menu{display:flex;gap:34px;list-style:none}
.menu a{
  text-decoration:none;font-size:15px;
  padding-bottom:3px;border-bottom:2px solid transparent;
}
.menu a:hover{border-bottom-color:var(--amarillo)}

/* ============================================================
   PORTADA
   ============================================================ */

.portada{padding:80px 0 100px}

.portada-rejilla{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:60px;align-items:center;
}

.portada h1{
  font-size:clamp(46px,7.4vw,96px);
  margin:24px 0 30px;
  max-width:15ch;
}
.portada h1 em{font-style:normal;color:var(--amarillo)}

.bajada{
  font-size:clamp(17px,2vw,21px);
  color:var(--gris-claro);
  max-width:46ch;
  margin-bottom:42px;
}
.acciones{display:flex;flex-wrap:wrap;gap:14px}

/* El isotipo grande de la portada: fondo claro, figura en negro */
.portada-simbolo{display:flex;justify-content:center}
.burbuja{
  width:min(100%,300px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--crema);
  color:var(--negro);
  display:grid;place-items:center;
}
.burbuja svg{width:34%;height:auto;display:block}

/* ============================================================
   SECCIONES
   ============================================================ */

.seccion{padding:100px 0}
.seccion-negra{background:var(--negro-2)}
.seccion-crema{background:var(--crema);color:var(--negro)}

.cabecera-seccion{max-width:58ch;margin-bottom:58px}
.titulo-seccion{font-size:clamp(32px,4.8vw,56px);margin:14px 0 16px}
.cabecera-seccion p{font-size:18px}
.seccion-negra .cabecera-seccion p{color:var(--gris-claro)}
.seccion-crema .cabecera-seccion p{color:var(--gris-oscuro)}

/* ============================================================
   SERVICIOS
   ============================================================ */

/* Dos columnas fijas: cuatro servicios quedan en 2 filas de 2 */
.servicios{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.servicio{
  border-radius:var(--radio);
  padding:30px 30px 36px;
  display:flex;flex-direction:column;
  min-height:360px;
}

/* Ícono de cada servicio: círculo de color con su dibujo propio.
   Si más adelante diseñan íconos nuevos, reemplazar el <symbol>
   correspondiente al inicio del HTML, o usar
   <img src="imagenes/icono-diagnostico.svg" alt=""> */
.icono{
  width:72px;height:72px;
  border-radius:50%;
  display:grid;place-items:center;
  margin-bottom:auto;
}
.icono svg{width:46%;height:auto;display:block}
.icono img{width:46%;height:46%;object-fit:contain;display:block}

.servicio h3{font-size:clamp(23px,2.5vw,28px);margin:26px 0 10px}
.servicio p{font-size:16px;margin-bottom:26px}
.servicio .boton{align-self:flex-start}

.servicio.s1{background:var(--amarillo);color:var(--negro)}
.servicio.s1 .icono{background:var(--negro);color:var(--amarillo)}

.servicio.s2{background:var(--azul);color:var(--crema)}
.servicio.s2 .icono{background:var(--amarillo);color:var(--azul)}

.servicio.s3{background:var(--rosa);color:var(--negro)}
.servicio.s3 .icono{background:var(--rojo);color:var(--rosa)}

.servicio.s4{background:var(--verde);color:var(--crema)}
.servicio.s4 .icono{background:var(--rosa);color:var(--verde)}

/* ============================================================
   NOSOTRAS
   ============================================================ */

/* Foto conjunta del equipo, ancha, sobre las dos presentaciones */
.foto-equipo{
  aspect-ratio:21/9;
  border-radius:var(--radio);
  background:var(--azul);color:var(--crema);
  display:grid;place-items:center;
  text-align:center;padding:24px;
  margin-bottom:52px;
  overflow:hidden;
}
.foto-equipo span{
  font-family:var(--display);font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
}
/* Cuando tengan la foto real, va dentro del div como <img> y esto la ajusta */
.foto-equipo img{width:100%;height:100%;object-fit:cover;display:block}

.personas{display:grid;grid-template-columns:repeat(2,1fr);gap:48px}

.datos-persona h3{font-size:26px;margin-bottom:4px}
.cargo{
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);margin-bottom:14px;
}
.datos-persona p{font-size:16.5px;color:var(--gris-oscuro)}

/* ============================================================
   LLAMADA FINAL
   ============================================================ */

.llamada{background:var(--amarillo);color:var(--negro);padding:110px 0;text-align:center}
.llamada h2{font-size:clamp(32px,5.6vw,66px);text-transform:uppercase;margin-bottom:34px}

/* ============================================================
   CONTACTO
   ============================================================ */

.contacto-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}

.datos dt{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris-claro);margin-bottom:6px;
}
.datos dd{margin-bottom:24px;font-size:17.5px}
.datos a{text-decoration:none;border-bottom:2px solid var(--amarillo)}
.datos a:hover{color:var(--amarillo)}

form{display:grid;gap:18px}
label{display:grid;gap:7px;font-size:13.5px;color:var(--gris-claro)}
input,textarea,select{
  font:inherit;font-size:16px;
  padding:14px 16px;border-radius:10px;
  border:2px solid #322d28;background:var(--negro-2);color:var(--crema);
}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none;border-color:var(--amarillo);
}
textarea{resize:vertical;min-height:120px}

.consentimiento{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13px;line-height:1.5;color:var(--gris-claro);
}
.consentimiento input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;padding:0}

/* ============================================================
   PIE
   ============================================================ */

.pie{background:var(--negro-2);padding:74px 0 38px}
.pie-rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:52px;margin-bottom:54px}
.pie img{height:28px;display:block;margin-bottom:20px}
.pie-lema{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.3;max-width:20ch;color:var(--gris-claro)}
.pie dt{
  font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#7b7469;margin-bottom:6px;
}
.pie dd{margin-bottom:20px;font-size:16px}
.pie a{text-decoration:none}
.pie a:hover{color:var(--amarillo)}
.pie ul{list-style:none;display:grid;gap:10px}
.pie ul a{font-family:var(--display);font-weight:700;font-size:18px}

.pie-abajo{
  border-top:1px solid #2a2622;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:13.5px;color:#7b7469;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:940px){
  .menu{display:none}
  .envoltura{padding:0 22px}
  .servicios{grid-template-columns:1fr}
  .personas{grid-template-columns:1fr;gap:36px}
  .foto-equipo{aspect-ratio:4/3;margin-bottom:38px}
  .marca-lema{font-size:9px;letter-spacing:.2em}
  .seccion{padding:68px 0}
  .portada{padding:48px 0 72px}
  .portada-rejilla{grid-template-columns:1fr;gap:48px}
  .portada-simbolo{order:-1;justify-content:flex-start}
  .burbuja{width:150px}
  .contacto-rejilla{grid-template-columns:1fr;gap:44px}
  .pie-rejilla{grid-template-columns:1fr;gap:36px}
  .llamada{padding:76px 0}
}