/* Variables y base: ING. PRADO Y CIA Web. */
:root {
  --color-dark: #10243a;
  --color-primary: #1676b9;
  --color-primary-hover: #115d93;
  --color-whatsapp: #087f45;
  --color-whatsapp-hover: #066537;
  --color-instagram: #c13584;
  --color-instagram-hover: #a3296e;
  --color-light: #dcecf6;
  --color-white: #ffffff;
  --color-text: #344454;
  --color-muted: #c5d6e4;
  --color-border: #bdcfdd;
  --color-surface: #f3f7fa;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --radius-small: 0.375rem;
  --radius-button: 0.5rem;
  --shadow-button: 0 0.5rem 1.5rem rgb(0 0 0 / 16%);
  --shadow-card: 0 0.25rem 1rem rgb(16 36 58 / 6%);
  --content-width: 72rem;
  --page-gutter: 1.25rem;
}

/* Reset razonable: conservar controles y comportamientos nativos. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
ul {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* Tipografía y elementos globales. */
body {
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  color: var(--color-dark);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  letter-spacing: -0.035em;
}

h2 {
  margin-bottom: var(--space-3);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.025em;
}

h3 {
  margin-bottom: var(--space-1);
  font-size: 1.25rem;
}

p {
  max-width: 70ch;
}

p + p {
  margin-top: var(--space-2);
}

ul {
  padding-left: var(--space-3);
}

a {
  color: var(--color-primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-primary-hover);
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.875rem var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.button:hover {
  background: var(--color-primary-hover);
  color: var(--color-white);
}

/* Un mismo límite de contenido, con fondos de ancho completo. */
header,
main > section,
footer {
  padding-inline: max(var(--page-gutter), calc((100% - var(--content-width)) / 2));
}

/* Acceso por teclado al contenido principal. */
body > a[href="#contenido"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body > a[href="#contenido"]:focus {
  position: fixed;
  z-index: 10;
  top: var(--space-2);
  left: var(--space-2);
  width: auto;
  max-width: calc(100% - 2rem);
  height: auto;
  padding: var(--space-2);
  border-radius: var(--radius-small);
  background: var(--color-white);
  color: var(--color-dark);
  clip-path: none;
  white-space: normal;
}

/* Encabezado y navegación: todos los enlaces permanecen visibles. */
header {
  display: grid;
  padding-block: var(--space-3);
  border-bottom: 1px solid rgb(255 255 255 / 15%);
  background: var(--color-dark);
  color: var(--color-white);
}

header > a {
  justify-self: start;
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1.3;
  text-decoration: none;
}

header > p {
  margin-top: 0.25rem;
  color: var(--color-muted);
  font-size: 0.875rem;
}

nav {
  min-width: 0;
  margin-top: var(--space-3);
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-1);
  padding: 0;
  list-style: none;
}

nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-1);
  border-radius: var(--radius-small);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

header a:hover {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

nav a:hover {
  background: rgb(255 255 255 / 8%);
}

/* Hero: protagonismo tipográfico y una llamada a la acción clara. */
#inicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5) var(--space-6);
  background: var(--color-dark);
  color: var(--color-white);
}

#inicio h1 {
  max-width: 19ch;
  margin-bottom: var(--space-4);
  color: var(--color-white);
}

#inicio p {
  max-width: 60ch;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
}

.hero-content {
  min-width: 0;
}

.hero-image {
  width: 100%;
  height: auto;
  min-width: 0;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-button);
}

.hero-content > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-button);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.hero-content > a:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

/* Secciones interiores. */
main > section:not(#inicio) {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

#nosotros,
#contacto {
  background: var(--color-light);
}

section > h3,
section > ul,
address,
address + p {
  margin-top: var(--space-3);
}

address {
  font-style: normal;
}

/* Servicios: tarjetas de altura flexible y aviso de medios de pago. */
#servicios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  background: var(--color-surface);
}

#servicios > h2 {
  margin-bottom: var(--space-1);
}

#servicios article {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

#servicios h3 {
  margin-bottom: var(--space-2);
}

#servicios > p {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-light);
  color: var(--color-dark);
  font-weight: 600;
  text-align: center;
}

/* Trayectoria y logos de las marcas en tarjetas uniformes. */
#nosotros {
  text-align: center;
}

#nosotros > p {
  margin-inline: auto;
}

#nosotros > p:first-of-type {
  max-width: 52rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  background: var(--color-white);
  font-size: 1.125rem;
  box-shadow: var(--shadow-card);
}

#nosotros strong {
  color: var(--color-dark);
  font-size: 1.25em;
  line-height: 1.4;
}

#nosotros > p + p {
  max-width: 44rem;
  margin-top: var(--space-5);
  color: var(--color-dark);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
}

#nosotros ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 64rem;
  margin-inline: auto;
  margin-top: var(--space-4);
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

#nosotros li {
  display: flex;
  flex: 0 0 calc((100% - var(--space-2)) / 2);
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 8rem;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-white);
  color: var(--color-dark);
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow-card);
}

#nosotros li img {
  width: 100%;
  max-width: 12rem;
  height: 4rem;
  object-fit: contain;
}

/* Acordeones nativos: conservar el marcador y el control por teclado. */
#preguntas-frecuentes {
  background: var(--color-surface);
}

details {
  max-width: 52rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

details + details {
  margin-top: var(--space-3);
}

summary {
  padding: var(--space-3);
  border-radius: var(--radius-button);
  color: var(--color-dark);
  font-weight: 700;
  cursor: pointer;
}

summary:hover {
  background: var(--color-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

summary:focus-visible {
  outline-color: var(--color-primary);
}

details[open] {
  border-color: var(--color-primary);
  box-shadow: 0 0.25rem 1rem rgb(22 118 185 / 10%);
}

details[open] summary {
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-button) var(--radius-button) 0 0;
  background: var(--color-light);
}

details p {
  margin: 0;
  padding: var(--space-3);
}

/* Contacto: dirección destacada, acciones táctiles y horarios legibles. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.contact-info {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.contact-map {
  display: block;
  width: 100%;
  height: clamp(18rem, 50vw, 28.125rem);
  min-width: 0;
  border: 0;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-card);
}

#contacto address {
  margin-top: 0;
  max-width: 45rem;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.icon {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}

.contact-address,
.contact-hours-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.contact-address .icon,
.contact-hours-title .icon {
  align-self: flex-start;
  margin-top: 0.25em;
}

.contact-address {
  color: var(--color-dark);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
}

#contacto a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  max-width: 100%;
  width: 100%;
  padding: 0.75rem var(--space-2);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-button);
  background: var(--color-white);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

#contacto a > span {
  min-width: 0;
}

#contacto a:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: var(--color-white);
}

#contacto a:focus-visible {
  outline-color: var(--color-dark);
}

/* Colores de contacto con contraste para texto blanco. */
.hero-content > a[href^="https://wa.me/"],
#contacto a[href^="https://wa.me/"] {
  border-color: var(--color-whatsapp);
  background: var(--color-whatsapp);
  color: var(--color-white);
}

.hero-content > a[href^="https://wa.me/"]:hover,
#contacto a[href^="https://wa.me/"]:hover {
  border-color: var(--color-whatsapp-hover);
  background: var(--color-whatsapp-hover);
}

#contacto a[href^="https://www.instagram.com/"] {
  border-color: var(--color-instagram);
  background: var(--color-instagram);
  color: var(--color-white);
}

#contacto a[href^="https://www.instagram.com/"]:hover {
  border-color: var(--color-instagram-hover);
  background: var(--color-instagram-hover);
}

.contact-info > h3 {
  margin-top: var(--space-4);
}

#contacto ul {
  max-width: 45rem;
  margin-top: var(--space-2);
  padding: 0;
  list-style: none;
}

#contacto li {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

#contacto time {
  color: var(--color-dark);
  font-weight: 600;
  white-space: nowrap;
}

/* Cierre de página en el mismo azul del encabezado. */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-4);
  background: var(--color-dark);
  color: var(--color-muted);
  font-size: 0.9375rem;
}

footer > a {
  display: inline-block;
  margin-top: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-button);
  color: var(--color-white);
}

footer > a:hover {
  background: rgb(255 255 255 / 8%);
  color: var(--color-white);
  text-decoration-thickness: 0.15em;
}

/* Pantallas medianas y grandes. */
@media (min-width: 36rem) {
  #nosotros li {
    flex-basis: calc((100% - 2 * var(--space-2)) / 3);
  }
}

@media (min-width: 48rem) {
  :root {
    --page-gutter: 2rem;
  }

  nav ul {
    gap: var(--space-1) var(--space-2);
  }

  #inicio {
    padding-block: var(--space-6) 6rem;
  }

  main > section:not(#inicio) {
    padding-block: var(--space-6);
  }

  #servicios {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #servicios h3 {
    min-height: 3.6em;
  }

  #servicios > h2,
  #servicios > p {
    grid-column: 1 / -1;
  }

  #nosotros li {
    flex-basis: calc((100% - 3 * var(--space-2)) / 4);
  }

  .contact-info {
    padding: var(--space-4);
  }
}

/* Dos columnas cuando hay espacio suficiente para texto y fachada. */
@media (min-width: 64rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .contact-map {
    height: 100%;
    min-height: 28.125rem;
  }

  #inicio {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
  }

  #inicio h1 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
  }
}

@media (min-width: 72rem) {
  header {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-4);
  }

  header > p {
    grid-column: 1;
  }

  nav {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin-top: 0;
  }

  #inicio {
    padding-block: 6rem 7rem;
  }
}

/* Transiciones solo cuando la persona permite movimiento. */
@media (prefers-reduced-motion: no-preference) {
  a,
  button {
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  }
}