/* CV a la Medida · mismos colores y letras que gabrielamendez.com */
:root {
  --fondo: hsl(36 33% 97%);
  --arena: hsl(36 30% 94%);
  --tinta: hsl(30 10% 15%);
  --cafe: hsl(30 20% 42%);
  --taupe: hsl(33 25% 70%);
  --oliva: hsl(85 25% 35%);
  --oliva-osc: hsl(85 27% 28%);
  --oliva-claro: hsl(85 20% 92%);
  --linea: hsl(33 15% 86%);
  --suave: hsl(30 8% 42%);
  --blanco: #fff;
  --error: hsl(8 60% 40%);
  --error-fondo: hsl(8 70% 96%);
  --aviso-fondo: hsl(42 80% 94%);
  --radio: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; line-height: 1.15; margin: 0 0 12px; }
h1 { font-size: clamp(40px, 7vw, 64px); letter-spacing: -0.01em; }
h2 { font-size: clamp(30px, 5vw, 40px); }
h3 { font-size: 26px; }
p { margin: 0 0 14px; }
a { color: var(--oliva-osc); }
.contenedor { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.ancho { max-width: 980px; }

/* barra superior */
.barra { border-bottom: 1px solid var(--linea); background: var(--fondo); }
.barra .contenedor { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }
.marca { font-family: 'Instrument Serif', Georgia, serif; font-size: 24px; color: var(--tinta); text-decoration: none; }
.marca em { color: var(--cafe); }
.barra nav a { color: var(--suave); text-decoration: none; font-size: 15px; }

/* botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--oliva); color: var(--blanco); border: 0; border-radius: 999px;
  padding: 14px 26px; font: 500 16px/1.2 'Work Sans', sans-serif; cursor: pointer; text-decoration: none;
  transition: background .15s;
}
.boton:hover { background: var(--oliva-osc); }
.boton:disabled { opacity: .5; cursor: default; }
.boton.secundario { background: transparent; color: var(--tinta); border: 1px solid var(--taupe); }
.boton.secundario:hover { background: var(--arena); }
.boton.chico { padding: 9px 16px; font-size: 14px; }
.boton.peligro { background: transparent; color: var(--error); border: 1px solid currentColor; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }

/* tarjetas y bloques */
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; margin: 18px 0; }
.tarjeta.arena { background: var(--arena); border-color: transparent; }
.suave { color: var(--suave); }
.chico { font-size: 14px; }
.etiqueta { display: inline-block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--cafe); margin-bottom: 10px; }
.precio { font-family: 'Instrument Serif', Georgia, serif; font-size: 44px; line-height: 1; }

/* formularios */
label { display: block; font-weight: 500; margin: 20px 0 6px; }
label .opcional { font-weight: 400; color: var(--suave); }
input[type=text], input[type=email], input[type=number], input[type=password], textarea, select {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--oliva); outline-offset: 1px; border-color: transparent; }
.ayuda { color: var(--suave); font-size: 14px; margin-top: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--oliva); flex: none; }
.opciones { display: flex; gap: 10px; flex-wrap: wrap; }
.opciones label { margin: 0; display: flex; gap: 8px; align-items: center; font-weight: 400; border: 1px solid var(--linea); background: var(--blanco); padding: 10px 16px; border-radius: 999px; cursor: pointer; }
.opciones input { accent-color: var(--oliva); }
input[readonly] { background: var(--arena); color: var(--suave); cursor: not-allowed; }
.etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.etapas label { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-weight: 400; border: 1px solid var(--linea); background: var(--blanco); padding: 12px 14px; border-radius: 12px; cursor: pointer; line-height: 1.35; }
.etapas label:has(input:checked) { border-color: var(--oliva); background: var(--oliva-claro); }
.etapas input { margin-top: 3px; accent-color: var(--oliva); flex: none; }
.etapas strong { display: block; font-weight: 500; }
.etapas small { color: var(--suave); font-size: 13px; }
.archivo { border: 1.5px dashed var(--taupe); border-radius: var(--radio); padding: 22px; text-align: center; background: var(--blanco); }
.archivo input { margin-top: 10px; }

/* mensajes */
.error { background: var(--error-fondo); color: var(--error); border-radius: 10px; padding: 12px 16px; margin: 16px 0; }
.aviso { background: var(--aviso-fondo); border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.ok { background: var(--oliva-claro); border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.oculto { display: none !important; }

/* pasos */
.pasos { display: flex; gap: 6px; list-style: none; padding: 0; margin: 28px 0 8px; flex-wrap: wrap; }
.pasos li { font-size: 13px; color: var(--suave); padding: 6px 12px; border-radius: 999px; background: var(--arena); }
.pasos li.activo { background: var(--oliva); color: var(--blanco); }
.pasos li.hecho { background: var(--oliva-claro); color: var(--oliva-osc); }
.paso { padding: 12px 0 64px; }

/* cargando */
.cargando { position: fixed; inset: 0; background: hsl(36 33% 97% / .92); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; text-align: center; padding: 24px; }
.giro { width: 42px; height: 42px; border: 3px solid var(--linea); border-top-color: var(--oliva); border-radius: 50%; animation: giro 1s linear infinite; margin-bottom: 18px; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .giro { animation-duration: 3s; } }

/* editor de perfil */
.grupo { border-top: 1px solid var(--linea); padding-top: 8px; margin-top: 28px; }
.grupo > h3 { margin-top: 8px; }
.item { border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px 16px; margin: 12px 0; background: var(--blanco); position: relative; }
.item .quitar { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: var(--suave); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.item .quitar:hover { color: var(--error); }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.fila label { margin-top: 12px; }
.sub { margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--oliva-claro); }
.sub .item { padding: 10px 40px 12px 12px; margin: 8px 0; }
.sub .item textarea { min-height: 54px; }
.agregar { background: none; border: 1px dashed var(--taupe); color: var(--cafe); border-radius: 10px; padding: 8px 14px; cursor: pointer; font: inherit; font-size: 14px; margin-top: 6px; }
.marca-dudoso { outline: 2px solid hsl(42 80% 60%); }

/* vista previa del CV */
.cv-hoja { background: var(--blanco); color: #1f1f1f; border: 1px solid var(--linea); border-radius: 6px; padding: 40px 44px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.45; box-shadow: 0 10px 30px hsl(30 10% 15% / .06); }
.cv-hoja h1 { font-family: Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 700; margin: 0; letter-spacing: 0; }
.cv-hoja h3 { font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #8a8a8a; padding-bottom: 3px; margin: 18px 0 8px; }
.cv-hoja p { margin: 0 0 6px; }
.cv-titular { font-size: 16px; margin-top: 2px !important; }
.cv-contacto, .cv-emp { color: #555; font-size: 13px; }
.cv-p { font-weight: 700; margin: 10px 0 0 !important; }
.cv-hoja ul { margin: 4px 0 8px; padding-left: 20px; }
.cv-hoja li { margin-bottom: 3px; }
.borrador { font-family: Helvetica, Arial, sans-serif; }

/* inicio */
.heroe { padding: 56px 0 24px; }
.heroe .lema { font-size: 21px; color: var(--suave); max-width: 640px; }
.como { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.como li { counter-increment: paso; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; }
.como li::before { content: counter(paso); display: block; font-family: 'Instrument Serif', Georgia, serif; font-size: 34px; color: var(--cafe); line-height: 1; margin-bottom: 8px; }
.pie { border-top: 1px solid var(--linea); padding: 28px 0 40px; color: var(--suave); font-size: 14px; }
.pie a { color: var(--suave); }

/* preguntas frecuentes */
.faq h3 { margin-top: 28px; }
.faq details { border-bottom: 1px solid var(--linea); padding: 4px 0; }
.faq summary { font-weight: 500; padding: 10px 0; list-style-position: outside; }
.faq details p { margin: 0 0 12px; color: var(--tinta); }
.heroe .subtitulo { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(34px, 6vw, 54px); line-height: 1.1; margin: 0 0 16px; }

/* tablas (página de pruebas) */
table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--blanco); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-weight: 600; color: var(--suave); }
tr.clic { cursor: pointer; }
tr.clic:hover { background: var(--arena); }
pre { white-space: pre-wrap; word-break: break-word; font-size: 13px; background: var(--arena); padding: 12px; border-radius: 10px; max-height: 420px; overflow: auto; }
details > summary { cursor: pointer; font-weight: 500; margin: 8px 0; }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.metricas div { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 14px; }
.metricas strong { display: block; font-family: 'Instrument Serif', Georgia, serif; font-size: 32px; font-weight: 400; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .tarjeta { padding: 18px; }
  .cv-hoja { padding: 22px 18px; font-size: 13px; }
  .acciones .boton { width: 100%; }
}

/* v4.5 · nombre del producto y comparación con la Optimización de CV con Gaby */
.heroe .nombre-producto { font-family: 'Instrument Serif', Georgia, serif; font-size: 26px; line-height: 1.2; color: var(--cafe); margin: -4px 0 14px; }
/* v4.6: recuadro hacia la Optimización. Tranquilo y con borde, para que no se confunda con el botón para empezar. */
.recuadro-optimizacion {
  display: block; margin: 18px 0; padding: 16px 18px; max-width: 520px;
  border: 1px solid var(--taupe); border-radius: var(--radio); background: var(--fondo);
  color: var(--tinta); text-decoration: none; overflow-wrap: anywhere;
}
.recuadro-optimizacion:hover { background: var(--arena); }
.recuadro-optimizacion:focus-visible { outline: 2px solid var(--oliva); outline-offset: 2px; }
.recuadro-optimizacion > span, .recuadro-optimizacion > strong { display: block; }
.recuadro-pregunta { font-weight: 500; font-size: 17px; }
.recuadro-servicio { color: var(--suave); margin-top: 4px; }
.recuadro-nota { font-size: 14px; color: var(--suave); margin-top: 4px; }
.recuadro-accion { color: var(--oliva-osc); font-weight: 500; margin-top: 10px; }
.comparar { margin: 18px 0; }
main > section > .acciones:last-child { margin-bottom: 36px; }
.comparar-tabla { font-size: 16px; border: 1px solid var(--linea); border-radius: var(--radio); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.comparar-tabla th, .comparar-tabla td { padding: 12px 14px; }
.comparar-tabla thead th { font-family: 'Instrument Serif', Georgia, serif; font-size: 24px; font-weight: 400; color: var(--tinta); line-height: 1.15; }
.comparar-tabla tbody th { font-weight: 500; width: 26%; }
.comparar-tabla td:last-child, .comparar-tabla th:last-child { background: var(--arena); }
.comparar-tarjetas { display: none; }
.comparar-tarjetas .tarjeta { margin: 12px 0; }
.comparar-tarjetas dl { margin: 0; }
.comparar-tarjetas dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); margin-top: 12px; }
.comparar-tarjetas dd { margin: 2px 0 0; }
@media (max-width: 640px) {
  .comparar-tabla { display: none; }
  .comparar-tarjetas { display: block; }
  .recuadro-optimizacion { max-width: none; }
}