/* ==========================================================================
   dtcom.es — hoja de la portada moderna
   Independiente de Nictorys: esta página no carga bootstrap, ni style.css, ni
   ninguna de las hojas de componentes. Todo lo que necesita está aquí.
   ========================================================================== */

@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/web/mona-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/web/mona-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --tinta:  #0c1b26;
  --cuerpo: #46525f;
  --tenue:  #6b7681;
  --azul:   #1a7fa5;
  --azul-claro: #7fd0ee;
  --azul-hondo: #0f5d7b;
  --tinte:  #eef6fa;
  --tinte2: #dce9ef;
  --suave:  #f4f8fa;
  --radio-caja: 26px;
  --radio-tarjeta: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--suave);
  color: var(--tinta);
  font-family: 'Mona Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.025em; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--tinta); }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Texto que existe para el lector de pantalla pero no se pinta. */
.sr-solo, .sr-solo-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.salta-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinta); color: #fff; padding: 14px 22px; border-radius: 0 0 12px 0;
}
.salta-al-contenido:focus { left: 0; color: #fff; }

.caja { max-width: 1440px; margin: 0 auto; }

/* --- Botones ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 8px 8px 8px 30px;
  border: 0; border-radius: 60px;
  font: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: background-color .18s ease, color .18s ease;
}
.btn__flecha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
}
.btn__flecha svg { width: 16px; height: 16px; }

.btn--claro { background: #fff; color: var(--tinta); }
.btn--claro .btn__flecha { background: var(--azul); }
.btn--claro:hover { background: var(--tinte); color: var(--tinta); }

.btn--tinta { background: var(--tinta); color: #fff; }
.btn--tinta .btn__flecha { background: var(--azul); }
.btn--tinta:hover { background: #14303f; color: #fff; }

.btn--azul { background: var(--azul); color: #fff; }
.btn--azul .btn__flecha { background: var(--azul-hondo); }
.btn--azul:hover { background: var(--azul-hondo); color: #fff; }

.btn--fantasma {
  background: rgba(255,255,255,.13); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.btn--fantasma .btn__flecha { background: rgba(255,255,255,.22); }
.btn--fantasma:hover { background: rgba(255,255,255,.22); color: #fff; }

.btn--tel {
  padding: 0 28px; font-size: 20px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); color: #fff;
}
.btn--tel:hover { background: rgba(255,255,255,.12); color: #fff; }

/* --- Etiqueta-píldora ---------------------------------------------------- */

.pildora {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: 50px;
  border: 1px solid var(--tinte2); background: #fff;
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.pildora svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* --- Cabecera ------------------------------------------------------------ */

.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: #fff; margin: 20px 24px 0; padding: 14px 16px 14px 30px; border-radius: 70px;
}
.marca { display: flex; align-items: center; gap: 11px; font-size: 24px; font-weight: 700; color: var(--tinta); }
.marca img { height: 34px; width: auto; }
.menu { display: flex; align-items: center; gap: 28px; font-size: 16px; font-weight: 500; }
.menu a { color: var(--tinta); }
.menu a:hover, .menu [aria-current="page"] { color: var(--azul); }
.menu [aria-current="page"] { font-weight: 600; }
.cabecera__acciones { display: flex; align-items: center; gap: 16px; }
.cabecera__tel { display: flex; align-items: center; min-height: 44px; font-size: 19px; font-weight: 700; color: var(--tinta); }
.hamburguesa { display: none; }

/* --- Portada ------------------------------------------------------------- */

.portada {
  position: relative; margin: 20px 24px 0; border-radius: var(--radio-caja);
  overflow: hidden; background: var(--tinta); isolation: isolate;
}
.portada__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .34; z-index: -1;
}
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(12,27,38,.94) 0%, rgba(12,27,38,.72) 55%, rgba(12,27,38,.5) 100%);
}
.portada__interior { padding: 92px 78px; max-width: 1010px; }
.portada h1 { font-size: 74px; color: #fff; }
.portada h1 span { color: var(--azul-claro); }
.portada__entrada { margin-top: 24px; font-size: 19px; color: rgba(255,255,255,.84); max-width: 56ch; }
.portada__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* --- Secciones ----------------------------------------------------------- */

.seccion { margin: 24px; padding: 84px 78px; border-radius: var(--radio-caja); }
.seccion--tinte { background: var(--tinte); }
.seccion--blanca { background: #fff; }

.seccion__encabezado {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap;
}
.seccion__encabezado h2 { font-size: 48px; margin-top: 22px; max-width: 19ch; }
.seccion__encabezado h2 span { color: var(--azul); }

.dos-columnas { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; padding-top: 50px; }
.figura { position: relative; align-self: start; }
.figura img { border-radius: 16px; width: 100%; }
.figura__nota {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  background: rgba(12,27,38,.9); border-radius: var(--radio-tarjeta);
  padding: 22px 24px; color: #fff;
}
.figura__nota strong { display: block; font-size: 19px; margin-bottom: 6px; }
.figura__nota span { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.8); }

.intro { font-size: 17px; line-height: 1.68; color: var(--cuerpo); margin-bottom: 18px; }
.intro strong { color: var(--tinta); }

.tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.tarjeta {
  background: #fff; border-radius: var(--radio-tarjeta); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 11px;
}
.tarjeta__titulo { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; line-height: 1.28; }
.tarjeta__marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--tinte); flex: 0 0 auto;
}
.tarjeta__marca svg { width: 18px; height: 18px; }
.tarjeta p { font-size: 15px; line-height: 1.62; color: var(--cuerpo); }

/* --- Preguntas frecuentes ------------------------------------------------ */

.faq { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 56px; align-items: start; }
.faq__lista { display: flex; flex-direction: column; gap: 12px; background: var(--suave); padding: 18px; border-radius: 20px; }
.faq__item { background: #fff; border-radius: var(--radio-tarjeta); }
.faq__boton {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: none; border: 0; padding: 22px 26px; text-align: left; cursor: pointer;
  font: inherit; font-size: 18px; font-weight: 600; color: var(--tinta); min-height: 44px;
}
.faq__boton svg { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .2s ease; }
.faq__boton[aria-expanded="true"] svg { transform: rotate(45deg); stroke: var(--azul); }
.faq__panel { padding: 0 26px 24px; font-size: 15.5px; line-height: 1.66; color: var(--cuerpo); max-width: 70ch; }
.faq__panel[hidden] { display: none; }

/* --- Formulario ---------------------------------------------------------- */

.formulario { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.campo--ancho { grid-column: 1 / -1; }
.formulario label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 7px; }
.formulario input, .formulario select, .formulario textarea {
  width: 100%; min-height: 54px; padding: 14px 18px;
  border: 1px solid #7b95a3; border-radius: 12px; background: #fff;
  font: inherit; font-size: 16px; color: var(--tinta);
}
.formulario textarea { min-height: 128px; resize: vertical; }
.formulario select {
  appearance: none; -webkit-appearance: none; padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2346525f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.formulario select:invalid { color: var(--tenue); }
.consentimiento { position: relative; padding-left: 34px; font-size: 14.5px; color: var(--cuerpo); font-weight: 400; }
.consentimiento input { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; min-height: 0; margin: 0; }
.trampa { position: absolute; left: -9999px; }

.aviso { border-radius: 12px; padding: 16px 20px; color: #fff; font-size: 16px; }
.aviso[hidden] { display: none; }
.aviso--ok { background: #0a6e0a; }
.aviso--error { background: #a4161a; }
.aviso a { color: #fff; text-decoration: underline; }
.cargando { display: none; }
.enviando .cargando { display: inline-flex; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* --- Banda de cierre y pie ----------------------------------------------- */

.cierre {
  margin: 0 24px; border-radius: var(--radio-caja); overflow: hidden; background: var(--azul);
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
}
.cierre__texto { padding: 56px 56px 56px 78px; display: flex; flex-direction: column; justify-content: center; }
.cierre h2 { font-size: 46px; color: #fff; max-width: 17ch; }
.cierre p { margin: 16px 0 26px; font-size: 16.5px; color: rgba(255,255,255,.85); max-width: 46ch; }
.cierre__botones { display: flex; flex-wrap: wrap; gap: 14px; }
.cierre__foto { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }

.pie {
  margin: 24px 24px 24px; padding: 68px 78px 32px;
  background: var(--tinta); border-radius: var(--radio-caja); color: #fff;
}
.pie__columnas { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; }
.pie h3 { font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.pie p, .pie li { font-size: 15px; color: rgba(255,255,255,.64); }
.pie li + li { margin-top: 11px; }
.pie a { color: rgba(255,255,255,.64); display: inline-flex; align-items: center; min-height: 44px; }
.pie a:hover { color: #fff; }
.pie__tel { font-size: 24px; font-weight: 700; color: #fff !important; }
.pie__legal {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;
  font-size: 14px; color: rgba(255,255,255,.46);
}

/* --- Adaptación ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .seccion { padding: 64px 40px; }
  .portada__interior { padding: 72px 40px; }
  .portada h1 { font-size: 56px; }
  .seccion__encabezado h2 { font-size: 38px; }
  .cierre__texto { padding: 48px 40px; }
  .cierre h2 { font-size: 38px; }
  .pie { padding: 56px 40px 28px; }
  .pie__columnas { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px; }
}

@media (max-width: 900px) {
  .menu { display: none; }
  .cabecera__tel { display: none; }
  .hamburguesa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: var(--tinte); cursor: pointer;
  }
  .hamburguesa svg { width: 20px; height: 20px; }
  .menu--abierto {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 24px; right: 24px; top: 96px; z-index: 40;
    background: #fff; border-radius: 22px; padding: 10px; box-shadow: 0 18px 40px rgba(12,27,38,.16);
  }
  .menu--abierto a { padding: 14px 18px; border-radius: 12px; min-height: 48px; display: flex; align-items: center; }
  .menu--abierto a:hover { background: var(--tinte); }
  .dos-columnas, .faq, .cierre, .formulario { grid-template-columns: minmax(0,1fr); }
  .faq { gap: 32px; }
  .cierre__foto { min-height: 220px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .cabecera { margin: 12px; padding: 10px 10px 10px 20px; }
  .marca { font-size: 20px; }
  .marca img { height: 28px; }
  .portada, .cierre { margin: 12px; }
  .seccion { margin: 12px; padding: 44px 22px; border-radius: 22px; }
  .portada__interior { padding: 40px 24px; }
  .portada h1 { font-size: 40px; }
  .portada__entrada { font-size: 16px; }
  .seccion__encabezado h2 { font-size: 29px; }
  .seccion__encabezado { align-items: flex-start; gap: 26px; }
  .tarjetas { grid-template-columns: minmax(0,1fr); }
  .cierre__texto { padding: 36px 24px; }
  .cierre h2 { font-size: 28px; }
  .pie { margin: 12px; padding: 44px 24px 24px; border-radius: 22px; }
  .pie__columnas { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .btn { width: 100%; justify-content: space-between; }
  /* A esta anchura el texto del pie es más alto que la propia foto, así que
     superpuesto se sale por arriba y pisa lo que hay encima. Debajo, en flujo
     normal, y con las esquinas de arriba rectas para que siga leyéndose
     pegado a la imagen. */
  .figura__nota {
    position: static;
    margin-top: -14px;
    padding: 20px 20px;
    border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
  }
  .figura img { border-radius: 16px 16px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Páginas interiores
   ========================================================================== */

.encabezado-pagina {
  position: relative; margin: 20px 24px 0; padding: 76px 78px;
  border-radius: var(--radio-caja); overflow: hidden;
  background: var(--tinta); color: #fff; isolation: isolate;
}
.encabezado-pagina__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .3; z-index: -1;
}
.encabezado-pagina::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(12,27,38,.95) 0%, rgba(12,27,38,.75) 100%);
}
.encabezado-pagina h1 { font-size: 56px; }
.encabezado-pagina .miga {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 16px; font-size: 15px; color: rgba(255,255,255,.7);
}
.encabezado-pagina .miga a { color: rgba(255,255,255,.7); }
.encabezado-pagina .miga a:hover { color: #fff; }

/* --- Texto corrido -------------------------------------------------------- */

.prosa { max-width: 74ch; }
.prosa > * + * { margin-top: 20px; }
.prosa h2 { font-size: 32px; margin-top: 52px; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-size: 22px; margin-top: 38px; }
.prosa p, .prosa li { font-size: 16.5px; line-height: 1.7; color: var(--cuerpo); }
.prosa strong { color: var(--tinta); }
.prosa ul { display: flex; flex-direction: column; gap: 10px; }
.prosa ul li { position: relative; padding-left: 26px; }
.prosa ul li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--azul);
}
.prosa a { text-decoration: underline; text-underline-offset: 3px; }
.prosa dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; }
.prosa dt { font-weight: 600; }
.prosa dd { margin: 0; color: var(--cuerpo); }

/* --- Catálogo de servicios ------------------------------------------------ */

.area { scroll-margin-top: 24px; }
.area + .area { margin-top: 18px; }
.area__cabeza { display: flex; align-items: flex-start; gap: 16px; }
.area__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: var(--tinte); color: var(--azul); font-weight: 700; font-size: 17px;
}
.area h2 { font-size: 30px; }
.area > p { margin-top: 14px; font-size: 16.5px; line-height: 1.68; color: var(--cuerpo); max-width: 70ch; }
.area__lista {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 34px;
  margin-top: 22px;
}
.area__lista li {
  position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.55; color: var(--cuerpo);
}
.area__lista li::before {
  content: ""; position: absolute; left: 3px; top: 9px;
  width: 8px; height: 2px; border-radius: 2px; background: var(--azul);
}

.indice { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.indice a {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 12px 20px; border-radius: 14px; background: #fff; color: var(--tinta);
  font-size: 16px; font-weight: 600;
}
.indice a:hover { background: var(--tinte); }
.indice span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--tinte);
  color: var(--azul); font-size: 14px; flex: 0 0 auto;
}

/* --- Pasos ---------------------------------------------------------------- */

.pasos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.paso { background: #fff; border-radius: var(--radio-tarjeta); padding: 28px 26px; }
.paso h3 { font-size: 20px; margin-bottom: 10px; }
.paso p { font-size: 15px; line-height: 1.62; color: var(--cuerpo); }

@media (max-width: 1100px) {
  .encabezado-pagina { padding: 56px 40px; }
  .encabezado-pagina h1 { font-size: 42px; }
  .pasos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .indice { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .area__lista { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 640px) {
  .encabezado-pagina { margin: 12px; padding: 40px 24px; border-radius: 22px; }
  .encabezado-pagina h1 { font-size: 32px; }
  .prosa h2 { font-size: 25px; margin-top: 38px; }
  .prosa dl { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .prosa dd { margin-bottom: 12px; }
  .pasos, .indice { grid-template-columns: minmax(0,1fr); }
  .area h2 { font-size: 24px; }
}