/* ==========================================================================
   PETROCERT — pages.css
   Estilos propios de cada plantilla: portada, encabezados interiores,
   ficha de servicio, nosotros y contacto.
   ========================================================================== */

/* ==========================================================================
   PORTADA — Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: clamp(620px, 96svh, 940px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  background: var(--verde-900);
  overflow: hidden;
  isolation: isolate;
}

.hero__fondo { position: absolute; inset: 0; z-index: -2; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1600ms ease-in-out;
}

.hero__slide.activa { opacity: 1; }

.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 32, 15, .74) 0%, rgba(4, 32, 15, .34) 38%, rgba(4, 32, 15, .93) 100%),
    linear-gradient(90deg, rgba(4, 32, 15, .72) 0%, rgba(4, 32, 15, .12) 62%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  width: 100%;
}

@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__titulo {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: var(--fs-display);
  line-height: var(--lh-apretado);
  letter-spacing: -.028em;
  color: var(--blanco);
  text-transform: uppercase;
  max-width: 16ch;
  margin-bottom: 1.5rem;
}

.hero__titulo em {
  font-style: normal;
  color: var(--verde-300);
}

.hero__texto {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  max-width: 54ch;
  margin-bottom: 2.25rem;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

.hero__eyebrow {
  color: rgba(255, 255, 255, .72);
  margin-bottom: 1.25rem;
}
.hero__eyebrow::before { background: var(--ambar); }

.hero__indicadores {
  position: absolute;
  left: var(--gutter);
  bottom: 1.35rem;
  display: flex;
  gap: .45rem;
  z-index: 2;
}

@media (min-width: 1300px) {
  .hero__indicadores { left: calc((100vw - var(--contenedor)) / 2 + var(--gutter)); }
}

.hero__punto {
  width: 30px; height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .28);
  transition: background var(--t-medio);
}

.hero__punto[aria-current="true"] { background: var(--ambar); }

/* ==========================================================================
   PORTADA — bloques
   ========================================================================== */

.intro-empresa__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: var(--verde-800);
}

.intro-empresa__media img { width: 100%; height: 100%; object-fit: cover; }

.intro-empresa__sello {
  position: absolute;
  left: 1.25rem; bottom: 1.25rem;
  right: 1.25rem;
  background: rgba(4, 32, 15, .86);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md);
  padding: 1rem 1.15rem;
  color: var(--blanco);
}

.intro-empresa__sello .dato { color: var(--verde-300); display: block; margin-bottom: .3rem; }
.intro-empresa__sello p { font-size: var(--fs-sm); color: rgba(255, 255, 255, .78); line-height: 1.5; }

.lista-marcada { display: grid; gap: .85rem; margin-top: 1.75rem; }

.lista-marcada li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
}

.lista-marcada svg { flex: none; margin-top: 4px; color: var(--verde-700); }

.bloque-oscuro .lista-marcada svg { color: var(--ambar); }

/* Cobertura */

.cobertura {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 860px) { .cobertura { grid-template-columns: 1fr; } }

.cobertura__mapa {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--linea-oscura);
  aspect-ratio: 4 / 3;
  filter: grayscale(.25);
}

.cobertura__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Llamado final */

.cta-final {
  position: relative;
  background: var(--verde-700);
  color: var(--blanco);
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}

.cta-final::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 169, 0, .22), transparent 62%);
  z-index: -1;
}

.cta-final h2 { color: var(--blanco); max-width: 20ch; }
.cta-final p { color: rgba(255, 255, 255, .8); max-width: 56ch; margin-top: 1rem; }

.cta-final__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}

/* ==========================================================================
   ENCABEZADO DE PÁGINA INTERIOR
   ========================================================================== */

.encabezado-pagina {
  position: relative;
  background: var(--verde-800);
  color: var(--blanco);
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}

.encabezado-pagina__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.encabezado-pagina__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.encabezado-pagina::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 32, 15, .88), rgba(4, 32, 15, .82)),
              linear-gradient(90deg, rgba(4, 32, 15, .9), rgba(7, 46, 24, .5));
}

.encabezado-pagina h1 {
  color: var(--blanco);
  text-transform: uppercase;
  font-weight: 900;
  font-stretch: 118%;
  letter-spacing: -.022em;
  margin-top: 1rem;
  max-width: 20ch;
}

.encabezado-pagina p {
  color: rgba(255, 255, 255, .76);
  max-width: 60ch;
  margin-top: 1rem;
}

/* ==========================================================================
   FICHA DE SERVICIO
   ========================================================================== */

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: start;
}

@media (max-width: 960px) { .ficha { grid-template-columns: 1fr; } }

.ficha__foto {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 2.25rem;
  background: var(--niebla);
  aspect-ratio: 16 / 10;
}

.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }

.ficha__seccion + .ficha__seccion { margin-top: 2.5rem; }

.ficha__seccion h2 {
  font-size: 1.35rem;
  font-stretch: 105%;
  padding-bottom: .7rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: .7rem;
}

.ficha__seccion h2::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--ambar);
  flex: none;
}

.alcance { display: grid; gap: .8rem; }

.alcance li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.alcance li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: .62rem;
  border-radius: 50%;
  border: 1.5px solid var(--verde-700);
}

.ficha__aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: 1.25rem;
}

@media (max-width: 960px) { .ficha__aside { position: static; } }

.panel {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}

.panel--verde {
  background: var(--verde-700);
  border-color: transparent;
  color: rgba(255, 255, 255, .82);
}

.panel--verde h3 { color: var(--blanco); }

.panel h3 {
  font-size: 1.1rem;
  margin-bottom: .75rem;
}

.panel p { font-size: var(--fs-sm); margin-bottom: 1.15rem; }

.panel__lista { display: grid; gap: .1rem; }

.panel__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tinta);
  transition: color var(--t-rapido), padding-left var(--t-rapido);
}

.panel__lista a:last-child { border-bottom: 0; }
.panel__lista a:hover { color: var(--verde-700); padding-left: .3rem; }
.panel__lista svg { flex: none; color: var(--ambar); }

/* ==========================================================================
   NOSOTROS
   ========================================================================== */

.politica {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.politica__fila {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1px;
  background: var(--linea);
}

@media (max-width: 720px) { .politica__fila { grid-template-columns: 1fr; } }

.politica__clave,
.politica__valor {
  background: var(--blanco);
  padding: 1.4rem 1.5rem;
}

.politica__clave {
  background: var(--niebla);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 105%;
  color: var(--tinta);
  font-size: 1.02rem;
  display: flex;
  align-items: center;
}

.politica__valor { font-size: var(--fs-sm); color: var(--humo); }

.declaracion {
  border-left: 3px solid var(--ambar);
  padding-left: clamp(1.25rem, 3vw, 2rem);
}

.declaracion h2 { margin-bottom: 1rem; }
.declaracion p { color: var(--humo); }

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

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 900px) { .contacto-grid { grid-template-columns: 1fr; } }

.mapa-contacto {
  margin-top: 2rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--linea);
  aspect-ratio: 16 / 10;
}

.mapa-contacto iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Quejas y apelaciones ------------------------------------------------ */

.quejas-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .quejas-grid { grid-template-columns: 1fr; }
}

.definicion {
  margin-top: 1.75rem;
  padding-left: 1.15rem;
  border-left: 3px solid var(--verde-700);
}

.definicion h3 {
  font-size: var(--fs-h3);
  margin-bottom: .35rem;
}

.definicion p { color: var(--grafito); }

.panel-formulario {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--sombra-1);
}

.panel-formulario > h2 { margin-bottom: .4rem; }

.panel-formulario > p {
  color: var(--humo);
  font-size: var(--fs-sm);
  margin-bottom: 1.5rem;
}

/* Selector de tipo: queja o apelación */
.campo--tipo { border: 0; padding: 0; margin: 0 0 .25rem; }

.campo--tipo legend {
  font-family: var(--f-dato);
  font-size: var(--fs-dato);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: .55rem;
  padding: 0;
}

.opciones-tipo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

@media (max-width: 480px) {
  .opciones-tipo { grid-template-columns: 1fr; }
}

.opcion-tipo {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .85rem 1rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-rapido), background var(--t-rapido);
}

.opcion-tipo:hover { border-color: var(--verde-700); }

.opcion-tipo input { margin-top: .2rem; accent-color: var(--verde-700); }

.opcion-tipo span {
  display: grid;
  gap: .1rem;
  font-size: var(--fs-sm);
  color: var(--humo);
  line-height: 1.35;
}

.opcion-tipo strong { color: var(--tinta); font-size: var(--fs-body); }

.opcion-tipo:has(input:checked) {
  border-color: var(--verde-700);
  background: rgba(11, 77, 38, .05);
}

.opcion-tipo:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }

/* Consentimiento */
.campo--consentimiento { margin-top: .25rem; }

.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--fs-sm);
  color: var(--grafito);
  line-height: 1.5;
  cursor: pointer;
}

.consentimiento input { margin-top: .2rem; accent-color: var(--verde-700); }

/* Errores de validación */
.campo__error {
  color: #B3261E;
  font-size: var(--fs-xs);
}

.campo:has(.campo__error) input,
.campo:has(.campo__error) textarea { border-color: #B3261E; }

.aviso-error {
  background: #FDECEA;
  border: 1px solid #F3C4BF;
  border-radius: var(--r-md);
  padding: .8rem 1rem;
  color: #8C1D18;
  font-size: var(--fs-sm);
  margin-bottom: 1.25rem;
}

/* Confirmación tras enviar */
.aviso-recibido {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: var(--sombra-1);
}

.referencia {
  font-family: var(--f-dato);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 600;
  color: var(--verde-700);
  background: var(--niebla);
  border-radius: var(--r-md);
  padding: .7rem 1rem;
  margin: .5rem 0 1rem;
  letter-spacing: .06em;
}

/* ---- Texto justificado --------------------------------------------------- */

/* La justificación en columnas estrechas abre "ríos" de espacio en blanco.
   La partición de palabras los cierra; funciona porque el <html> declara
   lang="es-EC" y el navegador aplica el diccionario español. */
.texto-justificado p,
.declaracion p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* En pantallas pequeñas la columna es tan estrecha que justificar estropea
   más de lo que ordena: ahí se vuelve a alineación normal. */
@media (max-width: 560px) {
  .texto-justificado p,
  .declaracion p {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

/* ---- Capacitaciones ------------------------------------------------------ */

.curso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--verde-700);
  border-radius: var(--r-md);
  padding: 1.5rem 1.4rem 1.6rem;
  transition: transform var(--t-medio), box-shadow var(--t-medio), border-color var(--t-medio);
}

.curso:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
  border-top-color: var(--ambar);
}

.curso__norma {
  align-self: flex-start;
  font-family: var(--f-dato);
  font-size: var(--fs-dato);
  letter-spacing: .06em;
  color: var(--verde-700);
  background: var(--niebla);
  border-radius: 999px;
  padding: .2rem .6rem;
}

.curso h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin: 0;
}

.curso p {
  color: var(--grafito);
  font-size: var(--fs-sm);
  margin: 0;
}

/* En la banda clara las tarjetas necesitan borde algo más marcado para
   no perderse contra el fondo. */
.bloque-niebla .curso { border-color: var(--linea-fuerte); }

/* Confirmación de que salió el acuse de recibo por correo. */
.aviso-correo {
  background: #E7F4EC;
  border: 1px solid #B9DFC8;
  border-radius: var(--r-md);
  padding: .8rem 1rem;
  color: #14532B;
  font-size: var(--fs-sm);
  margin-top: 1.25rem;
}

/* ---- Descarga de documento ----------------------------------------------- */

.descarga {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--blanco);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}

.descarga:hover {
  border-color: var(--verde-700);
  box-shadow: var(--sombra-1);
}

.descarga__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--niebla);
  color: var(--verde-700);
}

.descarga__texto { display: grid; gap: .15rem; min-width: 0; }
.descarga__texto strong { color: var(--tinta); line-height: 1.3; }

.descarga__texto span {
  font-family: var(--f-dato);
  font-size: var(--fs-dato);
  color: var(--humo);
  letter-spacing: .04em;
}

.descarga__accion {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--verde-700);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .descarga { flex-wrap: wrap; }
  .descarga__accion { margin-left: 0; width: 100%; justify-content: center; padding-top: .5rem; border-top: 1px solid var(--linea); }
}

/* ---- Compromiso de ética, imparcialidad e independencia ------------------ */

/* La condición de Organismo de Inspección Tipo A es la credencial que sostiene
   todo lo demás, así que se destaca en vez de quedar dentro de un párrafo. */
.tipo-a {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  background: var(--verde-800);
  color: rgba(255, 255, 255, .84);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.85rem) clamp(1.25rem, 3.5vw, 2.25rem);
}

.tipo-a__sello {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 96px;
  padding: .75rem 1rem;
  border: 2px solid var(--ambar);
  border-radius: var(--r-md);
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--ambar);
  text-transform: uppercase;
  text-align: center;
}

.tipo-a p { margin: 0; }
.tipo-a strong { color: var(--blanco); }

@media (max-width: 560px) {
  .tipo-a { flex-direction: column; align-items: flex-start; }
}

/* Firma y descarga, al cierre del bloque */
.compromiso-pie {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linea-fuerte);
}

@media (max-width: 760px) {
  .compromiso-pie { grid-template-columns: 1fr; }
}

.firma { display: grid; gap: .15rem; }

.firma__rotulo {
  font-family: var(--f-dato);
  font-size: var(--fs-dato);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
}

.firma strong { color: var(--tinta); font-size: 1.05rem; }
.firma span:last-child { font-size: var(--fs-sm); color: var(--humo); }

/* Dentro de este bloque la tarjeta de descarga no necesita margen propio:
   la rejilla ya la separa. */
.compromiso-pie .descarga { margin-top: 0; }