@font-face { font-family: "Outfit"; src: url("../fuentes/outfit-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Outfit"; src: url("../fuentes/outfit-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "DM Sans"; src: url("../fuentes/dm-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "DM Sans"; src: url("../fuentes/dm-sans-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF; }

:root {
  --petroleo: #13576B;
  --amarillo: #F2B705;
  --amarillo-claro: #FFC933;
  --negro: #0B1E25;
  --hueso: #E6EEF0;
  --petroleo-hondo: #0E4252;
  --pizarra: #3F5560;
  --oscuro-superficie: #14303A;
  --oscuro-gris: #C2D3D8;
  --oscuro-linea: #24434F;
  --oscuro-borde: #3F5560;
  --oscuro-acento: #FFC933;
  --oscuro-acento-hover: #FFDA6B;
  --sombra: 11 30 37;
  --foco: 19 87 107;
  --fondo: #FFFFFF;
  --superficie: #EEF3F4;
  --tinta: var(--negro);
  --gris: var(--pizarra);
  --linea: var(--hueso);
  --borde: #C3D0D5;
  --borde-campo: #6B808A;
  --acento: var(--petroleo);
  --acento-hover: var(--petroleo-hondo);
  --boton: var(--amarillo);
  --boton-hover: var(--amarillo-claro);
  --sobre-boton: var(--negro);
  --error: #A8321E;
  --alto-cabecera: 72px;
  --ancho: 1280px;
  --margen: max(24px, calc((100cqw - var(--ancho)) / 2 + 24px));
  --display: "Outfit", system-ui, sans-serif;
  --texto: "DM Sans", system-ui, sans-serif;
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: light;
}

.pie, .portada, .servicios-cabeza, .panel-petroleo, .panel-negro, .compara .nos, .compara .titulo-nos, .precios, .problema .hacemos, .gracias, .texto-largo .nota, .diag-lado, .despues, .no-encontrada {
  --fondo: var(--negro);
  --superficie: var(--oscuro-superficie);
  --tinta: var(--hueso);
  --gris: var(--oscuro-gris);
  --linea: var(--oscuro-linea);
  --borde: var(--oscuro-borde);
  --acento: var(--oscuro-acento);
  --acento-hover: var(--oscuro-acento-hover);
  color: var(--tinta);
}

.garantias, .panel-amarillo, .cierre {
  --tinta: var(--negro);
  --gris: var(--negro);
  --acento: var(--negro);
  --boton: var(--negro);
  --boton-hover: var(--petroleo-hondo);
  --sobre-boton: var(--hueso);
  color: var(--tinta);
}

.recibo, .panel-hueso {
  --tinta: var(--negro);
  --gris: var(--pizarra);
  --borde: var(--borde-campo);
  --acento: var(--petroleo);
  color: var(--tinta);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 18px/1.6 var(--texto); }
main { container-type: inline-size; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento-hover); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(34px, 4.6vw, 68px); }
h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: 24px; }
.salto { position: absolute; left: -999px; top: 8px; background: var(--amarillo); color: var(--negro); padding: 10px 16px; z-index: 30; }
.salto:focus { left: 16px; color: var(--negro); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.punto { color: var(--amarillo); }
.marcador { background: var(--superficie); color: var(--acento); border: 1px dashed var(--acento); padding: 0 5px; font-weight: 600; font-size: 0.92em; }
.ceja { display: inline-flex; align-items: center; gap: 8px; color: var(--acento); font-weight: 600; font-size: 16px; }

.logo { font: 800 26px/1 var(--display); letter-spacing: -0.05em; color: var(--tinta); text-decoration: none; }
.logo:hover { color: var(--tinta); }
.logo span { color: var(--acento); }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 30px; font: 700 17px/1 var(--texto); text-decoration: none; white-space: nowrap; border: 2px solid transparent; cursor: pointer; transition: background-color .25s var(--curva), color .25s var(--curva), transform .25s var(--curva); }
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(1px) scale(0.98); }
.boton-primario { background: var(--boton); color: var(--sobre-boton); }
.boton-primario:hover { background: var(--boton-hover); color: var(--sobre-boton); }
.boton-secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton-secundario:hover { background: var(--tinta); color: var(--fondo); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

.cabecera { position: sticky; top: 0; z-index: 20; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.cabecera .barra { display: flex; align-items: center; gap: 24px; height: var(--alto-cabecera); }
.cabecera .menu { display: flex; gap: 8px; margin: 0 auto; padding: 0; list-style: none; }
.cabecera .menu a { display: block; padding: 10px 12px; color: var(--tinta); text-decoration: none; font-weight: 500; font-size: 15px; }
.cabecera .menu a:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 6px; }
.cabecera .acciones { display: flex; gap: 8px; align-items: center; }
.cabecera .wa { display: grid; place-items: center; width: 44px; height: 44px; color: var(--tinta); }
.cabecera .wa:hover { color: var(--acento); }
.cabecera .wa .ico { width: 24px; height: 24px; }
.cabecera .boton { min-height: 46px; padding-inline: 20px; font-size: 15px; }
.cabecera .movil { display: none; }
.cabecera .movil summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; }
.cabecera .movil summary::-webkit-details-marker { display: none; }
.cabecera .movil summary .ico { width: 24px; height: 24px; }
.cabecera .movil ul { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 8px 16px 16px; list-style: none; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.cabecera .movil li a { display: block; padding: 14px 0; color: var(--tinta); text-decoration: none; font-weight: 600; }
.cabecera .movil li a:hover { color: var(--acento); }

.portada { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: calc(100dvh - var(--alto-cabecera)); background: var(--negro); }
.portada img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; animation: acercar 1.6s var(--curva) both; }
.portada::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(var(--sombra) / 0.97) 0%, rgb(var(--sombra) / 0.88) 34%, rgb(var(--sombra) / 0.2) 66%, rgb(var(--sombra) / 0) 100%); }
.portada-texto { width: 100%; padding-block: 120px 56px; padding-inline: var(--margen); }
.portada .ceja { margin-bottom: 20px; color: var(--tinta); }
.portada h1 { font-size: clamp(44px, 5.8vw, 88px); line-height: 0.98; letter-spacing: -0.05em; max-width: 15em; animation: subir .9s var(--curva) both; }
.portada h1 em { display: block; font-style: normal; }
.portada h1 strong { font-weight: 800; color: var(--amarillo); }
.portada-pie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-top: 32px; animation: subir .9s .12s var(--curva) both; }
.portada .bajada { max-width: 40ch; font-size: 21px; line-height: 1.4; }
.portada-giro img { object-position: 50% 16%; }
.portada-giro h1 { font-size: clamp(36px, 5.4vw, 80px); line-height: 1.02; max-width: 17em; }
.portada .ceja { animation: subir .9s var(--curva) both; }
@media (min-width: 768px) and (max-width: 1023px) {
  .portada-giro { display: block; min-height: 0; }
  .portada-giro::after { display: none; }
  .portada-giro img { position: static; height: auto; aspect-ratio: 3 / 2; }
  .portada-giro .portada-texto { padding-block: 32px 40px; }
}
@media (min-width: 1024px) {
  .portada-giro { align-items: center; }
  .portada-giro::after { display: none; }
  .portada-giro img { inset: 0 0 0 50%; z-index: 0; width: 50%; object-position: 50% 28%; }
  .portada-giro .portada-texto { width: 50%; padding-block: 48px; padding-inline: var(--margen) 64px; }
  .portada-giro h1 { font-size: clamp(36px, 3.7vw, 64px); }
  .portada-giro .portada-pie { display: block; }
  .portada-giro .botones { margin-top: 24px; }
}
@keyframes subir { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes acercar { from { scale: 1.08; } to { scale: 1; } }

.garantias { background: var(--amarillo); padding-block: 36px; }
.garantias ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0; padding: 0; list-style: none; }
.garantias li { display: flex; gap: 14px; }
.garantias li > .ico { width: 30px; height: 30px; }
.garantias strong { display: block; font: 700 20px/1.15 var(--display); letter-spacing: -0.02em; }
.garantias small { display: block; margin-top: 4px; font-size: 15px; line-height: 1.35; }

.seccion { padding-top: 112px; }
.seccion .cabeza { max-width: 1100px; margin-bottom: 48px; }
.seccion .cabeza p { margin-top: 14px; color: var(--gris); font-size: 20px; max-width: 54ch; }
.servicios-cabeza { background: var(--petroleo); margin-bottom: -1px; }
.servicios-cabeza .seccion { padding-top: 88px; }
.servicios .cabeza { max-width: none; margin-bottom: 0; padding-bottom: 56px; }
.servicios .cabeza p { color: var(--tinta); }
.servicios h2 { font-size: clamp(34px, 4.9vw, 70px); }
.seccion .ceja { margin-bottom: 16px; }

.paneles { margin-top: 0; }
.panel { position: sticky; top: var(--alto-cabecera); display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100dvh - var(--alto-cabecera)); box-shadow: 0 -24px 48px -24px rgb(var(--sombra) / 0.35); }
.panel:first-child { box-shadow: none; }
.panel-petroleo { background: var(--petroleo); }
.panel-negro { background: var(--negro); }
.panel-amarillo { background: var(--amarillo); }
.panel-hueso { background: var(--hueso); }
.panel-texto { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding-block: 56px; padding-inline: var(--margen) 64px; }
.panel h3 { font-size: clamp(40px, 5.6vw, 84px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; }
.panel-texto > p { font-size: 20px; line-height: 1.5; max-width: 44ch; }
.panel .etiqueta { color: var(--acento); font-weight: 700; font-size: 16px; }
.panel .mide { display: flex; gap: 10px; align-items: flex-start; max-width: 40ch; padding-top: 20px; border-top: 1px solid currentColor; font-size: 17px; font-weight: 600; }
.panel .mide .ico { color: var(--acento); margin-top: 3px; }
.panel-foto { position: relative; min-height: 320px; }
.panel-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }

.compara { overflow-x: clip; }
.compara .tabla { display: grid; }
.compara .fila { display: grid; grid-template-columns: 1fr 1fr; }
.compara .fila > * { padding-block: 26px; font-size: 20px; line-height: 1.4; }
.compara .ellos, .compara .titulo-ellos { padding-inline: var(--margen) 48px; color: var(--gris); }
.compara .nos, .compara .titulo-nos { padding-inline: 48px var(--margen); background: var(--negro); font-weight: 500; }
.compara .fila:not(.titulos) .ellos { border-top: 1px solid var(--linea); }
.compara .fila:not(.titulos) .nos { border-top: 1px solid var(--oscuro-linea); }
.compara .titulos > * { padding-block: 32px 20px; font: 800 clamp(26px, 3vw, 40px)/1 var(--display); letter-spacing: -0.03em; }
.compara .titulo-ellos { color: var(--tinta); }
.compara .titulo-nos { color: var(--amarillo); }
.compara .fila p { display: flex; gap: 14px; align-items: flex-start; }
.compara .ellos .ico { color: var(--borde-campo); margin-top: 4px; }
.compara .nos .ico { color: var(--amarillo); margin-top: 4px; }

.pasos ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--tinta); }
.pasos li { padding: 24px 32px 0 0; }
.pasos li .numero { font: 700 22px/1 var(--display); color: var(--acento); display: block; margin-bottom: 14px; }
.pasos li h3 { margin-bottom: 10px; }
.pasos li p { color: var(--gris); font-size: 17px; }

.precios { margin-top: 144px; padding-block: 120px; background: var(--negro); }
.precios .rejilla { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
.precios .izquierda p { color: var(--gris); font-size: 21px; margin-top: 20px; max-width: 42ch; }
.precios .izquierda .botones { margin-top: 36px; }
.precios .recibo { padding: 36px 36px 56px; background: var(--hueso); transform: rotate(1.4deg); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%; }
.precios .recibo-titulo { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 2px solid var(--tinta); font: 800 24px/1 var(--display); letter-spacing: -0.04em; }
.precios .recibo-titulo span:last-child { font: 600 15px/1.6 var(--texto); letter-spacing: 0; }
.precios .renglon { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding-block: 18px; border-bottom: 1px dashed var(--borde); }
.precios .recibo-total { margin-top: 4px; padding-top: 18px; border-top: 2px solid var(--tinta); font: 800 clamp(24px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -0.03em; }
.precios .recibo-total span { color: var(--petroleo); }
.precios .renglon strong { font-weight: 700; }
.precios .renglon .monto { font-family: var(--display); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.precios .renglon p { grid-column: 1 / 3; color: var(--gris); font-size: 15px; line-height: 1.4; }

.preguntas .rejilla { display: grid; grid-template-columns: 1fr 1.7fr; gap: 72px; align-items: start; }
.preguntas .cabeza { position: sticky; top: 104px; margin-bottom: 0; }
.preguntas h2 { font-size: clamp(36px, 4.6vw, 64px); }
.preguntas details { border-bottom: 1px solid var(--borde); }
.preguntas details:first-child { border-top: 3px solid var(--tinta); }
.preguntas summary { display: flex; justify-content: space-between; gap: 24px; padding-block: 24px; cursor: pointer; list-style: none; font: 700 22px/1.2 var(--display); letter-spacing: -0.02em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .ico { color: var(--acento); transition: transform .3s var(--curva); margin-top: 2px; }
.preguntas details[open] summary .ico { transform: rotate(45deg); }
.preguntas details p { padding-block-end: 28px; padding-inline-end: 48px; color: var(--gris); }

.cierre { margin-top: 144px; padding-block: 120px; background: var(--amarillo); }
.cierre h2 { font-size: clamp(46px, 8.6vw, 132px); line-height: 0.96; letter-spacing: -0.05em; max-width: 13em; }
.cierre h2 em { font-style: normal; color: var(--petroleo); }
@media (min-width: 768px) { .cierre h2 em { white-space: nowrap; } }
.cierre .punto { color: var(--negro); }
.cierre .cierre-pie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; margin-top: 40px; }
.cierre p { font-size: 21px; line-height: 1.45; max-width: 44ch; }
.cierre .boton-secundario:hover { color: var(--amarillo); }

.pie { background: var(--fondo); padding-block: 72px 40px; font-size: 15px; color: var(--gris); }
.pie .rejilla { display: grid; grid-template-columns: 1.5fr 0.9fr 0.9fr 2.2fr; gap: 40px; }
.pie ul.lista-giros { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.pie p { max-width: 36ch; }
.pie .lema { margin-top: 12px; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--acento); }
.pie h2 { font-family: var(--texto); font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.6; color: var(--tinta); margin-bottom: 12px; }
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pie a { color: var(--gris); text-decoration: none; }
.pie a:hover { color: var(--acento); }
.pie .legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.barra-movil { display: none; }

.problema { padding-top: 0; }
.problema .rejilla { display: grid; grid-template-columns: 1fr 1fr; }
.problema article { display: flex; flex-direction: column; gap: 20px; padding-block: 72px; }
.problema article h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(30px, 3.6vw, 48px); }
.problema article h2 .ico { width: 1em; height: 1em; }
.problema article p { font-size: 20px; max-width: 46ch; }
.problema .hoy { background: var(--superficie); padding-inline: var(--margen) 56px; }
.problema .hoy h2 .ico { color: var(--gris); }
.problema .hacemos { background: var(--petroleo); padding-inline: 56px var(--margen); }
.problema .hacemos h2 .ico { color: var(--amarillo); }

.diag { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "lado form" "despues form"; }
.diag-lado { grid-area: lado; background: var(--petroleo); padding-block: 72px 32px; padding-inline: var(--margen) 56px; }
.diag-lado .ceja { margin-bottom: 20px; }
.diag-lado h1 { font-size: clamp(40px, 5.4vw, 80px); line-height: 0.98; }
.diag-lado p:not(.ceja) { margin-top: 20px; font-size: 20px; max-width: 40ch; }
.despues { grid-area: despues; background: var(--petroleo); padding-block: 32px 72px; padding-inline: var(--margen) 56px; }
.despues h2 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 20px; }
.despues ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.despues li { display: flex; gap: 14px; }
.despues li > .ico { width: 26px; height: 26px; color: var(--amarillo); }
.despues li strong { display: block; }
.despues li span span { color: var(--gris); font-size: 16px; }
.diag-form { grid-area: form; padding-block: 72px; padding-inline: 56px var(--margen); }
.formulario { display: grid; gap: 22px; }
.formulario .campo { display: grid; gap: 8px; }
.formulario label { font-weight: 600; }
.formulario .ayuda { color: var(--gris); font-size: 14px; }
.formulario .error { color: var(--error); font-size: 14px; font-weight: 600; }
.formulario .resumen-error { color: var(--error); border: 2px solid var(--error); padding: 12px 16px; font-weight: 600; }
.formulario input, .formulario select { font: inherit; color: var(--tinta); min-height: 58px; padding-inline: 16px; border: 2px solid var(--borde-campo); border-radius: 0; background: var(--fondo); }
.formulario input:focus, .formulario select:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgb(var(--foco) / 0.25); }
.formulario [aria-invalid="true"] { border-color: var(--error); }
.formulario .casilla { display: flex; gap: 12px; align-items: flex-start; }
.formulario .casilla input { min-height: 0; width: 22px; height: 22px; margin-top: 3px; accent-color: var(--petroleo); }
.formulario .casilla label { font-weight: 400; }
.formulario .boton { justify-self: start; }
.formulario .boton[disabled] { opacity: 0.6; cursor: progress; }
.formulario .persona { display: flex; gap: 10px; color: var(--gris); font-size: 15px; }
.formulario .persona .ico { color: var(--acento); margin-top: 2px; }
.formulario .trampa { position: absolute; left: -9999px; }
.gracias { background: var(--petroleo); padding: 48px; display: grid; gap: 16px; justify-items: start; }
.gracias > .ico { width: 44px; height: 44px; color: var(--amarillo); }
.gracias h2 { font-size: clamp(32px, 4vw, 48px); }

.texto-largo { padding-block: 72px 120px; max-width: 856px; }
.texto-largo h1 { font-size: clamp(42px, 7vw, 88px); line-height: 0.98; margin-bottom: 32px; }
.texto-largo h2 { font-size: 28px; letter-spacing: -0.02em; margin-block: 44px 10px; }
.texto-largo p { margin-top: 10px; }
.texto-largo .nota { background: var(--petroleo); padding: 18px 22px; }
.texto-largo .debe { color: var(--gris); font-size: 16px; }
.texto-largo .actualizado { margin-top: 40px; }
.texto-largo ul { padding-left: 20px; }
.texto-largo li { margin-top: 8px; }
.no-encontrada { display: flex; align-items: center; min-height: calc(100dvh - var(--alto-cabecera)); background: var(--petroleo); }
.no-encontrada .envoltura { width: 100%; }
.no-encontrada h1 { font-size: clamp(48px, 9vw, 136px); line-height: 0.96; max-width: 11em; }
.no-encontrada p { margin-top: 20px; font-size: 21px; }
.no-encontrada .botones { margin-top: 32px; }

.js .aparece { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--curva), transform .6s var(--curva); transition-delay: calc(var(--i, 0) * 70ms); }
.js .aparece.visto { opacity: 1; transform: none; }
.js .compara .ellos.aparece { transform: translateX(-48px); }
.js .compara .nos.aparece { transform: translateX(48px); }
.js .compara .aparece.visto { transform: none; }

.js .precios .recibo.imprime { clip-path: inset(0 -24px 100% -24px); transition: clip-path 1.3s var(--curva); }
.js .precios .recibo.imprime.visto { clip-path: inset(0 -24px -24px -24px); }

:root { interpolate-size: allow-keywords; }
.preguntas details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--curva), content-visibility .35s allow-discrete; }
.preguntas details[open]::details-content { block-size: auto; }

@supports (animation-timeline: view()) {
  @media (min-width: 768px) {
    .portada:not(.portada-giro) img { inset: -8% 0 auto; height: 116%; animation: acercar 1.6s var(--curva) both, paralaje linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    .panel-foto { overflow: hidden; }
    .panel-foto img { animation: asentar linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
  @keyframes paralaje { to { translate: 0 7%; } }
  @keyframes asentar { from { scale: 1.16; } to { scale: 1; } }
}

@media (max-width: 1023px) {
  .pie .rejilla { grid-template-columns: 1fr 1fr; }
  .cabecera .menu, .cabecera .acciones .boton { display: none; }
  .cabecera .movil { display: block; }
  .cabecera .acciones { margin-left: auto; }
  .garantias ul { grid-template-columns: 1fr 1fr; }
  .panel { position: static; grid-template-columns: 1fr; min-height: 0; box-shadow: none; }
  .panel-texto { padding-block: 56px; padding-inline: var(--margen); }
  .panel-foto { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
  .pasos ol { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .precios .rejilla, .preguntas .rejilla { grid-template-columns: 1fr; gap: 48px; }
  .preguntas .cabeza { position: static; }
  .diag { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "lado" "form" "despues"; }
  .diag-lado { padding-block: 48px; padding-inline: var(--margen); }
  .despues { padding-block: 48px; padding-inline: var(--margen); }
  .diag-form { padding-block: 48px; padding-inline: var(--margen); }
  .problema .rejilla { grid-template-columns: 1fr; }
  .problema .hoy, .problema .hacemos { padding-inline: var(--margen); }
}

@media (max-width: 767px) {
  :root { --alto-cabecera: 60px; --margen: 16px; }
  body { font-size: 17px; }
  .envoltura { padding-inline: 16px; }
  .portada { display: block; min-height: 0; }
  .portada::after { display: none; }
  .portada img { position: static; height: auto; aspect-ratio: 4 / 3; object-position: 47% 28%; }
  .portada-texto { padding-block: 28px 36px; }
  .portada .ceja { font-size: 15px; margin-bottom: 14px; }
  .portada .bajada { font-size: 18px; }
  .portada-pie { margin-top: 20px; }
  .botones { width: 100%; }
  .botones .boton { width: 100%; text-align: center; white-space: normal; line-height: 1.2; padding-block: 6px; }
  .garantias ul { grid-template-columns: 1fr; gap: 20px; }
  .seccion { padding-top: 88px; }
  .seccion .cabeza { margin-bottom: 40px; }
  .seccion .cabeza p, .precios .izquierda p, .cierre p { font-size: 18px; }
  .panel-texto { padding-block: 40px; gap: 18px; }
  .panel-texto > p { font-size: 18px; }
  .compara .fila { grid-template-columns: 1fr; }
  .compara .fila.titulos { display: none; }
  .compara .fila > * { padding-block: 18px; font-size: 18px; }
  .compara .ellos, .compara .nos { padding-inline: 16px; }
  .compara .fila:not(.titulos) .nos { border-top: 0; }
  .pasos ol { grid-template-columns: 1fr; row-gap: 8px; }
  .pasos li { padding-right: 0; }
  .precios { margin-top: 88px; padding-block: 72px; }
  .precios .recibo { padding: 28px 20px 48px; transform: none; }
  .preguntas summary { font-size: 19px; }
  .preguntas details p { padding-inline-end: 0; }
  .cierre { margin-top: 88px; padding-block: 72px; }
  .pie { padding-block: 56px 112px; }
  .pie .rejilla { grid-template-columns: 1fr; }
  .problema article { padding-block: 44px; }
  .problema article p { font-size: 18px; }
  .formulario .boton { width: 100%; white-space: normal; line-height: 1.2; padding-block: 6px; }
  .gracias { padding: 28px; }
  .barra-movil { display: grid; grid-template-columns: auto 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--fondo); border-top: 1px solid var(--linea); }
  .barra-movil a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-weight: 700; text-decoration: none; font-size: 15px; }
  .barra-movil .wa { padding-inline: 16px; color: var(--tinta); border: 2px solid var(--tinta); }
  .barra-movil .wa .ico { color: var(--acento); }
  .barra-movil .pedir { background: var(--amarillo); color: var(--negro); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::details-content { transition: none !important; animation: none !important; }
}